Roman Veselý: Notes

Comforting to know

roman@romanvesely.com (Roman Veselý) — Mon, 05 Feb 2024 00:00:00 GMT

Currently, I am reading The Star Diaries, a book by Stanisław Lem, a Polish sci-fi writer, in which he describes the stories of protagonist Ijon Tichy. Stories about space voyages, time traveling, extraterrestrial life, and robots.

Having different AIs fall onto us from all sides, it's comforting to know people thought about artificial brains way long before they started being introduced in every other product we use. Products that are either software or hardware.

While AI may present its own set of challenges and complexities, it ultimately lacks the nuanced moral compass that defines human behavior. For good or for bad, as Ijon's thoughts suggest as one of his journeys concluded (emphasis mine):

Thus concluded one of the most unusual of my adventures and voyages. Notwithstanding all the hardship and pain it had occasioned me, I was glad of the outcome, since it restored my faith, shaken by corrupt cosmic officeholders, in the natural decency of electronic brains. Yes, it’s comforting to know, when you think about it, that only man can be a bastard.

As I read the book in Czech language edition, I'm adding the translated quote as well:

Tak skončila jedna z mých nejpodivnějších cest. Přes všechny ty nesnáze a strádání, které jsem na ní zažil, jsem byl rád, že se všechno takto vysvětlilo, protože se mi vrátila víra v přirozenou důstojnost elektronických mozků, jejichž dobré jméno ti kosmičtí šejdíři tak zneuctili. Je to přece jen milé pomyšlení, že ničemou může být jedině člověk.

Krystal, a TiddlyWiki plugin

roman@romanvesely.com (Roman Veselý) — Sun, 24 Dec 2023 00:00:00 GMT

A couple of years ago, during the Covid pandemic lockdowns, I focused more on how to improve my notes and note-taking process in general.

Back then, I was not satisfied with my notes spread across several documents^[1]. Many times, I could not decide where to put something because I felt it belonged to more than one specific category. Also, for some reason, I barely came back to look for what I had already noted. In the end, it felt almost useless to spend time with note-taking at all.

I came across Anne-Laure Le Cunff and her blog full of loads of articles about productivity, learning, and journaling. Thanks to these I have found a great tool TiddlyWiki—a non-linear personal web notebook—and a great source of thoughts on note-taking by Andy Matuschak.

I liked the TiddlyWiki philosophy as well as its possibility of having backlinks between different notes.

So I have built Krystal - a lightweight plugin for TiddlyWiki that changes its vertical "story river" to a horizontal one to imitate the UI of Andy's notes system^[2].

Video showing how the TiddlyWiki UI changes with the Krystal plugin.

Since then, I have rewritten my old notes as atomic and interconnected notes. I put them into this system having a couple of hundreds tiddlers^[3] as of the time of writing. Along with that, I have also incorporated flashcards (with the TiddlyRember plugin) that I can export to Anki, a spaced repetition system.

There's a great power when notes and flashcards are being kept in the same place.

[...] it’s (finally!) a nice minimal and pleasing theme for TiddlyWiki (it even looks great on mobile!).

— Tom Critchlow, A Good Looking Tiddly Theme for Digital Gardens

So, let's go ahead and check the Krystal plugin:

If you build something on the top of Krystal, share it with others in the discussion, so we can learn from each other.

Not only documents, I also used to use calendar events for journaling. I still keep my training logs in calendar, though. ↩︎
Andy has expressed some concerns about the design. ↩︎
In TiddlyWiki, a "tiddler" is one specific note. Or, more broadly, the fundamental unit of information. ↩︎

CSS Nesting Survey

roman@romanvesely.com (Roman Veselý) — Sat, 17 Dec 2022 00:00:00 GMT

One of the most anticipated features in CSS, nesting, is indeed coming to be part of vanilla CSS. There are currently three different options for the syntax and people can choose from them in an ongoing survey to help the implementers make the decision. What are the options and what did I vote for?

Overview

All of the presented options produce the same result:

header {
  color: tomato;
}

header nav {
  display: flex;
}

Here are the options and my views on them.

Option 3

header {
  color: tomato;

  & nav {
    display: flex;
  }
}

This option is the most similar to Sass out of all the options. However, it is not the same! The nested selector cannot start with a letter. That's why in the example above, the nested rule must be prefixed with & even though it is optional in every other case (and option).

Also, when the parent selector should come after the nested selector, it must be wrapped with, for example, :is()^[1], like in this contrived example:

header {
  color: tomato;

  :is(nav) & {
    display: flex;
  }
}

I think this exception may cause a lot of errors during development when this option is implemented. The question that arises is why can't the syntax be exactly like in Sass?

Option 4

header {
  color: tomato;
}
 {
  nav {
    display: flex;
  }
}

Nested selectors and declarations are put in a separate scope. This is what I voted for because I find it the most convenient of all three options.

It may lead to some weird declarations in certain situations, though. When the parent selector does not have any declarations, its scope is empty:

header {
}
 {
  nav {
    display: flex;
  }
}

Option 5

@nest header {
  & {
    color: tomato;
  }

  nav {
    display: flex;
  }
}

The @nest declaration comes before the parent selector. This reminds many people of media query declarations. For me, it's a bit cumbersome - it forces you to think ahead and write it before nested declarations can be used, or makes you move back in front of the parent selectors and write it afterwards.

Current results

I was not surprised to see Option 3 having the most votes (as of mid-December 2022):

Option 3 - 77%
Option 4 - 9%
Option 5 - 14%

Although the survey is still ongoing, it's pretty clear that people like the Sass-like syntax the most. Probably because it is the most similar to what many of them have been using in the past few years. Even though I currently do not consider myself to be a user of the CSS Nesting feature^[2], I'm a bit sad my preferred option is least favored so far.

If you want to shape the future of CSS, participate in the survey! The survey is accompanied by lots of examples and comprehensive explanations, so it is beneficial to check it out even when you do not want to vote. If you are interested in more in-depth discussions, take a look at the Github issues of the CSS working group.

It's not about the :is() pseudo-class having some special meaning in this particular case, it just starts with a colon, therefore it satisfies the rule "cannot start with a letter". ↩︎
I think that my need (or desire?) to use CSS Nesting in my day-to-day projects has been declining for a couple of years and it is currently almost zero. This blog is probably the last project written with CSS Nesting from scratch so far. ↩︎

Highlight Text With Text Fragments

roman@romanvesely.com (Roman Veselý) — Wed, 24 Jun 2020 00:00:00 GMT

import CanIUse from '../../components/CanIUse.astro'; import { Highlight } from './_components/Highlight';

New API for navigating to the specific part of the webpage is slowly starting to be part of the browsers. In many cases, it may replace anchor linking, which has been part of the web development for decades.

Lately, I noticed some new behavior of StackOverflow in my browser. The answer I was looking for was highlighted as if I had used the browser's search functionality. However, this highlighted text was produced by Google Search, ...or not?

https://twitter.com/rmnvsl/status/1268259255418839042

This functionality is called Text Fragments and its specification was published by WICG^[1], which means it is de facto only a proposal, not a standard. Regardless of that, it seems it's not a problem to implement such a feature into a browser now.

I will explain this new functionality, check the browser support, and also provide a working example further in this article.

Text Fragments

Text Fragments adds support for navigating and highlighting specified text snippet in a page and so immediately brings user's attention to it.

Up to this time, we had to use anchors, links pointing to the elements with id attributes defined. You can try to jump to the comments section to see it in action.

The main uses cases are:

search engines - they serve links to the pages you are looking for. With text fragments, they can lead you to the exact searched content rather than linking to the top of the page.
sharing from the browser - let's say you want to share some text from the web page with a friend. You select that part of the text and from the browser's context menu you choose "Share this text" - and browser puts the URL with correct text fragment to your clipboard. Now your friend is navigated to the same part of the page. (e.g. Wikipedia article).

How a browser should respond to the text fragment is purposely not defined. While my browser highlights the text and scroll to that part of the page, it may also active search functionality on that text or show a notification with some "click to scroll to the text" message.

So, how does a text fragment look?

It's defined with :~:text= after the # (hash) in the URL, e.g.:

https://romanvesely.com/text-fragments/#:~:text=How a browser should respond,with some "click to scroll to the text" message.

Specifically, it consists of four parts:

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Text to highlight is defined by textStart, which is also the only required parameter of fragment directive. If it's too long, it can be split into two shorter parts. The second one defines the end of the snippet (textEnd). The browser will highlight everything in between those parts.

prefix and suffix define a context, so the browser knows which text to select if there is more than one occurrence of it. They represent the text immediately preceding (prefix) and following (suffix) the text that should be highlighted. It means, context is not part of the text snippet.

Some Notable Characteristics

Whole words have to be specified, just a portion of a word will not work.

Some characters have to be percent-decoded, namely, dash -, comma , and ampersand &, to avoid being interpreted as a part of the text directive syntax.

Fragment (anchor) can be used together with text fragments. It may happen that text on the page has changed since text fragment was created, so the browser can still point at least to the appropriate section of the page.

