DEV Community: Dominik Ilnicki

I worked 3 weeks on trains traveling around Europe - report

Dominik Ilnicki — Tue, 16 Aug 2022 20:27:00 +0000

Intro

Hey, I come to you with a report from working remotly from the three-week train-only euro-trip I took at the begining of July. Below you can find all LinkedIn posts I was writing during the trip. I decided to put all updates in a one place here. Maybe some of you find it interesting or even motivating. Enjoy!

1/7 (07/02/2022)

Today, I’m starting a three-week train-only euro-trip through Poland-Germany-Netherlands-Belgium-France-Italy while still working 20h/week at Dataedo.

I decided to document this journey and share the lights and shadows of working on a go. I’ve always wanted to do something like that and now I have a chance to try it out!

Is it all going to be easy and without issues like on digital nomads' Instagram posts? Probably not, but I believe it’s going to be a great time and valuable experience. Right now I’m heading to Berlin to stay there for a couple of hours and then move to Hamburg for 2 days.

2/7

So the week has started with some small defeats in terms of working from the road.

Every Monday we have a team meeting to summarize and plan our work. Today, even though I was willing to join I couldn’t make it. My train was supposed to depart 15min before a meeting. I thought I could set everything up and join from the train, but there was a 20min delay… So I was already late. Then I was in rush to set everything up just to find out that the Internet connection is too slow for a video call and what’s more the only place I can seat is in a quiet zone.

Going back to the Internet connection in Deutsche Bahn. It’s great for me to work - browse the Internet, and download small files, but most of the time not enough for a video call.

I also experienced some weird and even potentially catastrophic situations. My colleague sent me a file I downloaded while connected to the train's Wi-Fi. The downloading was completed successfully, but I found out not all content appears. The file had drastically different sizes with every download (?!). After a few tries, I used my hotspot, and the size was correct, and everything was there.

Today I came to Amsterdam from Hamburg and stay there for more 2 days.

Key takeaways:

Make sure I won’t be on a train during next Monday's meetings
Working from the DB is completely doable for me
Check if everything is fine with files I download via public Wi-Fi I guess 🤔

3/7

Quick update from the road.

I really feel like I’m getting used to it. I found out it’s really important to look for great places to work (cafes) ahead of time. Finding a good spot is harder than I thought, so it needs a bit of planning.

What makes a spot good for me to work?

Wi-Fi (most of places have it)
Good location (not too far from the central station)
Power sockets (of course)
Good overall vibe (not too loud, more cafe than bar or club)

Key takeaways:

Flexible working hours rules (thank you Dataedo ❤️)
Charge everything whenever it’s possible
Plan where and when to work ahead

Although so far it was awesome to see all the places and meet all the people, I need to admit I’m a bit of tired and my back hurts 😅

After Amsterdam I was in Haag for 3h then Breda 🇳🇱 and spent the night in Antwerp 🇧🇪. The next day I moved from Antwerp to Paris - it took 7h and 4 trains, but I did it 😄

PS
Our Airbnb host canceled the reservation in Brussels 3h before arrival. We needed to find a new stay ASAP. Didn’t find in Brussels, but did in Antwerp so we must have changed our plans. No regrets though 😃

4/7

Top unconventional workplace? For me working from the boat in La Rochelle 🇫🇷

There was a WI-FI and electricity so why not to put together couple lines of code 😄

5/7

It's been 11 days since I've been traveling through Europe while working remotely.

I've learned my lesson from the previous week and this Monday I was prepared to join our weekly meeting. I was in a hotel room with fast WI-FI so the video call went smoothly 🎉

Most of my stays I find on Airbnb. It has really neat filters you can use. For example, I always try to find a place with fast WI-FI and an available workspace. It can save me some mobile internet I have on a local SIM card and it's much more convenient to work at the desk.

Before I departed Dataedo provided me with a mobile router so I can work wherever I want to 🚀

In terms of the trip, I encountered some difficulties. We couldn't leave Toulouse because of the French rail strike. Our train was canceled and there was just one train from Toulouse to Marseille that day. We were waiting at a station for 3h and finally continued our journey.

From La Rochelle, I've moved to Bordeaux then Toulouse, Marseille, and now I'm heading to San Remo.

Below you can see a king-size desk in one of the Airbnbs I was and trip stats as well.

6/7

Next update from working remotely during a train-only euro-trip 🚊

