DEV Community: Roman Veselý

Knowledge Sharing

Roman Veselý — Tue, 12 Nov 2019 20:36:18 +0000

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.

Why so serious? Collection of remarkable tweets #4

Roman Veselý — Fri, 09 Aug 2019 08:28:12 +0000

Take a pause. Put work aside for a minute and look how much fun is on Twitter. Many knowledgable people share tons of great tips there. But today, I gathered tweets containing entertaining and sometimes even very realistic content.

They come from different areas: #development, #design, #UI/#UX, #philosophy, office and ordinary #life. Sorted in random order without any preference and split across four posts.

I hope my selection will make your Friday even more joyful!

// Detect dark theme var iframe = document.getElementById('tweet-1138237351078105088-96'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1138237351078105088&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1109384554962259970-30'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1109384554962259970&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1053006038478331908-890'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1053006038478331908&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1002938327945932805-24'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1002938327945932805&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1110985650193477632-285'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1110985650193477632&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1152027018982068226-654'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1152027018982068226&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1154169387470823425-924'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1154169387470823425&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1050768979201945601-346'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1050768979201945601&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1155289146505793536-539'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1155289146505793536&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1155293759929835520-123'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1155293759929835520&theme=dark" }

This is the last post of the "not so serious" series:

Why so serious? #1
Why so serious? Collection of remarkable tweets #2
Why so serious? Collection of remarkable tweets #3
Why so serious? Collection of remarkable tweets #4 👈

That's all folks! I'd love to see your favorite tweets, so please, put some of them in the comments section. 🎉

Why so serious? Collection of remarkable tweets #3

Roman Veselý — Fri, 02 Aug 2019 10:41:50 +0000

They come from different areas: #development, #design, #UI/#UX, #philosophy, office and ordinary #life. Sorted in random order without any preference and split across four posts.

I hope my selection will make your Friday even more joyful!

Mark Dalgleish

@markdalgleish

👨‍🎨 I've made a responsive design, of a car that turns into a plane.

👩‍💻 Neat—how does it work?

👨‍🎨 *Draws car*

👩‍💻 Yeah, but how does it turn into a plane?

👨‍🎨 *Draws plane*

02:21 AM - 02 Oct 2018

127 535

your httpster friend

@dcousineau

Friend: Do dates make you nervous?
Me: omg yes especially when doing math across timezone boundaries

14:42 PM - 03 Aug 2016

3601 5359

Tommi Forsström

@forssto

Found this from the depths of my hard drive. Oh dear.

17:19 PM - 19 Jan 2019

363 908

A Small Fiction

@asmallfiction

"I keep hearing about Occam's razor. Do you know what it is?"

"Probably a razor owned by someone named Occam."

"Oh. Yeah, simple enough."

03:44 AM - 06 Nov 2016

3179 5131

Jedd Ahyoung

@jedd_ahyoung

"What is technical debt?" Technical debt is hard to explain, but a picture is worth a thousand words. #programming #softwaredevelopment

22:05 PM - 31 Jan 2017

3044 2992

Nick Takayama

@ntakayama

2yrs experience: “This button has 1pt too much padding on the right”
6 yrs experience: “Why are we doing this button anyway?”

16:41 PM - 03 May 2019

14 74

Mark Dalgleish

@markdalgleish

Me: "I'm really looking forward to the conference."

Me at the conference:

10:38 AM - 07 Jul 2019

1531 10253

Gleb Smirnov

@gvsmirnov

Here is a blank line:

You can use it in your code to make it much more readable. Look:

08:22 AM - 26 Oct 2018

46 120

👆 (click the tweet to see all images) 👆

Tom Bellino

@tombellino

My coworkers in an open-concept office every four minutes

16:24 PM - 14 Jun 2019

14669 56950

Bruce Lawson

@brucel

@slicknet 1964, My grandad (a coalminer): So, you wear a shirt & tie to work, sit at a desk moving paper around, & at 21 you're paid more than I am now?
My Dad: Yes.