Highlighting more text snippets is possible by adding more text fragments to the URL. Just join them with the ampersand(s).

Unfortunately, as of the time of writing this article, there is no way to customize the style of highlighted text snippets.

Is Your Browser Ready?

Let's look at what browsers currently support this new feature:

Not that much. But, if you have one of the supporting browsers, you can...

See It in Action

Select any text on this page and again to see the highlighted text snippet.

For the simplicity and purpose of this example, the selection range expands across the whole selected elements.

You can use the same functionality on any page with this new Link to Text Fragment Chrome extension.

Privacy Concerns

As we all do know, not everything is bright and shiny. This new feature, which has already rolled out to hundreds of thousands of devices, might be misused against their users without their knowledge.

I was pointed to the article elaborating further on this matter. I would also recommend you to check this tweet thread by Pete Snyder, which should give you a better picture. I couldn't explain it better.

I would like to learn more about this security topic, so if you know about any related resource, please, ping me.

W3C Web Platform Incubator Community Group. I was not aware of this group before. How could I, there are many of them. ↩︎

Learning Log #4

roman@romanvesely.com (Roman Veselý) — Sun, 14 Jun 2020 00:00:00 GMT

More JavaScript and TypeScript stuff, tips for GitHub and offline world.

Sidenote: now, you can find the content of all my Learning Log together in one place. It should be easier for me to add new pieces more frequently. I can also transclude the content of any individual log anywhere where a React component can be used thanks to the new <Log /> component. RSS ~~may come later~~ is also available.

JS/TS related:

GitHub Tip

Offline Behaviour

That's enough for now, see you next time!

React hook generating crypting text effect

roman@romanvesely.com (Roman Veselý) — Sun, 23 Feb 2020 00:00:00 GMT

Add Matrix-like effect to your text with this simple and customizable React hook.

url: https://www.npmjs.com/package/use-dencrypt-effect
repository: https://github.com/crazko/use-dencrypt-effect

Learning Log #3

roman@romanvesely.com (Roman Veselý) — Sat, 08 Feb 2020 00:00:00 GMT

List of interesting news, resources or issues and their solutions I have been lately dealing with. <Log id="0012" /> <Log id="0013" /> <Log id="0014" /> <Log id="0015" /> <L...

Where do you journal?

roman@romanvesely.com (Roman Veselý) — Mon, 27 Jan 2020 00:00:00 GMT

Have you ever tried to keep your own daily journal? Maybe you had been journaling at a very young age. Maybe you keep your journal even today. Maybe you think you should give it a try, at least. In any case, there are dozens of options to use for thought preservation. Which one to choose?

One can use a physical notebook, but in the computers and mobile phones era, some journaling app is as much at our fingerprints. Even though many people prefer handwriting over typing on the keyboard, for a big portion of the population computers are equally natural - we work with them every day. So maybe it makes sense to use them also for journaling.

TL;DR: try to keep your journal in the daily events of your calendar. And if you by any chance use Google Calendar, try also a new browser extension Kalendario, which I made. It shows event descriptions in agenda and search views, and thanks to that it makes reading through descriptions of many displayed events easier.

I've tried several apps to save the notion of my daily experiences for my future self but never been a fan of any for a long time. I have spent the most time in the Google Docs, though. Documents are accessible from any device and sync automatically, which is very convenient. Many journaling apps have similar features, but a simple document feels just like a blank piece of paper.

Having everything in one document was good enough for me until I hit around one hundred pages full of text which caused severe lagging every time I opened it to read or add something new. I was also missing a feature allowing me to search by a specific date. Of course, it wouldn't be a problem if I stick to some (templating) rules. I also thought that a journaling app could imitate an advent calendar - where you can see used slots and those yet untouched.

My search for a new app slowly started again... until I realized I've had it in front of my eyes all that time!

Welcome, Calendar

As I wrote in the previous paragraph - I was thinking about a calendar-like application - and, of course, I use one - Google Calendar. Why not use it also for journaling? My approach has become as follows:

create one event for any type of an entry
name of an event follows its type (daily, weekly, monthly; quarterly and yearly evaluations)
set it as "all day event"
put everything in the description (I use markdown)

And that's all! You can search easily, by date (range), name, or by any content type. It's fast, it's simple to use.

After some tinkering, I've also started to add notes from my training sessions - weightlifting, running, etc. Actually, now I have my whole workout plan from the past years in a separate calendar with all the exercises, weights, and notes on how I felt during a session. It's very easy to find some CrossFit routine I liked, but can't remember anymore - search for thrusters & box jumps suffice my need in a fraction of seconds. (a tough combination of exercises, by the way).

One feature I still miss in Google Calendar (and others as well), though. It is not possible to display descriptions of more the one event at a time...

I thought I can fix it. Well, not fix directly, but add that missing functionality and make me happy. And maybe some other fellas with me.

Meet Kalendario

So I made Kalendario - a browser extension for Chrome (and other Chromium-based browsers) and Firefox, which shows event descriptions in agenda and search views of the Google Calendar.

Reading through many events is now much more easier. A picture is worth a thousand words:

Visit https://kalendario.org for more information or download it for Chrome or Firefox right away.

What's your journaling approach? Let me know what you think when you give it a try!

Moved to Gatsby

roman@romanvesely.com (Roman Veselý) — Mon, 23 Dec 2019 00:00:00 GMT

Up until now, this site ran on PHP, but as time passed I felt like it needed a change. I've been interested in the JAMstack since I've heard about the term some two years ago. I also work with React in my job so it was obvious I would reach for Gatsby.

Previously I used Statie, PHP static site generator, and was pretty much satisfied with it as it met my needs. I've written my very first blog posts about it, and also made it's own homepage to help Tomas, author of the tool, to spread the word. But over the time my toolset has changed, and one of my dearest features, Latte templating system, has been removed from the tool - which made me a bit sad. Although I truly understand this move and appreciate Tomas' effort in creating and maintaining the project, it was time to move on.

It's not my first Gatsby project, though. I used it for Paralelná Polis Košice, which used the first version of the tool in the beginning and was refactored to the second version when it became available. So, I felt pretty much confident starting a new project as I thought I gained some good experiences.

I've identified three main things that slowed me down during the refactoring more than I expected:

Statie aimed for simple sites and blogs - global $posts array was available throughout the files
Gatsby and its ecosystem have a very vital development - there are numerous ways of how to do things, so you have to constantly think about how to approach even the basic stuff
I needed to switch from template-based system to React components

So, the whole process took twice as much time as I expected, while I still miss some features I previously had. That makes me think if my decision of switching the tools does worth it. If I will use effortless React components in blog posts in the future, maybe it will. One can say that Gatsby generates fast websites, and it's true, but pure HTML sites Statie generates are as fast. Actually, with Statie I had 100 points in performance Lighthouse test, while 97 points with Gatsby :).

List of missing features and things to fix:

~~the active menu item "notes" when reading a blog post~~ - there is no longer such item in the main navigation df7cc15
image max-width and usage of Gatsby advanced image - done in 08c736d
~~HTML in the lead paragraph~~ - style removed in 36c0748
images for social sites - I used my PHP package, and still can, but not as a part of the project
<abbr> element in pages/posts - done in 757b5b0
~~JSON feed~~ - it doesn't matter as it was probably not used by anyone

I will come back and update the list accordingly.

Learning Log #2

roman@romanvesely.com (Roman Veselý) — Wed, 13 Nov 2019 00:00:00 GMT

A new day ahead of us, time to remind newly gathered knowledge. This is a part of my notes taken during dealing with my day-to-day tasks. <Log id="0006" /> <Log id="0007" /> <Log id="00...

Knowledge Sharing

roman@romanvesely.com (Roman Veselý) — Mon, 11 Nov 2019 00:00:00 GMT

Do you have something you want to share? Meetups and conferences are great places where anyone can learn new things. They are also a great opportunity for anybody to teach something they think may be valuable for others. But public speaking is not for everybody. Well, at least not for their first time to stand in front of the audience as a speaker. What else can we do? Are there any other options? What about to be in an environment you are already familiar with?

Being in front of unknown people and speak about some topic could be daunting. And what's more, if you are kind of an introvert person you may feel it's a terrible idea at all! But if you really want to start somehow I propose to make it happen together with your colleagues. Either in the company you work for or within the community of a co-working space you visit in case you freelance.

In my previous team, we had a quite nice habit of such a way of knowledge sharing - we called it Mini Geeky Tuesday. "Mini" because the whole thing meant to be short to fit into a regular day filled with coding and meetings, "Geeky" because that's what we think we are - wise and funny, and "Tuesday", because ... only sometimes it fell on a different day in the week.

What was it all about? To share something valuable within the team. Something everyone could pick out of interest, like an introduction to a new tool or technology, but also speak about an interesting problem one was confronted with and its solution.

Most of our talks took up to about 10 to 15 minutes and didn't require to have any slides prepared. Only a blackboard if that was necessary. It was voluntarily based, so it happened that once we had 4 talk streak in a month and one talk in a quarter thereafter. Either case is good!

And what to talk about, you ask? Well, you choose! Topics may vary greatly. Or not :)