Firstly, I wasn’t aware that Italy has some different power sockets and it may be a problem to charge my laptop there. I’m not an electricity expert and can’t tell you much more about it than the typical Italian power socket has 3 holes in one row and it isn’t compatible with my laptops charger 😕

Fortunately the guest house I was in had adapters, so It didn’t cause many troubles. Anyway, it’s something I should consider while planning to work in another country.

The next thing I want to share is that working from the southern countries is much harder for me. The temperature is very high so it’s difficult to take my thoughts and stay energetic and motivated.

In the beginning (Germany, north France) I was usually working during the first half of the day. I had to adapt and change my schedule a bit. In Italy or south France, it’s much better for me to work in the afternoon when the temperatures are the highest in a cafe or a hotel room. You can’t do much sightseeing anyway so it’s great to do some work at that time. Then around 8/9 pm go to eat dinner and see the city.

Key takeaways:

Do some research on power sockets in the country you go to
Have in mind you probably will have to adapt to the conditions of the country you travel to (climate, temperatures, habits)

From San Remo I moved to Pisa, then Roma and Naples. Now I’m heading to Florence.

In a photo, you can see an adapter to the Italian power socket I got

7/7 (07/22/2022)

It's been a couple of days since I completed my working-remotely journey. This post is my reflection on this whole trip.

Positives:

The main advantage is I could see all the beautiful places and cities while still working and having an income stream. This is the reason I decided to do that so I'm delighted It worked!
I'm up-to-date with all the current tasks and issues. I can't imagine going back to work after nearly a month off. That would be stressful.

Negatives:

Being in one place just for one night and moving to another is often too short, especially in big cities with many attractions and can produce some stress.
Uncertain Internet connection. You can try to prepare (mobile router, hotels with WI-FI), but it's not your home or office, there always may be some issues.
Lack of day plan = chaos = less effective work and lack of rest.

What would I change if I did it again:

Stay in one place for at least a couple of days.
Improve planning. When you plan to combine work and vacation being spontaneous is not gonna work.
If you move to a different climate (much hotter/colder, with different humidity, etc.) it'd be best to take one or two days off to get a bit used to that.

Thank you for following this series! I hope you found it at least a bit insightful 😃

In the photos below you can check out trip statistics.

First steps in R

Dominik Ilnicki — Tue, 10 Nov 2020 21:10:01 +0000

Intro

Recently I've enrolled in a university course "Mathematical modeling and Data analysis". In the future, I plan to combine my front end development skills with data science working on product analysis and business growth.

I started learning R lang 3 weeks ago at University and using DataCamp. In this article, I'll show you the basics I learned so far.

More about R

R is a free and open-source language. It's an awesome choice when it comes to data manipulation, mathematic, and statistic. It's used by many big players and equally with Python is a great weapon for every Data Scientist.

To write R code you can either download R studio or start with an online tool like repl.it

Basic calculations

Almost everything is as you may be expected. What's interesting is how we get a remainder (%%) and a result of division (%/%)


10 + 5 # 15
10 - 5 # 5
10 * 2 # 20
10/3 # 3.33333
5.5 %% 3 # 2.5
7 %/% 4 # 1

Variables

In R you can use variables like in every programming language but you don't assign values using =. The preferable way to do that is by using ->(rightward operator) or <-(leftward operator).

my_var <- 3 + 2
TRUE -> my_var_2

# my_var_2 TRUE
# my_var 5

Vectors

This was the fun part for me. Vectors are the simplest data type in R. It contains elements of the same type.

Declaration

x <- c(1,2,3,4) # [1] 1 2 3 4
y <- c("test","test2") # [1] "test" "test2"
z <- c(TRUE,2,"test") # [1] "TRUE" "2" "test"

Naming

To avoid confusion while using your data later on you can name data inside your vector.

x <- c(1.90,89,25)
names(x) <- c('Height [m]','Weight [kg]', 'Age')

# Height [m]  Weight [kg]  Age
#       1.90           89   25

Calculations

You don't need to use loops to make calculations on vectors in R it's a built-in behavior.

c(1,2,3) + c(4,5,6) # 5,7,9
c(1,2,3) - c(4,5,6) # -3,-3,-3
c(1,2,3) * c(4,5,6) # 4,10,18
c(1,2,3) / c(4,5,6) # 4,10,18
c(1,2,3) %% c(4,5,6) # 1,2,3
c(4,5,6) %/% c(1,2,3) # 4,2,2