2010, Dad: So, your company makes a free product, competing with other free products, & you make more than I did?
Me: Yes.

09:52 AM - 18 Jan 2019

47 374

This is the third post of the "not so serious" series:

Why so serious? #1
Why so serious? Collection of remarkable tweets #2
Why so serious? Collection of remarkable tweets #3 👈
Why so serious? Collection of remarkable tweets #4

See you next Friday. If you want, put your favorite tweets in the comments section. 🎉

Why so serious? Collection of remarkable tweets #2

Roman Veselý — Fri, 26 Jul 2019 11:27:16 +0000

They come from different areas: #development, #design, #UI/#UX, #philosophy, office and ordinary #life. Sorted in random order without any preference and split across four posts.

I hope my selection will make your Friday even more joyful!

// Detect dark theme var iframe = document.getElementById('tweet-1130048469853528064-366'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1130048469853528064&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-986576233579384833-119'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=986576233579384833&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1120543926065205248-336'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1120543926065205248&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1015169178066661376-590'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1015169178066661376&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1072554718499663872-644'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1072554718499663872&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1085906454232657922-711'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1085906454232657922&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-958304675345960960-969'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=958304675345960960&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1148421102009344000-541'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1148421102009344000&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-917371193786884096-155'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=917371193786884096&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1086237923652046849-958'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1086237923652046849&theme=dark" }

This is the second post of the "not so serious" series:

Why so serious? #1
Why so serious? Collection of remarkable tweets #2 👈
Why so serious? Collection of remarkable tweets #3
Why so serious? Collection of remarkable tweets #4

See you next Friday. If you want, put your favorite tweets in the comments section. 🎉

Why so serious? #1

Roman Veselý — Fri, 19 Jul 2019 13:05:16 +0000

They come from different areas: #development, #design, #UI/#UX, #philosophy, office and ordinary #life. Sorted in random order without any preference and split across four posts.

I hope my selection will make your Friday even more joyful!

// Detect dark theme var iframe = document.getElementById('tweet-1053163060871884801-200'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1053163060871884801&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-788288674228305921-220'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=788288674228305921&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-787969734918668289-500'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=787969734918668289&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1146488996052099072-711'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1146488996052099072&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1120126789316009985-330'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1120126789316009985&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1145216305240387584-477'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1145216305240387584&theme=dark" }

👆 _(click the tweet to see all images)_ 👆

// Detect dark theme var iframe = document.getElementById('tweet-896010517617180672-140'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=896010517617180672&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1113831379152908288-354'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1113831379152908288&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-904697259345969152-112'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=904697259345969152&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1093035828538818560-821'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1093035828538818560&theme=dark" }

👆 _(click the tweet to see the original post)_ 👆

This is the first post of the "not so serious" series:

Why so serious? #1 👈
Why so serious? Collection of remarkable tweets #2
Why so serious? Collection of remarkable tweets #3
Why so serious? Collection of remarkable tweets #4

See you next Friday. If you want, put your favorite tweets in the comments section. 🎉

Useful search engine shortcuts for browsers

Roman Veselý — Mon, 06 May 2019 05:27:01 +0000

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?

Easy frontend development

Roman Veselý — Thu, 03 Jan 2019 12:24:56 +0000

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/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 (Don't Repeat Yourself) 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?

Connect Bitbucket commit messages with different issue tracker

Roman Veselý — Sun, 16 Jul 2017 00:00:00 +0000

Bitbucket 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 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 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 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, 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 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

Recently I noticed interesting addon inside Bitbucket 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.

_originally published at [romanvesely.com](https://romanvesely.com)_

Hi, I'm Roman Vesely

Roman Veselý — Sun, 02 Jul 2017 18:49:58 +0000

I have been coding for 10+ years.

You can find me on Twitter as @rmnvsl

I live in Kosice.

I mostly program in these languages: php.

I am currently learning more about react.

Nice to meet you.