Topics I've spoken about

HTTP methods, responses, statuses and how do they play with RESTful APIs
peculiar errors with PHP & JavaScript magic methods
what is Game of Life (not The Sims :), also with a puzzle to solve
how to measure code quality, how to spot code smells, what is code coverage, cyclomatic complexity and what the hell is C.R.A.P.
relative vs. absolute CSS units - px, rem, em, ch - where and when, how do they work with the cascade
what is CSS Houdini and where it stands in the current web technologies
static web generators and JAMstack - in theory, and from practice

Beyond short talks

There are also other options, though. You can prepare puzzles or interesting math problems. Share them in the morning and let time for your team to find a solution, which you can present in the afternoon. I find it relieving, especially in the long or hard days.

To dive into the more advanced matter you can arrange a workshop. We had a couple of them. Topics we dealt with, from the top of my mind:

advanced Git techniques
regular expressions step by step
introduction to push notifications

You can even have a competition - code together and have fun!

Benefits

You see, there are many methods you can use to share your knowledge without the fear of the unknown. You and people around you can learn a lot together, double up new ideas or discover new possibilities.

For sure, you can think of many different forms to those aforementioned, but the result remains the same. To push forward, you, others, us. And in the end, it can lead you to whole new experiences if you step out of your comfort zone.

Learning Log #1

roman@romanvesely.com (Roman Veselý) — Mon, 07 Oct 2019 00:00:00 GMT

Learning in public has gained pretty big popularity across my twitter circles. Surely, the concept isn't new, but now it has a name. As being a curious person myself, I've started collecting my findings from dealing with day-to-day tasks a while ago. Now it's time to publish the coherent form of the notes in the first post of the learning log series and so become the part of the wave.

See you next time.

Batch install extensions for Visual Studio Code

roman@romanvesely.com (Roman Veselý) — Thu, 29 Aug 2019 00:00:00 GMT

So, you move to another machine (permanently or temporarily) and need your favorite editor to behave the same. How to easily take the installed extensions with you?

When you try to google vscode synchronization you are presented with an extension called Settings Sync that can pretty much cover this problem and do even more. In my laziness, I found the set up a bit complex as I only wanted to get all extensions from my old device and install them to the new one. Once and for all. Preferably without any GitHub token fiddling around.

OK, let's make it quick; we can do that just with a few commands. Open your terminal and execute:

code --list-extensions > extensions.md

This will put the list of your VSCode extensions in the extensions.md file, one name per line.

Side note: I use markdown for almost all text-only files currently, but clearly, it can be anything.

Now you need to move this file to your new machine. Use Dropbox, Drive, email, USB stick, whatever suits you most. Finally, execute:

xargs -n1 code --install-extension < extensions.md

xargs will execute code --install-extension for provided input. More precisely, argument -n1 means that a command is executed one-by-one for every line of the input file. First item may produce code --install-extension esbenp.prettier-vscode to install Prettier - Code formatter.

And that's it! You have successfully installed all your extensions with only two commands.

For more info check all VSCode commands for managing extensions. For evidence, here is the list of my extensions:

Collection of remarkable tweets

roman@romanvesely.com (Roman Veselý) — Thu, 15 Aug 2019 00:00:00 GMT

For the past month I've published several articles on dev.to containing some of my favorite tweets I've collected (liked) so far. I think you would like them too!

I tend to use Twitter likes to bookmark interesting content, just not for everything I consider likable. From time-to-time, I also go through the list and un-like what I don't find interesting anymore. This approach keeps my list of liked tweets short, consisting only from the content I'd enjoy in the future.

That's what happened with tweets I found as wise as funny - in the end, I got dozens of them. So why not to share? The series includes 4 posts, issued every Friday in the past month.

1 post equals 10 tweets. Here they are:

Pause for a while, go through them and a have a good time!

Do not waste your time on Facebook

roman@romanvesely.com (Roman Veselý) — Fri, 28 Jun 2019 00:00:00 GMT

People spend a lot of time on Facebook. Statistics differ from source to source - they say that one user spends (or squanders?) on average about 30 minutes up to 2 hours on this social network per day. We can put these numbers into a simple equation to find out that it represents 7 to 30 days in a year, yuck! What can we do about that?

Of course, a resolute way is always at hand, which is simple account deletion. However, it's not for everyone. Many found their way back after some time, primarily after they came to the conclusion they miss something and especially when a deletion is never definitive from a technical perspective. For me, the most important is communication with my friends, and on Facebook are simply all of them. Well, to exchange messages, Messenger is good enough. But events and a wide variety of groups are similarly essential channels for communication. Simply put, everybody has their own preference.

You can also read the original post in the Slovak language.

Nevertheless, it needs to be said that space for our friends' and liked pages' statuses - News Feed - is the one and only glutton that takes the most of our attention. Everything they share, like or what behind-the-scene algorithms evaluate as interesting for you. And they know it really well, small statistics in the intro stands as proof. Every feed is different, created to be consumed by its user all the time. The reason for that is simple - advertisement and revenues flow.

Is the account deletion the best option for you? Congratulation. You can do so in the settings and the rest of this article has now become irrelevant for you. Just take a look at the site that speaks about accounts deletion even further.

Below you can find more options, that allow you to keep your account active. Fast and less complicated options which you can also jump over if you want to check the permanent method of how to gain power over your time back to your hands.

Fast methods

The fastest and, at the same time, the easiest way of spending as less time on Facebook as possible is probably the making use of browser add-ons that can hide the feed entirely with all its content. Whether the content originates from people, pages, or groups.

No content means no reason to lay over.

Add-ons like Kill News Feed and News Feed Eradicator (both for Chrome), or Disable Facebook News Feed and News Feed Eradicator (Firefox) do exactly what their names indicate. However, you cannot add these add-ons to your mobile device, therefore that handy little thing is still a trap for your time.

An advanced alternative which offers more options is an installation of programs (and apps in phones), that have a broader focus than just Facebook. Programs like Freedom or Focustime are capable of blocking access to selected websites entirely. With their help, you can set the time when the site is not accessible at all. It is a bit more radical approach in opposite to add-ons because you lost access to everything - you can't even get to the messages.

There is also another drawback, hidden in the usage of these programs. You have to choose the times important for you. Times in which the interruption is not tolerable. But can you really say where to put the boundaries? When the time-span you set is too narrow the outcome will be small. Too broad time-span and you will feel limited and tempted to turn off selected settings. Trial and error.

Permanent method

What will be the result of our effort? Clean, empty feed:

There is nothing trying for your attention. The resulting effect is the same as with add-ons, but with one additional value - the mobile website will look equally the same. Yes, I suggest not to use the Facebook application and access the site solely from your mobile browser. Doing so you take the full advantage of the permanent method. But the message exchange is a bit cumbersome on the mobile web version, therefore I recommend to use Messenger Lite, which, as the name suggests, contains only basic functionality.

If you log in to your account from a different browser or from a completely different computer, it will still look the same (good).

How to do that?

Unfollow all your friends, liked pages and groups you are a member. I know, I know, it sounds too extreme and based on the number of your connection the unfollow process will take its time. But you have to do it only once (and with every new friend or liked page/group). When it's done their posts will no longer take place in your feed.

If you don't want to lose all the information, here are some alternatives:

turn notifications on for people, pages or groups you care about - you will be always notified about their activity
follow your 10 most significant friends - your feed will have just a bare minimum information

It will take time to set it all up, but your reward will be the flexibility and the working solution on every platform.

That's it!

What to do next?

For even better effect you can subscribe to pages' newsletters instead of following them. Of course, if they offer any. Their quality is growing and they aren't being sent too often (once a week let's say), so they contain only relevant information.

You can turn off notifications in the mobile apps, but frankly, the time horizon can be set only up to 24 hours. In the system settings, it's possible to turn off notifications for specific applications permanently. Another helpful feature is Do Not Disturb mode, especially in the time you need maximum concentration.

Other great minimalism tips could be found at https://verekia.com/zeromalist/ which was my source of inspiration (not only for this article).

Finally, my last piece of advice for you - less time spent on Facebook shouldn't mean more time spent on, let's say, Twitter :).

Useful search engine shortcuts for browsers

roman@romanvesely.com (Roman Veselý) — Mon, 06 May 2019 00:00:00 GMT

Most of the modern web browsers today contain functionality to set multiple search engines that can reduce your day-to-day time spent on finding the best results. Some time ago I tweeted about adding GitHub to the browser's search engines list. My list has grown in size since then and I think you may find it useful.

My default browser is Vivaldi, but you can find the same setting in all of the following: Firefox, Chrome, Opera or Brave. I currently don't have access to IE/Edge and haven't found it in Safari; sometimes it's really old-fashioned in comparison with others...

This is how the usage of a custom search engine looks like in the wild:

Where to look for? Use the following addresses:

vivaldi://settings/search/ in Vivaldi, under Search Engines
about:preferences#search in Firefox, under One-Click Search Engines
chrome://settings/searchEngines in Chrome, Opera and Brave, as all of them will redirect you to correct address