Selecting elements

The way how we select elements is very similar to other languages, but R indexes elements from 1

x <- c(32,21,1,3)

x[1] # 32
x[3] # 1
x[2:3] # 21 1
x[-1] # 3

Selecting elements by comparison

Sometimes you want to get values from vector meeting specific criteria. In JavaScript, you would do this using .filter() but in R we can achieve this in a slightly different way.


x <- c(2,3,9,10,11)

x %% 2 == 0 # TRUE FALSE FALSE TRUE FALSE

As you can see we're trying to get all even numbers from the vector x.
But the expression above returns a vector with logical values representing a condition state for every element.

x <- c(2,3,9,10,11)

x[x %% 2 == 0] # 2 10

When we want to actually get those elements we need to put the condition inside the brackets.
As you can see it only select those elements where the condition value was TRUE.

Sum up

That's it for today. I hope I encouraged you to give R a try. If you know any good resources for learning R/Data Science/Data Analysis please let me know in the comments I'd love to find more resources for learning those.

🐦 Follow me on Twitter for a web dev & side projects content
👉 Check the SaaS I'm building right now EmbedTables - Beautifully embed Google Sheets or Airtable data into website in no time.

📰 My 3 recent posts:

JC v2 - find cool open-source projects & start contributing

Dominik Ilnicki — Tue, 29 Sep 2020 17:39:37 +0000

Intro

For the last few months, I've been building v2 of my side project called JustContribute. It's an app that allows you to find open, unassigned issues with newcomers welcoming labels like "good first issue" or "first timers only". You can search by programming language and popularity of the issue (number of interactions with an issue).

You can read more about tech stack and motivation in the first post.

I built side-project helps you find cool open source projects and join them

Dominik Ilnicki ・ Jun 7 ・ 1 min read

#showdev #webdev #react

What I've done

Tech

I rewrote the whole codebase. The v1 was made by me in 2 days because I was so excited about the idea, but it definitely has a reflection of the code quality. I stayed with React but I made my components much more clear, readable, and reusable. What's more, I used flow js for data types to make the code more maintainable and less buggy.

The whole backend concept was rewritten too. I no longer hit directly Github API in order to very stick limit rates. Instead of that, I made a cron function that runs every day, fetches all the issues, and stores them in Firestore. Thank's to that users communicate with my database instead of hitting GH API dozens of times every hour.

UI/UX

I redesigned UI using Figma. I feel like dark mode fits better to developers' habits and it looks pretty neat. I'm not a designer so I can't say a lot about designing process, because it wasn't very sophisticated. I sat down one weekend, made a design, and thought "Yeah, might be" and that's it. Hope you like it.

What's new

Better UX/UI with dark mode by default
Filter by issues' labels
Highlighted projects section with the ability to highlight your OSS project Highly encourage you to fill a simple form and highlight your thing. It's free and maybe drives some traffic to your OSS repo.
Side-projects feature landing page where u can sign up for a waiting list It's just a loose idea right now. I need feedback to see is it a point to work on that.

To sum up

I hope you like the changes and use JC to find and join cool open-source projects. Let me know in the comments or on Twitter @dominikilnicki what you guys think about the idea and the execution. Happy Hacktober fest!

🐦 Follow me on Twitter for a web dev & side projects content
👉 Check out JC if you want to get into open-source or highlight your project

📰 My 3 recent posts:

Semantic HTML by real-life example part 2

Dominik Ilnicki — Sat, 22 Aug 2020 20:03:37 +0000

Intro

Hey, it's the next part of my mini-series where you can find how popular websites deal with their HTML markup. If you haven't seen the recent post check it out!

Today we take a look at the Smashing Magazine homepage.

01

As you can see the h2 tag has a bigger font-size then h1. It's a very good example that the headers' hierarchy is about the text's importance, not a style property. Don't use h1 just to make text bigger, CSS can make that job.

What's interesting to me they don't use a section tag to wrap the latest articles and a heading.

They use the figure tag for author image but I'm not sure why they don't put the author's name inside figcaption. You can read more about figure here on MDN

02

The next chunk of articles is surrounded by the section tag and has multiple articles inside. We can see that they use the header inside the article. Remember header tag can be used for every header content on your website, not just for the main header on a top.

What's also interesting how they placed h4 heading. It's rotated and moved to the left. It looks awesome and at the same time is accessible for screen readers users.

I'm a little bit confused about why they used h1in the red div. As far as I know, there should be only one h1 heading for the site. If you have any ideas about is it wrong or right usage of h1 please let me know in the comments below.

Thank's to that site I discovered a small tag. You can read more about it here on MDN

03

Here I'm also a little bit confused about the h1 tag. I've no idea why they used that here, but this is how it looks like.

04

In my opinion, they used the h2 tag in a very smart way. They put the span there to style the most important words for visual users, but for screen readers, it's just a normal title.

I initially thought that they forgot to use label for the email input. I was wrong, there is a label but only for screen readers users, it's visually hidden for the rest.

Also If you want to find some cool open-source project and start contributing check out JustContribute

Follow me on Twitter for a web dev content

5 tools to audit your website accessibility

Dominik Ilnicki — Tue, 07 Jul 2020 21:11:08 +0000

In a previous post, I shared with you 5 web accessibility issues and some ways to cope with them.

5 deadly sins of web accessibility

Dominik Ilnicki ・ Jun 14 '20

#a11y #webdev #html #beginners

Today I'll list 5 tools that help you test your site against the a11y and help improve your codebase in that area.

01. "Accessibility Insights for Web" extension

I'm a very big fan of that tool. It has three main features.

Fast Pass :
- Automatic test - You run a generic test against your site and it returns the report. You can find their useful tips on how to get rid of all the fundamental problems.
Tab stops - It visualizes the tab order on your site. You can walk through the app using the keyboard and see how the focus behaves.
Assessment It provides you a checklist with all the stuff that you should check manually to make sure that your app is accessible. It tells you very specific why, what and how you should test,
Ad hoc tools That feature lets you test different things like heading hierarchy or color contrast ratio in real-time.

02. "NoCoffee Vision Simulator" chrome extension

Thank's to that extension you can step into disordered people's shoes and simulate various eye diseases directly in your browser.

03. Accessibility tab in lighthouse

You can also audit your site using Google lighthouse and check the Accessibility tab to get insights on how to improve your site.

04. Whocanuse.com

That site allows you to check the element's contrast ratio. You can also investigate what percentage of the population may have problems with capturing your elements.

05. axe-core

Axe core it's the mother of the vast majority of accessibility tools. It's an accessibility testing engine used by a lot of other tools like Google lighthouse. You can build something completely new on top of that.

--
I hope you haven't heard at least about one of them and It'll help you make the web a more accessible place, see you in the next post ✌️

🐦 Follow me on Twitter for more a11y/webdev related stuff.

👨‍💻 If you want to find & join the open-source project check out my latest side-project - JustContribute.

Open source diary #1

Dominik Ilnicki — Wed, 24 Jun 2020 22:02:05 +0000

Hi there, Some time ago I decided to start contributing to the open-source project. In this series, I'll share my thoughts, stories, successes, and failures in my contribution process.

OK, I need to find some project

To be honest that wasn't an easy part for me. I wanted to join a small project without dozens of contributors and without very complex and advanced codebase because I'm not a JS expert yet. I wanted to start small. Also, I wanted to code in React I'm learning that tech right now and I want to keep mastering it.

I used the tool I built to easily find OS project/issues and start contributing https://justcontribute.netlify.app You can read more about it in my previous DEV post

I built side-project helps you find cool open source projects and join them

Dominik Ilnicki ・ Jun 7 '20

#showdev #webdev #react

It took me a while to find a good fit for me. Some of the projects weren't exciting, some of them used Svetle or Vue. But finally, I came across TidyTweets repo. There was just one developer and a bunch of good first issues. What's more, Rafael - the maintainer, is a much more experienced developer then I am so it was a great opportunity to learn new stuff.

Setting up a dev environment was... hard

I tried to set all the things up on my local machine. It wasn't as easy. I couldn't force it to work. The project contains a lot of things that need to be configured like Netlify functions or Twitter Development Account. Rafael spent with me a lot of time to get it up and going. That was the biggest obstacle I faced so far in the project.

Right now new contributors don't need to make all those steps because TidyTwitts was added to the Netlify Open Source program so the configuration is much simpler. You just need to link TidyTweets netlify account to your local app using App ID.

First issues and PR's

Before I started I've read the contributing rules in the README. Rafael shared a great article about a successful git branching model It helped me to understand how to use git more efficient and systemize my work. Also, I've watched this YT movie about using GitHub fork.