You have to add engine name, keyword or nickname which is the shortcut you use in the address bar and search URL containing %s which is a placeholder for the phrase you are looking for. So in the case of Stack Overflow, the settings are as follows:

name: Stack Overflow
nickname/keyword: so
URL: https://stackoverflow.com/search?q=%s

It's a bit different in Firefox where you add custom engines as add-ons, so you have to search them up in their add-ons portal. You can set a custom keyword afterward.

My current settings

name	keyword	url
DuckDuckGo	`d`	`https://duckduckgo.com/?q=%s`
Wikipedia	`w`	`https://en.wikipedia.org/wiki/Special:Search?search=%s`
Google	`g`	`https://www.google.com/search?q=%s`
GitHub	`gh`	`https://github.com/search?q=%s`
Can I use...	`c`	`https://caniuse.com/#search=%s`
npm	`npm`	`https://www.npmjs.com/search?q=%s`
Stack Overflow	`so`	`https://stackoverflow.com/search?q=%s`
YouTube	`yt`	`https://www.youtube.com/results?search_query=%s`
MDN	`mdn`	`https://developer.mozilla.org/en-US/search?q=%s`
PHP	`php`	`https://www.php.net/manual-lookup.php?pattern=%s`

Pitfall

Let's say I want to know more about npm console options.

In a hurry, I type npm cli options in the address bar and get "0 packages found" as a result. Huh? That's because I set npm keyword to search in the npm package database. To overcome this behavior I need to use g npm cli options to tell the browser to use Google as a search engine.

That's definitely not the end of the world, but it can be confusing sometimes. It may be solved by choosing different keywords, it's up to your preferences!

Do you have any other interesting use cases?

Code together and have fun

roman@romanvesely.com (Roman Veselý) — Thu, 28 Feb 2019 00:00:00 GMT

Some time ago I came upon the term Code in the Dark, an event for true frontend lovers. Probably it was a part of some conference, where visitors became participants and competed together in creating HTML and CSS completely without seeing the results. I thought it could be fun to be part of such a competition. Not very recently this idea popped up into my mind again and I decided to organize a similar event with my colleagues.

Here is the original concept of the contest:

Code in the Dark is a front-end (HTML, CSS) competition, originating from Tictail, where each contestant competes to implement a website design given only a screenshot. The catch is that no previews of the results are allowed during the implementation, and no measuring tools can be used. The winner is decided by the audience.

A competitor is also restricted only to use the web-based editor and has 15 minutes time cap to complete the task.

Grab some 🍺 and have fun

So, the idea was to hold an event locally in our office after the working hours. I wanted it to be not so restrictive about the used editor - all of us like to work with something else - and let everyone leverage the strengths of their choice. Yes, I'm talking about Emmet and snippets support. I knew that PhpStorm, Sublime Text, and vscode are used among us, but in the end, all of us decided for vscode.

Another difference, in comparison with the original idea, was that the audience (everybody not coding at that moment) could have see the preview of those currently competing. This was very important for me. I'd say it was the main purpose of the event: grab some beer, watch and have fun while others are dying trying and not knowing what they are doing. And here and there it was really a comedy.

Setup and technical aspects

We had two people coding in one round. The rest were watching the preview at projector screen in a real-time. I as a moderator was choosing a design to code, taking care of time and smooth course.

In front of every competitor was a screen with a current task, that was not connected to their computer and could be changed on demand by me/moderator. That way they could care only about the code. The projector screen was split into halves to show the results of both contestants side-by-side.

All of this was easily possible thanks to the Browsersync's feature called tunneling, provided by localtunnel.me. Every coder created a tunnel and shared a URL with me, so I could put it on the screen for the audience. I created a tunnel to show the design for the competitors.

Browsersync watch for changes and refresh the tunneled URL, real-time updates for all! Note that changes have to be saved for Browsersync to catch them so enabling auto-saving option is recommended.

I put together a simple repository with all the settings. Feel free to use it (and let me know, what do you think).

Conclusion

As I already said - it was much more fun than I expected. I really recommend you to try it and spend some informal time with your colleagues (or friends), it could be a part of your team-building activities.

No one would say 15 minutes can pass so quickly. You shouldn't expect any fundamental results after that time, but it is just enough to not let the audience get bored. So be prepared that at the end of the time cap the results might be ... unsatisfying for a proud coder 😀.

Here are some designs I chose for us, but for the next round, I'm thinking about less sophisticated ones. To design only a logo, or only some part of the site, like navigation, let's say.

Let me know if you have had a similar experience!

Post social image

roman@romanvesely.com (Roman Veselý) — Mon, 11 Feb 2019 00:00:00 GMT

Creates images suitable for social sharing.

PHP library and a simple command line tool to generate images suitable for sharing on social media sites. I made it to generate meta images for my blog posts.

url: https://packagist.org/packages/crazko/post-social-image
repository: https://github.com/crazko/post-social-image

Blindness coding

roman@romanvesely.com (Roman Veselý) — Tue, 05 Feb 2019 00:00:00 GMT

Simple yet fully-working solution for your own contest.

Whether you are interested in a strength or in a muscle gaining, powerlifting may be a good bet for you. Fomin is one of the prescribed programs out there. This small app helps you to calculate your weights needed to complete this routine.

Read about how we did our contest.

repository: https://github.com/crazko/blindness-coding

Easy frontend development

roman@romanvesely.com (Roman Veselý) — Wed, 02 Jan 2019 00:00:00 GMT

Create, store, present and distribute HTML templates painlessly with the current offer of the tools that are ready to help you. And completely for free!

Background

At the beginning of my developer's career and throughout the years, I was tinkering mainly with the frontend, specifically, I was converting website designs created in Photoshop to templates using HTML and CSS, with a little help of JavaScript (jQuery to the rescue!). Those templates were later implemented together with some CMS by client's backend programmer. Although technologies, processes, and use cases from that time have changed, sometimes radically, we always get back to the roots - plain *.html files.

Back then, a lot of work was repetitive (or maybe I just didn't know the better way of doing things): copy-pasting common parts of the design to every template, like a header or a footer. Imagine a dozen different subpages - templates for the main page, article, product, cart, etc., and a moment you realize you forgot to add a site's logo to some part of the footer. You'd had to open every template and add it to the place. Of course, PHP later helped me to generate resulting templates, but I found it a bit cumbersome.

Now, when I was done I had to share my work, let it be checked if everything's OK. It meant to create a ZIP with all the files, send it via email and wait for the response. An error found? Designer realized he wants to change something, even a small piece? The whole process began again.

With free hostings available, in the FTP era, it was a bit easier, but with continual changes in design still very error-prone and laborious.

What I was looking for/look for now?

Not that much:

share common parts of the templates - no more copy-pasting same thing to several places
have some updated preview for a designer or a client - so they can react immediately upon changes (or when they have time for that)
a simple possibility of updates - to get rid of another copy-pasting over FTP
a better way of distribution of the final solution - ZIP files, really?
faster feedback handling - email or chat communication can get messy really fast, and one can overlook important things easily
have some space for documentation - not only for final backend implementer but also for my future self

Today's possibilities

Like I described at the beginning of the article, everything's always changing, but after several tries and failures my current tech-stack consists of:

Nunjucks - JavaScript templating language
Gulp - handles repetitive tasks
Browsersync - offers live reloading, really beneficial through the development phase
Bitbucket - provides (private) storage for your files
Netlify - hosts your preview

Nunjucks

Nunjucks as a templating language provides everything I was looking for, it comes with support for variables, template inheritance, which is great for defining global layouts, macros, which means custom functions, filters, that modify output and much more. It allows you to split parts of the templates to multiple files to preserve DRY principle.

{% extends "base.html" %}

{% block header %}
<h1>{{ title }}</h1>
{% endblock %}

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}

Here comes the question - why not just use any of these static site generators? Or maybe React, which is component based by default? I think it would be unnecessary overkill to create dummy templates with those. I have to keep in mind I don't know who is going to use my work, either its output or the source code, so I try to make things as simple as possible for the end user, let it be anyone. Recently I also came upon the Embedded JavaScript templating that seems like a good alternative.

Gulp & Browsersync

Widely known task automation manager gulp still has its place in today's web development even though we have powerful Webpack now. Tasks configured via plain JavaScript functions are understandable for a broad audience. Browsersync speeds up your development process with automatic synchronizing of your changes that are reflected in the browser, or multiple browsers, or even mobile devices, at the same moment. It saves a lot of time.

Here is an example how a gulpfile.js could look like. It's a bit simplified because no project has the same settings.

Bitbucket

Bitbucket is Git code management, it stores your code, which you can share with the others when you add them as contributors. It offers unlimited private repositories, which is simply great. With a repository for every project you can keep simple documentation in README.md file or use embedded wiki pages for more sophisticated help.

But what is actually valuable is the issue tracker. You can lead a discussion for every bug or a new feature separately in specific tickets and mark them as done when you are done. You are no more lost in countless email chains. This is very powerful.

Netlify