As I mentioned I started small. Took 2 easy issues with a good first issue label. My first pull request was merged a couple of days ago and the second is in a review when I write this article.

Sum up

Things are just getting started. I hope I'll take more advanced and complicated issues as time progress. I want to encourage you all to join Rafael and me and contribute to TidyTweets all the help will be appreciated!

Also If you want to find other great OS project check out JustContribute

5 deadly sins of web accessibility

Dominik Ilnicki — Sun, 14 Jun 2020 20:01:53 +0000

In this article, I'll point out the 5 most common mistakes related to web accessibility and share ideas about how you can cope with them.

No semantic HTML
Ommiting alt tag
Lack of labels
Too low contrast ratio
No keyboard navigation support

01. No semantic HTML

Using tags like <section>, <article>, <nav> or <aside> make your site much more accessible right on the starting point. Thanks to that, screen readers used by blind people can clearly recognize the purpose of different parts of the website. Tags like <div> or <span> haven't any informative value and make your content much harder to interpret.

A quick win for your app is using proper heading hierarchy.
It's common that beginning developers think about heading tags (<h1>,<h2>,...) in size category. But it's not the point! Heading tags are not about the size or design property, they are about the priority of the text. If your text needs to be bigger just use CSS to achieve that.

Also, you shouldn't skip heading levels. Start from <h1> then <h2>, <h3> and etc.

02. Omitting `alt` tag

Remember, every img should have alt property. That makes photos accessible.
The rule is simple there. If the image is just a decoration element without any content message the value of alt should be an empty string. In another case, alt should have a descriptive description of the image.

Tip: Don't write 'The image presents...' or 'In the photo...' in the alt text. The screen readers already have known that's an image.

03. Lack of labels

People need labeled inputs to know what kind of information they are supposed to provide.

Some people use the placeholder value to tell the user what the input is for. It's not the best idea when it comes to a11y. Firstly, some screen readers don't read placeholder value at all. Secondly, it's just a bad UX. When the user starts typing the placeholder value disappears.

04. Too low contrast ratio

If the element's contrast ratio between background and foreground is too low people with vision disorders just can't see the content.
The interesting fact is that it's very important even for your average users, for example on a sunny day it's almost impossible to capture low contrast elements.

If colors fail audit you should consider changing the palette to make your element accessible.

Tip: You can check contrast ratio using this tool https://whocanuse.com

05. No keyboard navigation support

Sometimes users want to navigate your site using a keyboard only. You need to make their life easier.

Never remove the outline from the focused element if you don't provide any alternative styling (box-shadow, background, border).

What's more, your focus order can't behave unpredictably. The order of focus should be consistent with the reading direction in the user's country. You can use negative z-index value to make some elements unreachable from a keyboard (eg. emojis) but be aware of messing focus order up.

Thanks for reading, I hope those points will point your attention to some web accessibility issues.

Hey, If you want to find & join to some cool open-source project check out my latest side project Just Contribute

I built side-project helps you find cool open source projects and join them

Dominik Ilnicki — Sun, 07 Jun 2020 19:47:24 +0000

tldr; Tool that let you find latest GH issues meant for newcomers and help you start contributing to the open-source

link: https://justcontribute.netlify.app

Motivation

For some time I was thinking about joining some open-source project. I believe that's is a huge opportunity to gain some experience in real-life projects.

But I was struggling in finding projects I can join. I'm a beginner so I was looking for some small less popular repos. It wasn't too easy, because I needed to browse GH typing some long weird queries, checking is there any open issue that I can handle, etc.

My solution

I created site that let you provide programming language and popularity of issue that you want to get and it presents you issues that:

are open
have at least one of the "newcomers welcoming" label (good first issue, up for grab, easy, etc)
doesn't have linked pull request
no one is assigned to them
conversation is unlocked
are in public repos

Tech stack

Front-end: react, scss
Back-end: node, express js

I built this whole thing in just 2 days so if you have any suggestions, feedback, or getting some errors please let me know in comments!

Semantic HTML by real-life examples

Dominik Ilnicki — Mon, 01 Jun 2020 20:02:09 +0000

On my way of learning semantic HTML, I found it very useful to take a look at how other big players cope with that.

I prepared for you two examples of how Twitter and Dev.to use semantic HTML tags like article, section, or nav on their home page. I'll continue that series if you find it interesting too.