Finally, Netlify is a static hosting. You cannot run PHP or other languages on the backend, which is fine since all we want is to present dummy HTML pages. It connects to your Bitbucket's repository and can run the specific task(s) on every change (every commit).

Do you remember gulp?

When you connect everything together, Netlify can run gulp task that builds your templates written in Nunjucks (or any other templating language) and host them for free on a custom subdomain, such as https://metropole-33b4eb.netlify.com/. And it will do that on every change in your source files that you push to the repository.

Now you just have to share a domain name with your client and at any time he or she will see the most updated version of your work. Automation is strong.

Summary

Every project is different, so I didn't specify any CSS preprocessors or JavaScript libraries that may be used in the process. Possibilities are probably countless. My current setting consisting of aforementioned Nunjucks+Gulp+Browsersync+Bitbucket+Netlify works for me now but might change in the future.

Just keep in mind, not everyone is used to work with things like issue tracker or gulp tasks/npm scripts. But it really pays off to teach your clients or coworkers to use them properly. For both sides.

Find it useful? Great! But I can imagine you have a different approach. What does it look like?

Heslá a ich ochrana

roman@romanvesely.com (Roman Veselý) — Wed, 19 Dec 2018 00:00:00 GMT

What are the current recommendations on how to handle passwords securely from the user perspective? Presentation is in Slovak language.

Presentation slides. Read also about Paralelná Polis.

WebExpo 2018

roman@romanvesely.com (Roman Veselý) — Tue, 25 Sep 2018 00:00:00 GMT

I wasn't considering to attend any other conference this year besides Hackers Congress in Paralelni Polis, but, sadly, I haven't noticed the launch of the tickets sales until all of them were gone. But I got a free ride to WebExpo thanks to my colleague Erik from Ness KDC who was not able to attend. Same venue, different topic, same excitement.

It was the first time I attended such a big event inherently connected with what I like to do (in or outside of my job), so I'm very pleased I got an opportunity to be there, although, I can expect more such events to come in the future. The place of the event - Lucerna - is really nice (and big!), organizers did a great job to prepare everything for the good of the visitors, I didn't miss anything.

Keynotes' recordings are already available, so I added them below, to the individual presentation reviews. They were released only one day after the end of the conference, superfast! Some people didn't have a chance to go to the afterparty, I guess...

Talks

I tried not to attend many technical oriented presentations, mostly because I know I would not withstand the temptation to try new things for a very long time. Instead, my intention was to gather thoughts and to just think about theoretical topics, which would lead me to some kind of "big picture", I think I did my selection well.

Day 1

Impactful Storytelling for Innovators and Disruptors

Susan's career started in Thailand, where she was helping to reduce AIDS spreading. "If you don't use a condom you die." Usage of the fear in persuasion can work for some time but doesn't last forever. Your customer needs to be a hero, you have to sell stories in which your listener feels like one. Stories can be explicit when a company creates them. Or, implicit, when its customers use a product to deliver their story, which becomes the story of the brand (e.g. GoPro cameras). The best way is to create a bridge between the history, what was it like, and the present, a product currently being produced.

Adaptive Upskilling as the Future of Workforce

Everyday learning is a must, something not only developers know very well. Exponential technologies are here and we have to be ready for them. Most of the kids studying currently in primary schools will work in industries not yet existing. Knowledge gathered in a school is not enough (probably never was), it is becoming obsolete in an increasing speed. Many tasks could be automatized, companies are using freelancers instead of full-time employees. Thanks to the huge competition in the market they tend to learn more. Will robots take our jobs? New technologies are already used in production, yet most of the recruiters can't catch a train, do not understand current demand needs. Michal is on the mission to upskill 1 million people.

Changing the world with the web

Finding new connections between data scattered in different locations through open data. Sally wants more people to be active in the UK. She showed booking portals where many different areas (places to visit, food tourism, insurance...) of people's needs are interconnected and used them as an example of what can be done in making their lifestyle better - bringing communities of different sports, places to train, etc. into one place. And that it can be done without deep knowledge with the leverage of existing (and free) tools like Google Sheets or Glitch. DX - developer experience and supporting people with different level of knowledge is a way how to get more people to the project.

Animations beyond CSS

Nice demo on how we can create animations in CSS & JS given by Eduardo. By using declarative way of defining them we can get easily more things done. Of course, more abstraction needs to be created. There are two types of animations - easings and springs. In the CSS only former can be used, for the later we need some assistance of the JS world, but can get more smooth results.

How can tech teams help or destroy a startup?

A startup cannot be built only with freelancers. Job jumping is too frequent due to high demand for developers and other creatives. It can harm their seriousness.

VR/AR are not flashy toys anymore

Great talk of what can happen when people creating AR product are not in place; that it is hard to build application only by photos taken by one person. No one should expect that target audience behave a way a product needs. Recommendation? Get real actors to the place of the act, don't rely much on things to be delivered by a customer. And give yourself enough time to prepare everything beforehand.

Design Systems at Scale

From a small team including only one designer to the moment, when designers cannot see everything that was created with their work. That means they can consult neither correct way of the implementation together with developers nor edge cases that can happen throughout the realization.

What's not written didn't happen
Turning makers to educators

Document everything.

https://twitter.com/rmnvsl/status/1043134838683910144

React.js portals and modern JS apps for CMS

I was expecting something more Portals-oriented, but the almost whole talk was about other things. Tomas created React Union and I hoped for the deeper explanation of how portals were used in this project.

Interview with Jakub Nešetřil

Just a small note aside from the interview - immediately after the discussion started people went to sli.do to ask their question. They were very creative, which, I suppose, was caused by the late hour of the day filled with great presentations. One of them, not a question that'd fulfill a description of "request for information" got the attention of the many:

Ain't nothing has happened...

Config-less. Server-less. Effort-less.

The main idea of Guillermo's presentation was do less to achieve more. In a nutshell, it's how his work can be described. He led us through the history of the development of his projects - socket.io, nextjs, zeit and explained why they are so popular. A team should be able to deploy every minute, not every quarter. Stressless, many *-less words were used. And yeah, duplication is cheaper than the wrong abstraction.

Day 2

People & Algorithms

Machine learning is still tough and creates biased results based on human customs and assumptions (man-doctor, woman-nurse). Data is not objective or fair. FB algorithm picked for a year review a photo of a child who died recently (hint: don't post sensitive information publicly). Don't assume anything without context.

How to design the future

People tend to overestimate near future while underestimating distant future. No one can't trust what they see because of personalized bubbles they created.

How to Build an Evil-Free Social Network

One of the best talks with a really nice and interactive slides. World of professional athletes needs a community to thrive. How to achieve that with a social network when professional athletes don't have time for that? Less on-screen, online time, less anxiety through the smaller amount of posts updates.

Power of Programming

This was a very inspirational presentation given by Jakub, though I had a feeling I have had already seen it, indeed. How to help as a programmer? Effective Altruism. Efficient use of resources isn't volunteering (or giving money to the charity), but developing - that's what we can do best and affect hundreds, thousands or even more people. Research and software bought with public money (via taxes) should be public. If you want to help, but don't know where to start, look here for projects in Slovakia and Czechia.

The right stuff - orchestrating experiments at scale

What the developer understands is what will the product become. Please, don't give them Excel sheets filled with meaningless tasks. People responsible for delivering the product should be part of decision making before the kick-off.

Constant Curiosity: How Brands Earn Trust By Asking Firecracker Questions

It was more a TED-like talk. Jon's performance was a bit too much for me after the two long days. Still, I applaud him for that, also for that he was able to amend his presentation with many photos, notes and hints from previous talks or even from the afterparty (lots of beer). Ask provocative and original questions, play with them and surprise with the results. Bring emotions to the process.

A small note on taking notes

Personally, I've tried many different ways of taking them, currently settled with Google Keep on my phone. I somehow like how easy is to swipe with a finger on the keyboard displayed on the screen and get results I expect thanks to the good recognition and prediction algorithms. Still, I'm curious what others tend to use. So I was looking around from time-to-time to see what other attendees do in a hope I can learn something from them.

Mostly nothing, just listening, ... or coding (Why the heck anyone codes while attending a conference? Especially, when having an opportunity to choose from several presentations at the same time. It's just hidden from me). Those who did take notes used various software: Google Docs, Microsoft Word or OneNote, Notes for Mac or Evernote. Those from the offline world used pens and notepads and one of them stood out with the more creative approach:

https://twitter.com/rmnvsl/status/1043489704883236867

Just amazing!

Overall view

What I really liked is that all things started as scheduled. No wasted time. This is probably common on such big events, but it happens here and there and I can get really furious when persons in charge don't value the time of those who are responsible and can set their watch. Thankfully, this was not a thing at WebExpo.

One thing took my interest - live, place-oriented, notifications. It's called Nearby (for Android) and it allows to receive or even exchange data between devices regardless of the network connection. In this case, I received information about an ongoing talk and also other news from the event, like one ensuring attendees a key-speaker is on his way to the venue.

This is so great, I'd like to tinker with this technology myself.

Overall, it was a great experience!

A path to my first speaking experience

roman@romanvesely.com (Roman Veselý) — Sun, 12 Aug 2018 00:00:00 GMT

In 2016 I attended PHPLive conference, first bigger tech conference in my field at that time (as far as I know). A couple of months ago I got an opportunity to flip the sides to stand on the stage as a speaker. This is my little confession of what did it look like.

At the end of January, I was contacted by Janka from Shopsys company, the conference organizer, that they are looking for new faces. My email was shared by Tomas who is a known speaker not only at this event and who I was in a touch for quite a time.

"To become a speaker?" I thought to myself. You know, many developers daydream about sharing knowledge this way at least from time to time and I'm not an exception. But when the opportunity is real you start to think about the pros and cons of your choice, let it be acceptance of the offer or its rejection. And the rejection was something I was heavily thinking about, because, "Who am I to be there, whom others should be listening to?", right? Moreover, as the name of the event suggests, PHP is the main topic, but I'd been working with React on the frontend side for more time than it's healthy to be able to prepare a presentation at a level I'd be happy with.

After some hesitation, I made the first step, step outside of the well-known comfort zone, and accepted the offer. Next step was to find a topic. It turned out I had something to start with. I got some inspiration from my (short) notes on meeting habits - company and team culture is part of my favorite subjects - and came with the working title How to make a work-life better, so nothing connected with PHP nor technical in any other way. And to my surprise, it was gladly received.

Phew, that was easy! Yeah, but the harder part to come. I had just around three weeks to prepare myself for my first performance in front of hundreds of people.

Side note: PHPLive is specific in a way that it is held in two cities for two days. In Ostrava, Czech Republic, first day and in Zilina, Slovak Republic, the day after.

Preparation

How to make a work-life better? I knew meetings is only one thing among many others I wanted to talk about. To be more happy at a job you have to be satisfied with your results. Good meeting habits may be helpful on your way of delivering the outcomes you seek for, but they are only one piece of the puzzle. To do a work that brings satisfying results you need some knowledge, enough of uninterrupted free time, the more the better. And of course, we all do need to take a rest. One cannot work from dawn to sunset every day on and on.

I'd divide the process of the talk preparation into three stages:

gathering knowledge about the topic
organizing content into the presentation
training the talk

Though, I didn't jump to the next stage when I'd thought I'm done with the previous one, clearly, because I'd never known that. The process looked more like a triquetra and I never felt as satisfied.

Knowledge gathering

I started to collect material from books I had read to that time and was so glad I had not been afraid to use the marker and to bend page corners to label interesting ideas for later use. Books are precious to me but they are still just a source of knowledge, just a tool, like a saw for a carpenter. One shouldn't hesitate to work with them that way like they were some historical relics (only if they really aren't, of course).

I also picked and reread several tweets and blog posts from others in the field. Added my own thoughts (not even mentioning photos) and in the end, my notes bloated up to nearly 10 pages.

Creating prestentation

At the school, we were learned how to create a presentation. Anyone who had slides without the page numbers was given black points. Nevertheless, I didn't add any numbers now. Not because I like the simple design and much of free space (which I do), nor because I'm a rebel (probably not, or?), but because it was clear enough for every event visitor that any talk will have up to 25 minutes. I just wanted them to focus on more important stuff (erm, me!).

I had done one more thing before I opened Google Slides. I needed to give those notes correct structure so I created a mind map:

The map served me well in forming the slides as well as for a "final notes" for what I was actually going to say on d-day. Each slide couldn't be simpler with either a short title, a photo or a graph.

Training

I bet many of you know TED, either the main conference or many individual derivates called TEDx. Most of the talks there have several things in common with one specialty - which is that no one reads from the slides (and those are also uncommon), but rather has the whole talk memorized. I think this gives more energy and tempo to the presentation. I came around a perfect article on Doing a TED Talk written by Tim Urban from my favorite waitbutwhy.com. I'm going to borrow one of the perfect diagrams he makes to illustrate his posts, the one about public speaking methods:

Funny thing is that all three items in the key are bad. They can just be bad or very bad. It seems like public speaking is a very stressful thing to do. I decided to go with the second method (talk through the set of structure), inclining more to the right side, which means I prepared some key sentences and, let's say, jokes, sort of... I had also read a book called Talk like TED and had watched several TED talks and commencement speeches. Not all of them were strictly connected with how to give a talk but really were inspirational in one way or another. Here are some I really enjoyed:

I made several training rounds of my talk home alone. After every round, I did some changed in the slides, rearranged them, edited wording, removed one thing just to add another while tried to fit into aforementioned 25 minutes block for one talk. That prepared me to the next big step - first test in front of the people - my colleagues. They were so kind and agreed they would serve me as guinea pigs, what I'm very thankful for. I prepared a place, chairs, projector and when everyone was ready to listen, started my talk. And it was horrible. Literally.

It turned out everything I did up to that miserable test talk still wasn't enough. I realized I need to give a talk to become somehow ready. Not just play solo and speak silently to no one. Actually giving a talk is the only way one can train speed, play with tempo, figure out where the pauses are appropriate and act upon what the audience do while talk is being given. Yeah, I ended that misery after 45 minutes covered in sweat. No need to note I still wasn't done with all I wanted to say - the end was in the last third of the presentation.

Nevertheless, I persisted and processed all the comments my calm friendly colleagues gave me, discarded a good third of the content and did next round of the solo testing, now with accurate volume and gestures and finally felt ready.

Going live

I was sitting in the back, watching Tomas Pilar giving his talk on Doctrine and thinking about how different our talks are. His strongly technical one with lots of code examples will nicely contradict with mine, without any mention of the code itself.

I also really appreciated I was the next speaker following him.

...

"Oh my, many people are here, aren't they?"

"Don't they have better things to do on today's Tuesday?"

"..."

"What the hell is going on with my vision?"

"OK enough, I need some water. Where is the ..."

"Thanks, Tomas! Next talk is about habits at work, please welcome Roman!"

"Oh, fuck ..."

Looking back (Questions & Answers)

Was it all that bad?

Not at all! It was a great experience and I met some interesting people. I also learned many new things while taking notes for my presentation.

What is your advice to not-speaker-yet people?

First of all - find an audience open to listening to your talk and train beforehand. Bear in mind you'll probably have a mike in one hand so great gesticulation will mostly not be possible (especially with slide remote controller in the other hand) - this is something I really didn't think about. Watch your time - at home, I set the timer to be increasing from 00:00, but at the conference, it was counting down from 25:00. That confused me to the point from which I was not able to pay attention to the remaining time anymore.

What have you discarded from the presentation?

There is a lot I had to remove. I wanted to add more or less from the following sources (the whole list is a bit longer, though):

The Most Free Company - on team working habits
Horizontal History - regarding knowledge sharing
Important Life Questions (in Slovak) - when work is not everything
I wanted to talk more on puzzle solving at work

Do you have nostalgic feelings for Flash?

Well, I do! The experiences with Flash led me into the web development. I created a small example of what wasn't possible without Flash (source), rounded corners took my attention when I saw them on the web for the first time. I just didn't use it at the conference in the end.

Can we watch your talk?

Of course, you can! Roman Veselý – Jak si zpříjemnit pracovní život - hopefully, you understand Slovak. Let me know what you think.

Ways To Make Work Life Better

roman@romanvesely.com (Roman Veselý) — Tue, 27 Feb 2018 00:00:00 GMT

At PHPlive conference I tried to show how one can make life in an office or outside of it more enjoyable. I shared my own experiences gathered during work in a corporate and within a distributed team.

Presentation slides. Read also about a path to my first speaking experience.

Heslá a ich ochrana v prepojenom svete

roman@romanvesely.com (Roman Veselý) — Sat, 20 Jan 2018 00:00:00 GMT

What are the current recommendations on how to handle passwords securely from the user perspective? Presentation is in Slovak language.

Presentation slides.

A place to meet Statie

roman@romanvesely.com (Roman Veselý) — Mon, 08 Jan 2018 00:00:00 GMT

I'm happy to announce that Statie, a newcomer to the field of static site generators written in PHP, received a place where it could promote itself better. It's own website. Though a really simple one; but it's healthy to start with small things, they say.

Notice: Statie was deprecated. This blog is now built with Gatsby.

My own blog is being built with Statie. But why did I choose something with almost no history and with just a few users, when plenty of other possibilities are out there?

A bit of story

Well, if you come from Slovakia or Czechia you probably know Nette framework and its awesome Latte templating engine. If you haven't heard about it before I recommend you to take a break and give it a shot to make yourself familiar. It may be useful in the future.

To continue, I consider Latte the most elegant among others and that's the reason I chose Statie. Yep, it's that straightforward. Really, just look at it.

I wanted to spread the word and add a mention to the catalog of static generators when I realized there is no homepage. By the way, it just blew my mind to see how many of the generators are in there only waiting to be used. Maybe another day...

A bit of stack

The website runs on Statie, obviously. I just took markdown documentation files, written by the creator Tomas, which were lying on GitHub, covered them with a handful of templates, threw some configuration and voilà.

I thought I could play a bit and use some things I haven't had a pleasure to try on other projects. Many articles about new (okay, let's say different) CSS principles called utility-first wander around the internet. Especially one by Adam Wathan, a really thorough one, convinced me to try such a technique. Why not use the framework he created straight ahead? It was easy and resulting styles.css is so lean I want to applaud (not sure whether me or him).