Dev.to

Twitter

Optimize images for website

Dominik Ilnicki — Mon, 25 May 2020 19:59:26 +0000

Unoptimized images may cause a lot of performance issues and slow down your site significantly. In this article, I'll share with you some ways how to increase your web app performance dealing with images.

01. Lazy loading

Lazy loaded images start loading only when they are in the user's viewport. That's a huge win because you don't need to load all the images at once.

how to do it?

The simplest way is to use native HTML loading attribute and set it to lazy on the img element

<img src="../assets/photo.jpg" loading="lazy" />

check the browser support

02. Load proper images sizes

In the perfect world, you should never load a bigger image then you display, it's just a waste of transfer. You can define which image needs to be load depend on the user's screen resolution. There are a couple of ways to achieve that.

Set srcset on the img

<img src="images/photo.jpg" srcset="images/photo_medium.jpg 100w,images/photo_large.jpg 400w"/>

In that attribute, you can tell the browser that you have the same image in different sizes by providing a path to the asset and intrinsic width in pixels (100w).

03. Use compressed images

According to the Google Chrome Developers team most of your images should have less than 100kb.
You should consider using jpeg or webp formats. They are way lighter then png files. You can use squoosh the tool maintained by Google that allows you to convert and compress your images.

03. Images optimization CDNs

There are some tools that compress, resize, and make other transformations on your photo to reduce loading time. I personally use imagekit and it does the job very well.

JS visual notes: Data types

Dominik Ilnicki — Thu, 14 May 2020 20:14:06 +0000

Hi, today I want to share with you next 2 notes about data types in JS

Solve REM problem with the 'happy rems' approach

Dominik Ilnicki — Mon, 11 May 2020 19:55:51 +0000

Some time ago I've heard about the approach called 'happy rems' helping to avoid problems with converting rems to pixels.

As you probably know rem is the CSS unit related to the browser. It's shortcut form root em. In Google Chrome and Firefox, the initial value of 1rem is set to the 16px.

And here comes the problem, when you want to use rems in your project but need to set font-size to 21px you need to make some calculations. In that case, it would be around 1.3125rem. So I want to share with you the happy rems approach that helps to avoid all those weird values.

Set root font size (rem) value to the 10px in your global style

html{
   font-size: 62.5% // from now 1rem === 10px
}
body{
   font-size: 1.6rem; // we set default font size value to the 16px as it was
}

As you see we didn't changed default browser font size it's still 16px, but now our 1rem is 10px so


.myCoolText{
   font-size: 1.4rem; // 14px
}

DEV Community: Dominik Ilnicki

I worked 3 weeks on trains traveling around Europe - report

Intro

1/7 (07/02/2022)

2/7

3/7

4/7

5/7

6/7

7/7 (07/22/2022)

First steps in R

Intro

More about R

Basic calculations

Variables

Vectors

Declaration

Naming

Calculations

Selecting elements

Selecting elements by comparison

Sum up

JC v2 - find cool open-source projects & start contributing

Intro

I built side-project helps you find cool open source projects and join them

Dominik Ilnicki ・ Jun 7 ・ 1 min read

What I've done

Tech

UI/UX

What's new

To sum up

Semantic HTML by real-life example part 2

Intro

01

02

03

04

5 tools to audit your website accessibility

5 deadly sins of web accessibility

Dominik Ilnicki ・ Jun 14 '20

01. "Accessibility Insights for Web" extension

02. "NoCoffee Vision Simulator" chrome extension

03. Accessibility tab in lighthouse

04. Whocanuse.com

05. axe-core

Open source diary #1

OK, I need to find some project

I built side-project helps you find cool open source projects and join them

Dominik Ilnicki ・ Jun 7 '20

Setting up a dev environment was... hard

First issues and PR's

Sum up

5 deadly sins of web accessibility

Table Of Contents

01. No semantic HTML

02. Omitting alt tag

03. Lack of labels

04. Too low contrast ratio

05. No keyboard navigation support

I built side-project helps you find cool open source projects and join them

Motivation

My solution

Tech stack

Semantic HTML by real-life examples

Dev.to

Twitter

Optimize images for website

01. Lazy loading

how to do it?

02. Load proper images sizes

03. Use compressed images

03. Images optimization CDNs

JS visual notes: Data types

Solve REM problem with the 'happy rems' approach

02. Omitting `alt` tag