Even though Statie's learning material isn't very verbose (yet!) a feature one would certainly expect from a documentation site is the possibility to search. I knew I want to use Algolia, widely used in the open-source scene. The setup was a piece of cake and it's working like a charm. Apropos, definitely try their browser plugin adding new functionality to the GitHub search; have could I live without that.

What's left? Source code lives on GitHub, it is built with Travis and hosted on GitHub Pages, while SSL certificate comes from Cloudflare.

A bit of end

And that's it. I hope the site will grow together with Statie and that some of you will pitch in as well.

Do you use Statie? Contribute now and add your site to the list of projects!

Statie Site

roman@romanvesely.com (Roman Veselý) — Tue, 02 Jan 2018 00:00:00 GMT

Documentation site for Statie, simple PHP static site generator.

In late 2017 I found an Adam Wathan's article on CSS utility classes. I had only heard about tachyons until that time and didn't like the concept very much. But I dived in and changed my mind. I wanted to use his Tailwind CSS framework, but I was not working on anything suitable for it to try. Shortly I came with an idea for a new site for Statie, simple PHP static site generator, which I had been already using for my own site. It lacked its home, so I acquainted with the new CSS methodology while making one for it!

Read more about the develelopment process.

url: https://www.statie.org
repository: https://github.com/crazko/statie-web

Simple Timer

roman@romanvesely.com (Roman Veselý) — Mon, 11 Dec 2017 00:00:00 GMT

Yet another timer written in React.

I was desperately looking for some timer that'd be working from a computer as well as from a cell phone. My hunt for the one meeting my requirements wasn't successful, so I had to create something myself.

url: https://crazko.github.io/timer/
repository: https://github.com/crazko/timer

Strange codes, multiple identities and team habits

roman@romanvesely.com (Roman Veselý) — Mon, 16 Oct 2017 00:00:00 GMT

Just what I had in my mind or have tackled with in the recent past underlayed with the knowledge of the others.

`T_PAAMAYIM_NEKUDOTAYIM`

Even though the PHP language is improving and the next version is around a corner, there are some parts it carries from dark ages to the present and will most likely even beyond. Strange things you do not expect to see. Surely, one of them is following message:

...unexpected T_PAAMAYIM_NEKUDOTAYIM

"What?" a junior programmer might ask. But it happens that also advanced techies could be left speechless. Well, probably you can just check StackOverflow. Or, of course, could start learning Hebrew to know what's going on.

Thankfully, there is Urban Dictionary for all other unknown acronyms and phrases.

Git over schizophrenia

You know you shouldn't use your company's computer to work on your personal projects, do you? For those who don't consider it's a bad idea, aren't aware of possible consequences or those who just work on multiple projects and need to commit under different identities git introduced a new feature allowing conditional includes.

Now you can set different configuration for any project directory. This way you can maintain several identities without pain and fear of being caught at pushing badly signed commits.

Meeting habits

I hate to attend most of the team meetings since my first fulltime job (current one is the second, but nevertheless). The roots of my aversion probably started sooner, but, clearly, once in a room full of people when even air condition can help no more and you are forced to open all doors to get a sip of fresh air it starts to be clear this isn't the best way to share information.

Calculations of wasted time and money during standup meetings only underline my feelings so I quickly became a fan of various ways of asynchronous communication and started to advocate its benefits. On one hand, I was (jokingly) labeled as a non-team player because of my beliefs, while, on the other hand, an idea of not having any meeting during Fridays was accepted instantly. Who knows why?

I will conclude with this perfect tweet I found (of course, not during any important meeting!):

Anyone who ever schedules meetings with developers, please burn this image into your brain, thanks pic.twitter.com/IEoy10cgxW
— Hatbox Phil 🍕 (@phil_wade) August 11, 2017

Connect Bitbucket Cloud commit messages with different issue tracker

roman@romanvesely.com (Roman Veselý) — Sun, 16 Jul 2017 00:00:00 GMT

Bitbucket Cloud can link issues and commit messages not only in itself alone but also with outside world. Let's have a look how to create connections with a different tool for issue tracking.

Oftentimes I like to wander around a program's or an app's settings and try every possible feature to see what can be adjusted. In the company I work for, we use Bitbucket intensively for projects developed for non-profit organizations in our region as well as a place we store our own company-life-supporting applications.

Given that, Bitbucket Cloud was not an exception in my seeking for enhancements. After a while, I came around Link setting and started digging deeper to see how can it be leveraged in our development process.

An issue tracker

First I need to say - we do not use Bitbucket Cloud to track issues. Developers frequently need to talk about new features or enhancements with our non-technical colleagues from PR or HR section for whom such a tool could be quite too much.

Because of that, we settled with Trello, which is more user-friendly to keep the discussion about all projects' topics among all involved participants. Simply, a card represents an issue for us - the developers.

Custom links

Bitbucket Cloud can link a commit message with an issue in the way a Github can do:

That's great, however not usable in our workflow with Trello. Though, we can use Link to a web service setting, probably not so widely known feature of Bitbucket Cloud, and get following results that point directly to Trello's card:

Nice, how to achieve it?

You need to go to the repository Settings and find Links under Workflow section. You can see that there is already one present - Bitbucket Cloud issue tracker - which is exactly what it says it is.

To add a new one just click on the Add new link in the upper right corner and fill the dialog with the following:

Link type: Custom
Link url: https://trello.com/c/\1
Link key: ^(\w+)

The link key is a regex rule which selects the first word of a message and makes a group of it. Then it is exchanged with the \1 placeholder in the link url which will make a correct link in a message.

Learn more about regex and how to use parentheses for grouping. You can also try your regex rules online.

If you want to have card ID somewhere in the message body, you can change Link key to #(\w+). Now every word prefixed with # symbol will contain a link.

Of course, you can use a different symbol. Just be sure you have one, so the ID could be recognizable amongst the other regular words in a message.

You are also allowed to add more concurrent rules.

In conclusion

Everything's good but it's not elegant enough. I'm a bit disappointed that Trello deprecated option that allowed mentioning (thus linking) cards by their number, which would be surely easier to remember and to write into commit message than to copy-paste entire UUID of a card.

Eventually, we opted for another solution. Every pull request carries whole card's URL in the description, which makes it easy for us to get information about an issue, though, just not in every commit.

Are you in a similar situation? Do you use a different approach? If so, I'd like to hear what's your solution or how do you utilize the custom link option.

Update 2017-08-23

Recently I noticed interesting addon inside Bitbucket Cloud integrations - a power up for Trello that allows you join repositories to boards.

Once you add one (or more) repo, you are able to create links from Trello's cards to commits, branches or pull requests. Even status of PR is visible; you can see directly who gave an approval, for example. We have adopted this feature very quickly. Read more about new possibilities in their blog.

Null Object design pattern

roman@romanvesely.com (Roman Veselý) — Sun, 04 Jun 2017 00:00:00 GMT

An object with no value or defined behavior can be helpful when no other "real" object is present so it can mimic its usage. It may help you to avoid unnecessary conditionals and make your code more readable.

Recently I saw a presentation called Chasing "Perfect" given by Adam Wathan at Laracon EU in 2015. In case you don't know him I strongly recommend you to follow him on Twitter, at least. I definitely did so.

Consider this article as my notes or thoughts on presented topic so I won't forget this whole thing in the future.

The idea

In the presentation, Adam illustrated how to structure application code when new requirements keep come around. In his example, a book ordering system can use coupons to give a discount for a customer.

I will use exact same code to present the initial conditions (quite simplified, of course):

class Order
{
    private $books;

    private $coupon;

    public __construct($books)
    {
        $this->books = $books;
    }

    public function applyCoupon($coupon)
    {
        $this->coupon = $coupon;
    }

    public function total()
    {
        $discount = 0;

        if (isset($this->coupon)) {
            $discount = $this->coupon->value;
        }

        return $this->books->sum('price') - $discount;
    }
}

So the Order::total() method calculates the total value of ordered books and in a case a coupon is applied, it subtracts total by the value of a coupon. Pretty straightforward.

Now, let's imagine a new requirement from your boss: "we need to implement a new coupon that is percentage based". You say "no problem" and enhance the code in total() method (or maybe not, but it might be tempting to make such an easy change):

public function total()
{
    $discount = 0;

    if (isset($this->coupon)) {
        if ($this->coupon->isPercentage()) {
            $discount = $this->books->sum('price') * ($this->coupon->value / 100);
        } else {
            $discount = $this->coupon->value;
        }
    }

    return $this->books->sum('price') - $discount;
}

There is no null object yet, but we are getting to the point. We can see a lot of conditions which are not very popular (yes, because nested conditions are ugly). The problem in this example can only grow when new requirements come, not even switch statement can help us solve this problem nicely.

The best we can do is to extract discount logic somewhere else and in that way introduce Coupon classes - one class for every type of a coupon. And after several rounds of refactoring here is the result:

class ValueCoupon
{
    public function discount($order)
    {
        return $this->value;
    }
}

class PercentageCoupon
{
    public function discount($order)
    {
        return $order->grossTotal() * ($this->value / 100);
    }
}

Order::class has also changed a bit:

class Order
{
    // ...

    public function grossTotal($order)
    {
        return $this->books->sum('price');
    }

    public function total()
    {
        return $this->grossTotal() - $this->discount();
    }

    private function discount()
    {
        if (isset($this->coupon)) {
            return $this->coupon->discount($this);
        }

        return 0;
    }
}

So, what has changed exactly?

new Coupon classes have only one discount() method that consists of only one line of code
added Order::grossTotal() to get value of the books
almost all methods in Order::class are really simple, except Order::discount()

Maybe it would be better to implement also an interface ICoupon, but this is another story.

The solution

I would be personally quite happy with this code and leave it as it is. But here comes the whole point - we can get rid of that one additional condition with the usage of the Null Object pattern.

class NullCoupon
{
    public function discount($order)
    {
        return 0;
    }
}

class Order
{
    public function __construct()
    {
        $this->books = $books;
        $this->coupon = new NullCoupon();
    }

    // ...

    private function discount()
    {
        return $this->coupon->discount($this);
    }
}

Instead of always checking if something is null or not present and react differently in such a situation you can deliberately implement a behavior that represents, well, nothing. And the Null Object exists to solve such specific situations. When Order::applyCoupon() is used, it rewrites NullCoupon with a new one and the usage remains same.

Another useful application of a Null Object could be to create it as a stub in your tests.

It does not end here

Below the video, one of the commenters pointed out a question: "How can we instantiate a coupon based on the user input with the same approach?"

Adam responded with another screencast and came with Database Polymorphism implemented with Laravel Eloquent. A remarkably elegant solution, I would say. For those of you, who work with Laravel, it might be truly educational.

Implement a CSS preprocessor into Statie project

roman@romanvesely.com (Roman Veselý) — Fri, 07 Apr 2017 00:00:00 GMT

The most important part of a web page is its content. And I think that every web page content deserves to have some look. Take a look at how to implement Less preprocessor into Statie project built with gulp-based workflow.

Notice: Statie was deprecated.

In the previous post I showed a convenient way of browser live reloading at every change made in source files of Statie project. To make it even better we can add a gulp task for processing the CSS, so every change made in the styles will be immediately presented in the browser.

I often use a preprocessor to not get a headache with working with CSS. There are several popular tools ready for use: Sass, Less and Stylus.

My chosen one is Less, but you can use whatever one is suitable for you. The process of addition would be the same.

Now, let's add it to our project and integrate it into the generating workflow.

Preparation

Add a package that can work with Less:

$ npm install --save-dev gulp-less

Prepare a function which will be used later in the default gulp task. Do not forget to require the package in the head of your gulpfile.js.

var less = require('gulp-less');

function styles() {
  return gulp.src('source/less/styles.less').pipe(less()).pipe(gulp.dest('output/css/')).pipe(browserSync.stream());
}

Do you see that browserSync.stream() in the last pipe? [It tells Browsersync][3] to reload at the time when compiling is finished.

Put pieces together

Now we need to add this function to the default gulp task, and also edit the watch() function - we don't want to generate new content when *.less files were changed, but instead create new styles.

Here is the final version of gulpfile.js - original code from the previous post with new changes. You can check what is new or updated:

var gulp = require('gulp');
var run = require('gulp-run');
var less = require('gulp-less'); // added
var browserSync = require('browser-sync').create();

gulp.task('default', gulp.parallel(styles, generate, watch)); // updated

// added
function styles() {
  return gulp.src('source/less/styles.less').pipe(less()).pipe(gulp.dest('output/css/')).pipe(browserSync.stream());
}

function generate() {
  return run('vendor/bin/statie generate').exec();
}

function reload(done) {
  browserSync.reload();
  done();
}

function watch() {
  browserSync.init({
    server: 'output',
  });

  gulp.watch('source/**/*.less', styles); // added
  gulp.watch(['source/**/*', '!source/less/**/*'], gulp.series(generate, reload)); // updated
}

Check the example project that uses Statie and gulp-driven workflow.

Conclusion

Automation rules the development, right? Statie, gulp and Less, what a pleasure to create something great.

Some additional thoughts on improvement:

You can deal with javascript in the same way as with Less styles, just create a new function for that and edit the watch function and gulp task.
You can also add a different task to build production-ready code (minification, media queries grouping, etc.) - as I did. Have a look at the gulpfile.js of this site.

How to re-generate and refresh static website in Statie?

roman@romanvesely.com (Roman Veselý) — Sat, 01 Apr 2017 00:00:00 GMT

Make development with Statie a bit more convenient with a little use of gulp and Browsersync.

Notice: Statie was deprecated.

With a rising popularity of static site generators, we can find that there are many of them already in use. This blog runs on Statie, another such a tool written by Tomas Votruba, which differs from the others with Nette and its templating engine Latte used in the background.

If you are not aware what is this tool all about let's take a look at a post series about it on Tomas' blog firstly. It will lead you from the very beginning on how to run your own site upon Statie, so I won't deal with this here.

In the end of the mentioned blog post, we can find a simple gulp task that runs generate command on every change in the source files. This is surely handy, but you still need to refresh your browser to be able to see your changes. With Browsersync we can make this step unnecessary.

Running an executable command

With vendor/bin/statie generate command we can generate our site content. In gulpfile.js we may have something like this:

var gulp = require('gulp');
var exec = require('child_process').exec;

gulp.task('default', function () {
  exec('vendor/bin/statie generate');
});

The problem is it doesn't give you a message when the job is done, so you cannot tell when to refresh a browser to see new content. To get over this problem gulp-run package may be used.

Also, I recently found there is a new version of gulp coming with some handy features, namely: gulp.series and gulp.parallel which combine multiple functions together so tasks don't have to have dependencies anymore. And we can use those features now!

Please, read a guide how to set up gulp 4 before you proceed.

Watching over changes

Get everything needed to start:

$ npm install --save-dev gulpjs/gulp.git#4.0 gulp-watch gulp-run browser-sync

Add some foundation to the gulpfile.js:

var gulp = require('gulp');
var run = require('gulp-run');
var browserSync = require('browser-sync').create();

function generate() {
  return run('vendor/bin/statie generate').exec();
}

function reload(done) {
  browserSync.reload();
  done();
}

Such simple functions, aren't they? Simple, yet they do everything we need to have to set up a watcher function. Short notes on above code:

in generate() function return has to be used in order to use it in a gulp.series() properly
same applies for done() function used in reload() - repeated reloading would be not possible without it

Here comes the watcher function:

function watch() {
  browserSync.init({
    server: 'output',
  });

  gulp.watch('source/**/*', gulp.series(generate, reload));
}

With a use of gulp.series(generate, reload) we define that we want to reload the browser when new content generation finished, not before. The last step is to create a gulp task that will use previously defined functions:

gulp.task('default', gulp.parallel(generate, watch));

Now, when you run gulp, new content is generated by Statie along with local server running on localhost:3000 (default settings). Try to edit source files and save them. Browsersync should spot the changes that were generated into output folder and instantly refresh the browser.

We have just removed one step in our development process. Content edition is no pain anymore!

Here is the complete gulpfile.js.

var gulp = require('gulp');
var run = require('gulp-run');
var browserSync = require('browser-sync').create();

gulp.task('default', gulp.parallel(generate, watch));

function generate() {
  return run('vendor/bin/statie generate').exec();
}

function reload(done) {
  browserSync.reload();
  done();
}

function watch() {
  browserSync.init({
    server: 'output',
  });

  gulp.watch('source/**/*', gulp.series(generate, reload));
}

If you are interested also in the frontend development, take a look at how to implement a CSS preprocessor into this workflow.

Conclusion

With gulp 4 new features gulp.series and gulp.parallel is really easy to create a building workflow when one function depends on another.

Do you know about anything that can improve my approach or do you use something completely different? Let me know.

Kalendario

roman@romanvesely.com (Roman Veselý) — Tue, 14 Feb 2017 00:00:00 GMT

Browser extension that shows event descriptions in Google Calendar.

I like to take notes and keep a daily journal so I have tried many apps for that purpose, but none of them fulfilled my expectations. Since I use Google Calendar quite a lot and in many different aspects of my life, I decided to keep notes inside, in the descriptions of the events. This browser extension makes it easier to read them. Give it a try.

Fomin

roman@romanvesely.com (Roman Veselý) — Mon, 13 Feb 2017 00:00:00 GMT

Powerlifting routine weight calculator.

url: https://crazko.github.io/fomin/
repository: https://github.com/crazko/fomin

WordPress Modern Development

roman@romanvesely.com (Roman Veselý) — Fri, 11 Nov 2016 00:00:00 GMT

As a part of Geeky Friday sessions I showed how to leverage tools like git and composer to develop more maintainable WordPress applications.

Presentation slides.