⚡️ Create React App Blog

[31] 100 Days of Swift UI (upd. 29.02.24)

2024-02-15T00:00:00Z

100 Days of SwiftUI

Today I started the 100 Days of SwiftUI course by Paul Hudson. I've been wanting to learn iOS development for a while now, and I think this is a brilliant opportunity to do so. I'm excited to see what I can build with it.

This post will be updated as I progress through the course. I will be adding the new things I learn and the projects I build as I go along. I will try not to skip any days, but we will see how it goes.

So far, all my experience with Swift is limited to this Frontend Masters tutorial by Maximiliano Firtman. So, I have some basic knowledge of the language and the framework, but I'm still a beginner.

In addition to this post, my progress can be followed on:

Mastodon (updates and thoughts)
Github (code)

Day 1: Variables, constants, strings, and numbers

Today, I reviewed some basic concepts of Swift. I already knew about variables and constants, but I learned a couple of new things as well. For example, I learned about multi-line strings ("""), type safety (1 + 2.0 = error), and a couple of useful methods (uppercased(), hasPrefix(), isMultiple(of:)). Of course, the first day was an easy one, but nevertheless, it was a good refresher.

Day 2: Booleans, string interpolation, and checkpoint 1

This day's material covered such topics as booleans and string interpolation. I noticed that the interpolation syntax in Swift is more elegant and a bit more powerful 🤔 than in Javascript, so that's interesting. At the end of the lesson, I finished the first checkpoint assignment - converting temperature from °C to °F (classic).

Day 3: Arrays, dictionaries, sets, and enums

Day 3 had a surprisingly large amount of new information. I learned a couple of previously unknown concepts, such as dictionaries, sets, and enums. I believe that each of them might have particular use cases, but I'm not sure yet when to use them in practice. I suppose it will become clear in the nearest feature.

So far, it seems that the first two weeks of the course will be directed towards learning/refreshing the basics of Swift as a language. After that, we will start using SwiftUI and building something more tangible. I hope that, at this point, the process will become more practical.

Day 4: Type annotations and checkpoint 2

Today's lesson was brief, yet it covered an important topic - type annotations. From my point of view, in Swift, it works exactly the same way as in Typescript. I am not 100% sure about type inference, so I will check it later.

The second checkpoint assignment was about returning unique values from the array by converting it to a set. It also seems like a task that can be accomplished almost the same way in Javascript or Typescript.

As you can see from today's image, I still use VSCode for Swift development. I am not sure if it's the best option, and I will probably switch to Xcode sooner or later.

Day 5: If, switch, and the ternary operator

&&

Day 6: Loops, summary, and checkpoint 3

I accidentally skipped a day yesterday, so I am catching up today with two sections. The first (Day 5) was about conditionals - if, switch and the ternary operator (2 > 1 ? "Yes" : "No"). Once again, it feels pretty much the same as in Javascript, except for some minor differences - Int and Double can not be compared directly in Swift, and switch statements must be exhaustive, i.e., go through all the cases or have a default case.

Day 6 was dedicated to loops - for and while. I learned about ignoring the value (_), excluding the last entry (..<), generating a random number (Int.random(in: 1...10)), and using break and continue statements to control the flow of the loop.

The third checkpoint contained a FizzBuzz task, which I solved at first by using the % operator. Then, I realized that Swift has a .isMultiple(of:) method and refactored the code to use it.

Day 7: Functions, parameters, and return values

It is a wrap for the first week of the course. Today's lesson was an introduction to functions in Swift. I learned the basic syntax, as well as some handy tricks, such as omitting the return keyword for single-expression functions, using external parameter names, and skipping the parameter label with _.

Day 8: Default values, throwing functions, and checkpoint 4

&&

Day 9: Closures, passing functions into functions, and checkpoint 5

Days 8 and 9 were all about functions and closures. These parts were packed with new information, and I learned a lot of new things, though I am unsure if I remember all of them. Especially the part about closures felt a bit tricky, and I will probably need to revisit it later. However, it feels like a powerful feature, so I also used it in the latest checkpoint assignment to chain a couple of functions together - let formattedNumbers = luckyNumbers.filter {$0 % 2 != 0}.sorted {$0 < $1}.map {"\($0) is a lucky number"}.

Day 10: Structs, computed properties, and property observers

Day 10 was an introduction to structs. It was a pretty new concept for me, but it seems clear so far. I learned about structs' methods (and mutating keyword), computed properties (getters and setters), and property observers (willSet and didSet). The last part about custom initializers was somewhat confusing, but I think I got the main idea.

Day 11: Access control, static properties and methods, and checkpoint 6

This part was a more advanced intro to the struct concept in Swift. I learned about access control (private, fileprivate, private(set)), static properties and methods, and the difference between self and Self. At the end of the lesson, I finished the sixth checkpoint assignment, which was about creating a proper struct with a couple of properties and the mutating method.

[30] Accepting defeat and plans for the future

2023-09-18T00:00:00Z

Disposition

It is a time to admit the loss. I think I will finally give up on the idea of writing "long, useful, and meaningful" blog posts. Unfortunately, I have a lot of ideas but not enough energy to write them down. As English is not my native language, it takes way too much time to write and even more time to edit and process the text to be readable. Not to mention fully expressing my thoughts in full.

So, from now I will relax and just write some short notes about what I have done and what I have been doing lately. Maybe it'll turn into something meaningful over time. We will see. I will try to do it more regularly as well. I guess it is a win-win situation. For who? I do not know yet.

Latest projects

The main goal for this summer/fall was to finally get all my current pet projects to v. 1.0.0. Today, I can say that I have achieved this goal. I have released the first versions of all my projects.

Villivald.com - I have rebuilt my personal website with Next.js and TypeScipt. Even though I'm not entirely happy with the result, I think it looks better than the previous version.
Wishlist - a wishlist app that was on my mind for a while.
Koripallopaikat.com - made several improvements that may not be visible at first glance but improved the overall experience. Added some new courts as well.

The shiny new things I used while rebuilding those projects above:

container queries
:has selector
css nesting
logical properties
css variables (not particularly new, but still)
dynamic viewport units
layers

My learning experience - FrontendMasters x Github

I created a repo for my Frontend Masters course notes. I have been writing them down in that way for a while, but now I decided to make it public.
It helps me to methodically go through the courses and retain information. Possibly, it helps other people as those notes are a concentrated summary of great courses on different topics, etc.
Links: FM profile, GH repo

Ideas and plans for the future

The essence of the project is to build a web app for comparing perfumes based on their chemical composition. At the moment, I am not even sure if it is possible to do it or does it make sense at all. However, it has been on my mind for a while, so I will try to investigate it further.

Random thoughts

What I don't like about oklch is, that it looks pretty interesting but has certain drawbacks, such as this one.
I am sorry. To be serious, I really don't like it for some reason. And, at the same time, color-mix with oklch is pretty cool 🤷‍♂️.

The reason? I do not know any rare words.

[29] How I got my first job in IT

2022-04-03T00:00:00Z

Background

I will start a little bit from afar. The part of the story is that in 2015 I had a degree of Master of Arts. I graduated from the University of Helsinki, where I studied Russian literature as a major for about four years. It is a very amusing and really broad subject, and I was truly enjoying my studies. Anyway, there was just one problem. I do not know how obvious is that, but as you probably can imagine, there is simply no way to get a job in such a field, except you are a genius or/and have some relations. I do not fill in either category, and it is totally ok, but the reality is not so supportive.

Anyway, after almost 1,5 years of looking for a job in my profession, with no result, I realized I should stop thinking about the value of my degree and postgraduate studies and just find some “normal” job. The job I did accidentally find became a part of my life for the next five years.

Tram driver

So, in the spring of 2017, I became a tram driver here in Helsinki in the local transport company. It was never kind of a dream job, but it was ok, a decent job for a moment, as I thought then. Nevertheless, quite soon I understood that this job is not what I wish to do for the rest of my life. After that, I started thinking about changing my profession and looking for possible ways to move on.

After all, about 2.5 years ago, in 2019, I started thinking about getting another “better” degree that could improve my employment situation. Luckily, at that time, I probably made the best decision I could have made.

In the fall of 2019, I started to study Computer Sciences at the LAB University of Applied Sciences. The main reason for choosing this University was the fact they were offering a distance learning program, which suited me the very best in my situation where I would like to combine work and study.

Plan

At this point, we can skip that part where I am crying about “how hard it is to combine work and studies”. I do not honestly think it is valuable. So, let’s just move to the essential part of my story.

I started to look for a job very early, in my first year of university studies. I suppose it sounds a bit strange and presumptuous, however that was not an accident, but rather part of my plan.

The “Plan” contained just one mission - I should try to get the first job in IT as soon as I could. The main reason - I felt that I have already spent too much time doing nothing. There were also at least three “tools” to achieve the goal: intensive self-studies, hundreds of sent CVs, and a bit of perseverance.

At this point, I must explain, that I do not really think that this plan is genius or would work for everyone. On the contrary, probably it is not - tonnes of CVs may not be necessary, since I know people who got a job/internship after the first one. However, those people are definitely an exception, and all the process is a lottery, in a sense. I know that the tech internet is full of stories where a person finds a software engineer job in six months after completing a couple of free courses and creating a calculator from YouTube tutorials.

Individually, I do not believe in such stories, neither I have seen anything like that in real life. On the contrary, people who quickly got jobs in IT were experienced and knowledgeable. It does not mean that you need a university degree at all. In my case, it just helps me to structure my knowledge. Summarizing that, I can say, that it feels, that looking for a job as early as possible is still a decent strategy since it can help you to learn what employers are looking for and to gain more confidence by going through a series of failures and disappointments. This is where the third tool on my list is needed - perseverance.

Looking for a job

The process of looking for a job in IT was a very painful and frustrating experience. I sent my CV to an enormous amount of different places and got tonnes of rejections as a result. Sometimes I have also got an interview invitation. I can say, that I made all kinds of them - phone screenings, zoom, in-person interviews, live coding sessions, etc.

At some point, I realized that if I really want to find a job and not only enjoy the process of searching for it, I should commit to studying a bit every day. Now, I actually think that this decision was the most important in the whole process. In my opinion, university studies shouldn’t be the only source of information (and experience), especially in IT. A person is practically obliged to do something on his own to gain a comprehensive experience.

The next important part of this story is the decision to concentrate on developing my own pet projects. I think that it is critical because firstly, you will have something to show the employer to prove your skills, and secondly, you will show your commitment. Building a side project is also the best way to improve your skills and gain confidence.

I had three main projects during the last two or three years: My personal website - https://villivald.com (React, TypeScript) My blog - https://create-react-app.com (11ty) And my basketball-related project, which I’m most proud of - https://koripallopaikat.com (Next.js, JavaScript, MongoDB) I think that especially the latest project was one of the possible reasons for my “success” in finding a job. At least, that was one of the factors why I continually got a positive response from recruiters.

Current state

In December 2021, I got another invitation for a job interview from the University of Helsinki. It seemed inspiring since I was always thinking about University as an employer in a positive way. The vacancy itself (Junior Frontend Developer) was also extremely promising, as it included the duties that I was most interested in.

The interview went surprisingly well. Luckily, there was no live coding part, which was always a kind of traumatic experience for me. However, the biggest surprise was ahead, as, after about a week, I got a call to let me know that I got the job.

So, it’s hard to believe, but after two and a half years of studying and about two years of meaningful job search, I finally got my first job in IT. At the present time, I have been working there for three months, and so far, things are going relatively well, even though I still feel like the dumbest person in the world almost every day. I also realized that imposter syndrome is unfortunately an absolutely real thing and not just a hackneyed cliché.

In the next post, I will try to gather my thoughts and describe my typical working day.

P.S.

There are the top three resources from which I learned most of what ultimately helped me get my first job as a software developer:

Frontend Masters 💲

Full Stack Open 🆓

freeCodeCamp 🆓

[28] Top 10 Web Dev Tools in 2021

2021-12-26T00:00:00Z

This time I would like to present you some of the most memorable tools I've talked about this year. Personally, for me, this year was a year of intensive learning and big changes in my professional life. Anyway, I'm not going to make this blog post too personal. For this purpose, there will be a separate post in January. So, let me finish my blog post series - Top 10 Best Web Dev Tools. Every month I tried to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. Summarizing the results of the year, there are:

1). Squoosh

Squoosh is the most intuitive and good-looking image compression web app I have ever seen. It works very fast and supports many formats (AVIF, WebP, JPEG XL, etc.).

[18] March 2021

https://squoosh.app/

2). Daily Dev

The best coding news aggregator I have seen so far (yes, including Hacker News). Available both as a web app and extension.

[19] April 2021

https://daily.dev/

3). Vercel

A very impressive and easy-to-use deployment and collaboration platform for front-end developers from creators of NextJS. Vercel enables developers to host websites and web services that deploy instantly and scale automatically – all without any configuration. So far, I have been using it for a couple of weeks, and it really feels like a Heroku or Netlify on steroids.

[21] May 2021

https://vercel.com

4). Eleventy

Eleventy is a well-known and gaining momentum static site generator. I have recently moved my blog from WordPress to Eleventy, and it was the best decision to make in terms of performance and accessibility. Here is the latest Lighthouse score as confirmation of my words.

[22] June 2021

https://www.11ty.dev/

5). Haikei

Haikei is a very inspiring web tool for generating unique SVG shapes, backgrounds, and patterns.

[23] July 2021

https://app.haikei.app/

6). Vite

Vite is a blazing fast and easy to configure build tool. It uses esbuild for bundling, which is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers. I recently used Vite in one of my latest projects, and I'm currently planning to move my site to it (from create-react-app incl. webpack).

[23] July 2021

https://vitejs.dev/

7). GitHub Copilot

Copilot is an AI tool developed by GitHub to assist users of VS Code. It is still in a Technical Preview state and requires joining the waitlist, but from my experience, I would say that Copilot has all prerequisites to become the Next Big Thing.

[24] August 2021

https://copilot.github.com/

8). Hackr.io

Hackr.io is a platform providing access to a curated collection of different programming courses. It is a great tool to learn overall, as well as get started with web development. Feel free to submit a course or tutorial you like the most (I also plan on doing it sometime soon).

[25] September 2021

https://hackr.io/

9). OpenMoji

An open-source emoji library made by 60+ students and 3 professors of the HfG Schwäbisch Gmünd and 20+ external contributors. I already use some of their brilliant emojis in my basketball-related project. They seem like a great alternative to the standard ones.

[26] October 2021

https://openmoji.org/

10). cht.sh

This tool is one of my latest findings from Frontend Masters course. A very useful terminal cheatsheet with a CLI interface.

[27] November 2021

https://cht.sh/

[27] Top 10 Must-Have Web Dev Tools – November 2021

2021-11-29T00:00:00Z

For me, this November was very hectic in all aspects, so I managed to write this post only on the very last day of the month. Nevertheless, let me present you a brand new November 2021 edition of my blog post series - Top 10 Best Web Dev Tools. Every month I try to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

1). ssshape

An SVG blob/shape generator with a great UI and intuitive user experience.

https://fffuel.co/ssshape/

2). Doodle Ipsum

The lorem ipsum of illustrations. It gives you the possibility to customize your doodles, grab the code, and use it on your web prototypes, landing pages, etc.

https://doodleipsum.com/

3). cht.sh

This tool is one of my latest findings from Frontend Masters course. A very useful terminal cheatsheet with a CLI interface.

https://cht.sh/

4). cube awesome tools

An awesome collection of data visualization tools for different occasions.

https://awesome.cube.dev/

5). couleur

A simple tool to help you create harmonizing color palettes with HSL color values. You should also check an Accessible Palette tool from my last post.

https://couleur.io/

6). UIUI

Collection of simple elements for UI development you can play around with.

https://www.uiui.dev/

7). Shadow Palette Generator

Actually, this one should be number one on this list. An amazing shadow palette generator by Josh Comeau who is also a creator of CSS for JavaScript Developers course.

https://www.joshwcomeau.com/shadow-palette/

8). Netlify Drop

Drag and drop tool for deploying your website to Netlify. I do not really know, can it be more simple than this?

https://app.netlify.com/drop

9). Bundle Scanner

An instrument to scan your bundle and identify all the NPM libraries included. Good addition to Bundlephobia.

https://bundlescanner.com/

10). Remix

A promising full-stack React-based framework focused on web fundamentals and modern UX. Now it's public and completely free.

https://remix.run/

My Site

GitHub

[26] Top 10 Must-Have Web Dev Tools – October 2021

2021-10-19T00:00:00Z

There is an October 2021 edition of my blog post series - Top 10 Best Web Dev Tools. Every month I try to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

1). OpenMoji

https://openmoji.org/

2). Accessible Palette

Accessible Palette allows you to create entire color systems. It is a tool for designers and developers who want to create color systems that are accessible to everyone. To generate color ranges, they are using chroma.js library, which I mentioned in my previous post.

https://accessiblepalette.com/

3). Basic Pattern Repository

Basic Pattern Repository is a collection of SVG patterns for your next side project. See also Hero Patterns.

https://patterns.helloyes.dev/

4). blobbb fun

It is an easy-to-use generator for creating unique SVG forms. I also recommend you to check another generator made by Haikei, which I already mentioned in an earlier post.

https://www.blobbb.fun/

5). Motion One

A new animation library with small size and fast performance. Can't wait to try it in my projects.

https://motion.dev/

6). Theatre.js

What? Yes, it is another JavaScript animation library. Seems very intriguing to me as well.

https://www.theatrejs.com/

7). huey

Since this post, in general, is more focused on visual things, there is another tool for creating accessible color palettes. Huey has an option to simulate the different types of color blindness, which can be very useful.

https://huey.design/

8). Huetone

Huetone is the tool you need to create and fine-tune your color system. The main difference from the previous ones is that Huetone uses LCH color space.

https://huetone.ardov.me/

9). Buttons Generator

Buttons Generator by Marko Denic seems like it's already been in every top and newsletter, so I also wanted to share it with you 🤓.

https://markodenic.com/tools/buttons-generator/

10). heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind (the worst thing to happen to CSS, you know 💁‍♂️). Versions for React and Vue are available.

https://heroicons.com/

My Site

GitHub

[25] Top 10 Must-Have Web Dev Tools – September 2021

2021-09-16T00:00:00Z

Hi everyone, the summer is over, and I'm going back to my usual schedule. So, today I will present you the September 2021 edition of my blog post series - Top 10 Best Web Dev Tools. Every month I try to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

1). SolidJS

Today I will start with SolidJS, which is a productivity and performance-based JavaScript framework. I am not going to lie, I have not tried it yet properly, as I was more focused on my Next.js basketball-related project. Anyway, it seems very impressive and encouraging. It has been for a while on my todo list, and I can wait to try it out.

https://www.solidjs.com/

2). Hackr.io

https://hackr.io/

3). RAW Graphs

RAWGraphs allows you to easily create and export data visualizations as images and embed them into your web page. You can use tabular (TSV, CSV, DSV) or JSON data.

https://rawgraphs.io/

4). Hasura

Hasura is a web application server that provides instant access to the rich possibilities of GraphQL.

https://hasura.io/

5). Slinkity

Slinkity is a plugin that can extend your 11ty project. It allows you to use JS frameworks (React, Vue, and Svelte) for writing page and layout templates. Even though Slinkity is currently in an early alpha state, it is already a very useful tool with an impressive approach.

https://slinkity.dev/

6). Jamstack Themes

Jamstack Themes is a resource with a brilliant collection of themes, templates, and any kinds of boilerplates for your next Jamstack project. Eleventy, Next.js, Jekyll, Hugo, Gatsby, and many more are supported.

https://jamstackthemes.dev/

7). Chroma.js

Chroma.js is a tiny JavaScript library for all kinds of color manipulations. It is has a very intuitive syntax and is easy to use.

https://gka.github.io/chroma.js/

8). This Person Does Not Exist

This Person Does Not Exist is a funny (and a bit creepy) web app that uses AI to generate endless fake faces. It can be useful for projects that need some mock data.

https://thispersondoesnotexist.com/

9). SpeedVitals

SpeedVitals is a new Lighthouse alike tool that allows you to monitor your site performance. It is valuable for optimizing your website for core web vitals.

https://speedvitals.com/

10). Variable Fonts

Variable Fonts is a simple resource for finding and trying variable fonts. Even though most of them are commercial, they also have many free ones.

https://v-fonts.com/

My Site

GitHub

[24] Top 10 Must-Have Web Dev Tools – August 2021

2021-08-17T00:00:00Z

Hi everyone 👋. Today I would like to present you the brand new August edition of my blog post series - Top 10 Best Web Dev Tools. Every month I am trying to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

1). GitHub Copilot

https://copilot.github.com/

2). Glitch

Glitch is a very easy-to-use and user-friendly tool that allows you to build fast, full-stack web apps in a browser for free.

https://glitch.com/

3). Meta Tags

With Meta Tags, you can generate and edit your website's metatags, as well as preview how your webpage will look on Google, Facebook, Twitter, LinkedIn, and other platforms.

https://metatags.io/

4). Omatsuri

Omatsuri is an open-source web app with 12 browser tools for everyday use. At the moment there are such useful tool as color shades generator, fake data generator, svg compressor and much more.

https://omatsuri.app/

5). Happy Hues

Happy Hues is an extremely good-looking collection of curated color palettes. Feel free to choose your favorite and use it in your next project.

https://www.happyhues.co/

6). Jamstack Explorers

Jamstack Explorers is a learning platform from Netlify. As it is obvious from the title, this platform is dedicated to Jamstack (which stands for JavaScript, API & Markup) related technologies. At the moment they have 9 courses on topics such as Next.js (by Cassidy Williams), Serverless functions (by Ben Hong), Nuxt.js & Sanity (by Ekene Eze), etc.

https://explorers.netlify.com/

7). Devtool Tips

An open-source curated collection of devtool tips on different themes.

https://devtoolstips.org/

8). Error404

A broad collection of unique and fun illustrations for your website's 404 pages. You can see those illustrations in action since I use them on my personal site and my latest basketball-related project.

https://error404.fun/

9). What The Filter ?

A visual playground to JavaScript array & object transformations.

https://renato-bohler.github.io/what-the-filter/

10). Contraste

Contraste is a lightweight macOS app that allows you to check the accessibility of text against the Web Content Accessibility Guidelines (WCAG).

https://contrasteapp.com/

My Site

GitHub

[23] Top 10 Must-Have Web Dev Tools – July 2021

2021-07-11T00:00:00Z

Hi everyone 👋. My vacation has officially started 🥳, and I would like to present you the July edition of my blog post series - Top 10 Best Web Dev Tools. Every month I am trying to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

1). Next.js

This time I would like to start with Next.js, which is really not a tool, but a whole framework with hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. I've wanted to use it in some projects for a long time, and finally, I did it in my last web app. Next.js provides you the easiest ways to create APIs and work with routing and navigation. I must say that the overall developer experience is at a great level, definitely must try.

https://nextjs.org/

2). Vite

https://vitejs.dev/

3). Bundlephobia

Bundlephobia is a very useful project that helps you to find the performance impact of npm packages.

https://bundlephobia.com/

4). SVG Path Visualizer

This web tool allows you to explore an SVG path in a visual way.

https://svg-path-visualizer.netlify.app/

5). Clippy

Clippy might be the easiest way to create CSS clip paths. I would also recommend checking out the other projects made by Bennett Feely since he has very interesting approaches.

https://bennettfeely.com/clippy/

6). Material Design icons by Google

Quality icon set by Google. A noteworthy alternative to Font Awesome or Material UI Icons.

https://fonts.google.com/icons

7). Haikei

Haikei is a very inspiring web tool for generating unique SVG shapes, backgrounds, and patterns.

https://app.haikei.app/

8). CSS Reference

A free visual guide to CSS from the creator of Bulma.

https://cssreference.io/

9). Snappify

Snappify is another tool for creating beautiful code snippets. It works almost exactly like Ray.so that I mentioned in one of my earlier posts.

https://snappify.io/

10). JS is Weird

Not exactly a tool, but a fun quiz, that shows you the weirdest parts of JavaScript. Somehow I got 16/25 😀. Please, share your results in the comments 🤓.

https://jsisweird.com/

My Site

GitHub

[22] Top 10 Must-Have Web Dev Tools – June 2021

2021-06-15T00:00:00Z

It's been a month since the last post, so it means it's time to continue my blog post series - Top 10 Best Web Dev Tools. Every month I am trying to pick the most intriguing and handy instruments that, I believe, are must-haves for every web developer. This time there are:

1). Eleventy

https://www.11ty.dev/

2). DrawKit

DrawKit is a superb resource for picking free illustrations and icons for your next project. I came across it when looking for illustrations for my last project and was pleasantly surprised by its quality.

https://www.drawkit.io/

3). Git Command Explorer

Actually, Git Command Explorer could be an even more comprehensive and simple tool than the much more famous Oh Shit, Git!?! I mentioned in an earlier post last year.

https://gitexplorer.com/

4). favicon.io

Here I'd like to quote their official website: The only favicon generator you need for your next project.

https://favicon.io/

5). Create App

Create App is an alternative way of creating boilerplate for a modern web app. You can choose between React, Vue, Svelte or vanilla JS, and Webpack, Parcel, and Snowpack as well.

https://createapp.dev/

6). SVG PORN

Quality vector logos for every need. I was using them for a while on my website.

https://svgporn.com/

7). PIXEL ART TO CSS

As for that tool, I haven't found a particular application in practice, but it's just a very amusing project which I would like to share with you.

https://www.pixelartcss.com/

8). Devhints.io

Pretty useful author's selection of cheatsheets dealing with various topics, such as CSS, DevOps, JS, React, Rails, you name it.

https://devhints.io/

9). Big-O Cheat Sheet

This webpage visually covers space and time Big-O complexities of common algorithms used in Computer Science. Also available as a PDF.

https://www.bigocheatsheet.com/

10). Onelang.io

Onelang is an impressive online IDE tool that allows you to transpile code from one language to another in seconds. At the moment, they have support for TypeScript, Perl, Ruby, C++, C#, PHP, Swift, Go, Java, Python, and JavaScript.

https://ide.onelang.io/

My Site

GitHub

[21] Top 10 Must-Have Web Dev Tools – May 2021

2021-05-10T00:00:00Z

It seems that it is the perfect time to continue my recent blog post series - Top 10 Best Web Dev Tools. Every month I will try to pick the most intriguing and handy tools that I believe are must-haves for every web developer. This time there are:

1). Vercel

https://vercel.com

2). Color Leap

Color Leap is a very beautiful and well-designed resource on the history of colors. It is perfect for looking for inspiration, so choose your favorite era and dig into its colors.

https://colorleap.app

3). HTML DOM

A handy DOM-related knowledge database from creators of this vs that which I mentioned last year.

https://htmldom.dev/

4). Keyframes

A couple of very user-friendly and simple visual tools to help you generate CSS (animations, shadows, colors) for your projects.

https://keyframes.app/

5). GRID

A simple visual cheatsheet for CSS Grid Layout.

https://grid.malven.co/

6). CSS Stats

CSS Stats provides a report with deep analytics and visualizations for your stylesheets.

https://cssstats.com/

7). Yellow Lab Tools

Yellow Lab Tools is a free online page speed audit tool and a web performance analyzer.

https://yellowlab.tools/

8). Figma Crash

Actually, this pick is not a tool but a study resource. It helps you to dive deep into powerful Figma features. The course is totally free.

https://www.figmacrashcourse.com/

9). CSS Hell

I could not describe this resource better than their official site does - The collection of common CSS mistakes and how to fix them.

https://csshell.dev/

10). Readme.so

This resource provides you the easiest way to create a brilliant README for your next project.

https://readme.so/

My Site

GitHub

[20] Top 15 Most Valuable GitHub Repos in 2021

2021-04-28T00:00:00Z

Over the last few years, I've accumulated a huge amount of links to useful GitHub repos. Today I picked a few of them, which I would like to share with you.

1). sindresorhus / awesome

An ultimate list of resources for all kinds of developers. From JavaScript to Fortran and from Docker to Rails. One of the most popular GitHub repos with almost 160k stars.

https://github.com/sindresorhus/awesome

2). getify / You-Dont-Know-JS

A repo dedicated to the well-known You Don't Know JS book series by Kyle Simpson.

https://github.com/getify/You-Dont-Know-JS

3). EbookFoundation / free-programming-books

A giant list of completely free programming books in different languages.

https://github.com/EbookFoundation/free-programming-books

4). kamranahmedse / developer-roadmap

Official repo of a roadmap.sh project. Highly recommend it for people who are only taking the first steps in IT.

https://github.com/kamranahmedse/developer-roadmap

5). anuraghazra / github-readme-stats

A very useful repo in order to bring your GitHub Readme to the next level.

https://github.com/anuraghazra/github-readme-stats

6). jlevy/the-art-of-command-line

All you need for mastering the command line on one page.

https://github.com/jlevy/the-art-of-command-line

7). mbeaudru/modern-js-cheatsheet

A modern cheatsheet for the JavaScript knowledge you will frequently encounter in your projects.

https://github.com/mbeaudru/modern-js-cheatsheet

8). airbnb/javascript

JavaScript Style Guide from Airbnb. Also available on https://airbnb.io/javascript/.

https://github.com/airbnb/javascript

9). thedaviddias/Front-End-Checklist

An exhaustive list of all the elements you need to have before launching your website to production.

https://github.com/thedaviddias/Front-End-Checklist

10). ryanmcdermott/clean-code-javascript

The must-know Clean Code principles adapted for the JavaScript world.

https://github.com/ryanmcdermott/clean-code-javascript

11). bradtraversy/design-resources-for-developers

A curated and frequently updated collection of design resources for developers. Graphics, Fonts, Logos, Icons, you name it.

https://github.com/bradtraversy/design-resources-for-developers

12). trekhleb/javascript-algorithms

Algorithms and data structures implemented in JavaScript with explanations and links to further readings.

https://github.com/trekhleb/javascript-algorithms

13). microsoft/Web-Dev-For-Beginners

A 12-week, 24-lesson Web Dev curriculum made by Microsoft.

https://github.com/microsoft/Web-Dev-For-Beginners

14). sdmg15/Best-websites-a-programmer-should-visit

A truly impressive list of all kinds of websites every programmer should visit.

https://github.com/sdmg15/Best-websites-a-programmer-should-visit

15). FrontendMasters/learning-roadmap

A broad learning roadmap from Frontend Masters.

https://github.com/FrontendMasters/learning-roadmap

My Site

GitHub

[19] Top 10 Best Web Dev Tools – April 2021

2021-04-06T00:00:00Z

It is time to continue my new blog post series - Top 10 Best Web Dev Tools, which I started almost one month ago. Every month I will try to pick the most intriguing and handy tools that I believe are must-haves for every web developer.

1). Daily Dev

The best coding news aggregator I have seen so far (yes, including Hacker News). Available both as a web app and extension.

https://daily.dev/

2). HTTP Cats

A hilarious API that you can use in your website to show funny error messages. For those who are not in the team cat, there is also a dog version.

https://http.cat/

3). Ray.so

A super cool tool that helps you create some good-looking content for your blog or social media. I will definitely use it the future posts.

https://ray.so/

4). JSitor

Last month I mentioned Stackblitz, which is a great online code editor for web apps. This time I would like to present a tool with a bit narrower application, which is nevertheless very useful when working with JavaScript.

https://jsitor.com/

5). Can I use...

I suppose there must be at least one pick from captain obvious every month. This time it is a widely known resource - Can I use...

https://caniuse.com/

6). VIM Adventures

In fact, this is not a tool but an online environment that allows you to learn VIM in a game-like manner. As for this topic, I may as well recommend the Vim Fundamentals course by Frontend Masters.

https://vim-adventures.com/

7). 30 seconds of code

An extensive collection of code snippets for all occasions and all skill levels.

https://www.30secondsofcode.org/

8). Cool Backgrounds

A curated selection of cool backgrounds that you can add to blogs and websites. It also provides a broad scope for modification.

https://coolbackgrounds.io/

9). Grid Cheatsheet

It is another useful cheat sheet, presented in visual and easy to interpret form. From the authors of Flex cheatsheet (pick number 10).

https://yoksel.github.io/grid-cheatsheet/

10). uiGradients

A handpicked collection of beautiful color gradients for all kinds of designers and developers.

https://uigradients.com/

P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?

My Site

GitHub

[18] Top 10 Must-Have Web Dev Tools - March 2021

2021-03-08T00:00:00Z

Today I would like to start my new blog post series - Top 10 Must-Have Web Dev Tools. It will be partly a continuation of my last year's series (WP / DEV) but not quite. The reason for the appearance of this idea is that recently I have accumulated a huge number of links that I would like to share with everyone. I plan to do similar reviews once a month and hope these lists will be useful to someone. So, let's start with March 2021 edition.

1). Squoosh

Squoosh is the most intuitive and good-looking image compression web app I have ever seen. It works very fast and supports many formats (AVIF, WebP, JPEG XL, etc.).

https://squoosh.app/

2). Glassmorphism

This tool helps you to create web design elements inspired by the popular Frosted Glass aesthetic.

https://glassmorphism.com/

3). VisuAlgo

A VisuAlgo is the ultimate tool to learn data structures and algorithms visually.

https://visualgo.net/en

4). EStimator

The EStimator will help if you want to reduce the size of your JS bundle. It allows calculating the size and performance impact of switching to modern JavaScript syntax.

https://estimator.dev/

5). Netlify

Perhaps the most obvious, but nonetheless very useful pick. Netlify is an amazing platform allowing you to deploy in just a few clicks straight from your git repository.

https://www.netlify.com/

6). Hoppscotch

A free, fast, and beautiful API request builder. A noteworthy alternative to Postman.

https://hoppscotch.io/

7). Stackblitz

The online code editor for web apps. A wonderful VS Code-like alternative to other online IDE's like Repl, CodePen, etc.

https://stackblitz.com/

8). Buttonbuddy

A simple and easy-to-use tool for creating accessible buttons. It helps you to ensure that your buttons have accessible contrasts.

https://buttonbuddy.dev/#generator

9). Refactoring Guru

This resource could be a great starting point for someone interested in refactoring and design patterns.

https://refactoring.guru/refactoring

10). Flex Cheatsheet

A great visual cheat sheet for CSS Flex layout in a form of an interactive playground.

https://yoksel.github.io/flex-cheatsheet/

P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?

My Site

GitHub

[17] Becoming a Web Developer: Fall-Winter 2020

2021-02-07T00:00:00Z

It feels like it is finally time for my current situation overview after the long break since I published my previous post in mid-December.

During the last couple of months, there were a lot of things happening, so there was not enough time for writing at all:

The chaotic movement to a new apartment in early January. Note to future me: please do not ever move again in the wintertime without a truck or, at least, something larger than an Opel Astra.
Keeping a 1-year streak by going to the gym four times a week + cycling + running sometimes. I can assure you it is possible, but not very easy when you combine it with work and studies.
Looking for a new job (still with no result) and study (112/240 ECTS). Taking part in many job interviews and university courses.
I also improved my webpage a lot, and added new pages, such as Books and Courses.
Lighthouse score went from the ’50s to almost 100 in all categories. I made a PWA version as well.
As for my website, I started the migration to Typescript, which does not make a lot of sense at the moment. Anyway, I hope I will see the difference as the website grows.
I finished Front End Libraries Certification at FreeCodeCamp. It was fun, and the information I got feels useful, except it seems to me that Redux is not something I am going to use a lot.

What I am doing right now:

Besides my major university studies, I also started to learn Typescript at Udemy.
I also took one React-related course from the Savonia University of Applied Sciences via CampusOnline, but not sure if I have enough time to finish it.
In addition to that, there are a lot of different courses at my university right now: Audiovisual technologies, 3D Modelling, Game Design, Software engineering and architecture, Data structures and algorithms, Software maintenance and testing, and Java Course.

My plans for the next couple of weeks/months:

The next blog post, which will be in a form of Mega JavaScript CheatSheet. It would be something like this Markdown cheat sheet, which I did a couple of weeks ago just for myself.
New Top 15. I have found so many new tools and resources, that I just need to share them.
I am looking forward to learning some new inspiring technologies, such as Next.js and Vue. I also would like to improve my current knowledge of JavaScript and React.
And last but not least, an active search for a new IT-related job continues.

My Site

GitHub

[16] The 15 Best Developer Resources in 2020 - Part II

2020-12-25T00:00:00Z

Today I will keep up my Top 15 series for the last time this year. This post will be the second part of one of my previous posts, which was also related to Best Developer Resources. I wasn't originally planning any "sequels". Anyway, the reason for writing the second part is simple enough - there are just so many great resources that I want to share. This time, I will go with a bit less obvious ones, and, despite the lack of big names, I believe that there are enough noteworthy hidden gems here.

1). this vs that

It is a website with a simply genius approach. Explains the difference between things like :active vs :focus (CSS), class vs id (HTML), for ... in vs for ... of (JS), and so on.

https://thisthat.dev/

2). Increment

Stylish and informative software-related magazine. Articles by well-known experts such as Chris Coyier, Lea Verou, Dan Abramov, etc.

https://increment.com/

3). WebComponents

A great place to share and search for components. WebComponents provides articles, presentations, podcasts, tools, and more to help web professionals. All the content on this site is totally free.

https://www.webcomponents.org/

4). Sorted Colors

A very clever and simple tool for picking a new brand color for your project. It displays the colors with the color codes - HEX, RGB, HSL. Made by Mustafa Enes Ertarhanaci.

https://enes.in/sorted-colors/

5). Noun Project

A free collection of icons and photos for almost everything.

https://thenounproject.com/

6). Khroma

The AI-powered color tool. Khroma learns from your input and generates combos of color palettes.

http://khroma.co/

7). Grid By Example

An ultimate tool for creating a Grid Layout. Pretty much everything you need to know about Grid.

https://gridbyexample.com/

8). Houdini Worklet Library

The community-driven resource library of CSS Houdini worklets. The first time I heard about it from Una Kravets @ Chrome Dev Summit. Great place to dive deeper into learning Houdini.

https://houdini.how/

9). Resumake

A very easy to use and completely free online tool for making a professional tech resume.

https://resumake.io/

10). Color.review

A super useful tool for adjusting the color accessibility of your project.

https://color.review/

11). Webdevscom

An open-source web developers community. An awesome collection of design resources, app ideas, developer portfolios, public APIs, youtube channels, etc.

https://webdevscom.github.io/

12). Interviews.school

An interview preparation guide for software engineers.

https://interviews.school/

13). Web Desktops

A very funny and inspiring collection of websites that resemble desktop graphical user interfaces. A place to be spaced out.

https://simone.computer/#/webdesktops

14). Tint & Shade Generator

A useful tool for producing tints and shades of a given hex color in 10% increments.

https://maketintsandshades.com/

15). Frontend Horse

A newsletter for frontend developers.

https://frontend.horse/

P.S. Please feel free to complete the list by replying to this post. Which web dev resources do you like best?

P.P.S. Also, please, reply if you would like me to continue with posts like this, or, otherwise, just tell me that it was pretty enough 🙂.

My Site

GitHub

[15] Top 15 Web Development Blogs in 2020

2020-12-12T00:00:00Z

Today I will continue my Top 15 series with another post. This time I would like to share with you my personal top 15 of the most inspiring developer blogs. Some members of the list are represented only as Twitter accounts, and some of them have personal sites and blogs. Anyway, I believe that every person on this list deserves your attention.

1). Dan Abramov

A software engineer at Facebook, working on the React team, co-author of Redux, and Create React App.

https://overreacted.io/

https://justjavascript.com/

https://twitter.com/dan_abramov

2). Sarah Dresner

A speaker, developer at Netlify, Vue core team member, and Staff Writer at CSS-Tricks. Definitely recommend checking her courses on Frontend Masters.

https://sarah.dev/

https://twitter.com/sarah_edo

3). Lea Verou

Front end web developer. Author of CSS Secrets.

https://lea.verou.me/

https://twitter.com/LeaVerou

4). Quincy Larson

The founder of freeCodeCamp.org.

https://twitter.com/ossia

5). Flavio Copes

A passionate software engineer, author of many books and tutorials.

https://flaviocopes.com/

https://twitter.com/flaviocopes

6). Wes Bos

A well known full stack developer, co-host of Syntax podcast, and an author of amazing courses. Creator of uses.tech project.

https://wesbos.com/blog

https://twitter.com/wesbos

7). Brian Holt

A software engineer, working in Microsoft (VS Code team). A charismatic author of the Fronted Masters's courses that I like the most.

https://twitter.com/holtbt

8). Ahmad Shadeed

Design-oriented Front End Developer. An author of Debugging CSS.

https://ishadeed.com/

https://twitter.com/shadeed9

9). Kyle Simpson

The author of You Don't Know JS book series. Kyle has a couple of great courses on Frontend Masters as well.

https://me.getify.com/

https://twitter.com/getify

10). Chris Coyier

Created CSS-Tricks - one of the most useful and inspiring platforms with web dev related articles. Co-founder of CodePen.

https://chriscoyier.net/blog/

https://twitter.com/chriscoyier

11). Jason Lengstorf

Enthusiastic web developer at Netlify. A host of Learn With Jason live show. Jason is also a teacher on Frontend Masters.

https://www.jason.af/

https://twitter.com/jlengstorf

12). Amelia Wattenberger

The author of the Fullstack D3 book and a very beautiful website. Shares her thoughts.

https://wattenberger.com/

https://twitter.com/wattenberger

13). Jenn Schiffer

Jenn Schiffer is a web app developer, pixel artist, and tech satirist.

https://livelaugh.blog/

https://jennmoney.biz/

https://twitter.com/jennschiffer

14). Katy DeCorah

Katy is a frontend engineer and author of an inspiring all-around blog.

https://katydecorah.com/

https://twitter.com/katydecorah

15). Vadim Makeev

Vadim is the founder of Web Standards, the first Russian front end community. The host of the Russian speaking Web Standards podcast.

https://twitter.com/pepelsbey_

Please feel free to complete the list by replying to this post. Which blogs do you like best?

My Site

GitHub

[14] The 15 Best Developer Resources in 2020 - Part I

2020-12-05T00:00:00Z

Today I will continue my Top 15 series with a brief overview of the best developer resources that I use daily. It is worth saying that there are a lot of great resources that are left behind the brackets. Dev.to, Medium, Stack Overflow, GitHub, and many more obvious ones.

1). FreeCodeCamp

One of the most inspiring and beginner-friendly open-source developer communities.

https://www.freecodecamp.org/news

2). CSS Tricks

A website about websites. Daily articles about web development.

https://css-tricks.com/

3). Google Fonts

An extremely complete collection of fonts.

https://fonts.google.com/

4). Adobe Color

Create color palettes and browse thousands of color combinations.

https://color.adobe.com/create/color-wheel

5). Oh Shit, Git!?!

Will help you deal with the git even in the strangest situations.

https://ohshitgit.com/

6). Git Cheatsheet

An interactive and easily read git cheatsheet.

http://ndpsoftware.com/git-cheatsheet.html

7). Repl

A very simple, but powerful online IDE.

https://repl.it/

8). DevDocs

Free documentation database for all kinds of developers.

https://devdocs.io/

9). Uses.Tech

A list of developer setups, gear, software, and configs.

https://uses.tech/

10). Web Skills

A visual overview of useful skills to learn as a web developer.

https://andreasbm.github.io/web-skills/

11). Roadmap.sh

Frontend Developer Roadmap.

https://roadmap.sh/frontend

12). Explainshell

This is an online tool that visually explains each part of a shell command.

https://explainshell.com/

13). Hacker News

A well-known minimalistic IT news aggregator.

https://news.ycombinator.com/

14). Hacker Noon

A technology publishing website that focuses on reporting the latest news related to software development, etc.

https://hackernoon.com/

15). Smashing Magazine

An online magazine for designers and web developers.

https://www.smashingmagazine.com/

My Site

GitHub

https://apps.apple.com/us/app/calendars-5-by-readdle/id697927927

Mobile

Free / Paid

15). Tweetbot

I am an old user of Tweetbot, the first time I heard about it in 2011. I still did not found anything better.

https://tapbots.com/tweetbot/mac/

Mobile

Paid

My Site

GitHub

[12] Top 15 Resources to Learn Coding in 2020

2020-11-16T00:00:00Z

1). Frontend Masters

React, Vue, Angular, Svelte, Gatsby, Next, JS, Node, TypeScript, StoryBook, you name it.

The best option to start - Complete Intro to Web Development.

https://frontendmasters.com/

Free/Paid

2). FreeCodeCamp

FreeCodeCamp is definitely the best completely free online resource for learning to code.

The best option to start - Responsive Web Design Certification.

https://www.freecodecamp.org/learn

Free

3). Coursera

A huge amount of courses from the greatest universities around the world.

The best option to start - Internet History, Technology, and Security (University of Michigan).

https://www.coursera.org/

Free/Paid

4). MDN

One of the greatest and well known open source communities. Don't forget to check the Firefox Browser Developer Edition.

The best option to start - Learn web development.

https://developer.mozilla.org/

Free

5). w3schools

An extremely understandable and intelligible educational website for learning web technologies.

The best option to start - Learn HTML.

https://www.w3schools.com/

Free

6). Udemy

A broad selection of IT courses on a variety of topics, from Web Dev to Hardware.

The best option to start - any course by Maximilian Schwarzmüller.

https://www.udemy.com/

Paid

7). EggHead

The short but capacious courses. Mainly on the topics of web programming and frontend.

GitHub

[11] PHP and the Latest News from the Front Line

2020-10-29T00:00:00Z

Literally, the other day, I finished a university course that was called Web and Game technologies basics. It included a brief introduction of the PHP, MariaDB, Linux (Bash), and some server-side interactions as well.

To be honest, I had huge prejudices about PHP as a modern programming language. So, I was surprised when I heard what language was chosen for this course. For some reason, PHP always reminded me of times when I tried to make simple sites while going to school in early 2000. Anyway, it turned out, that in some sense, PHP is really an obsolete language with a strange syntax. But, on the other hand, it still has a large amount of code written on it and remains in demand.

The general assignment on the course was an implementation of a website, with which the user can view the price catalog of a local liquor store. It was also necessary that the user can be able to filter the search results in a few different ways. It was a difficult enough assignment for a beginner like me, especially given that I haven't made anything with PHP before.

To complete the assignment, I had to create a container on the school server. Install there the PHP support, PHPMyAdmin, and database (MariaDB) as well as the webserver (Lighttpd). After that, I had to turn the given .csv file with the catalog into a database. Finally, when I had a working database with the right data, I could build the website using PHP. At last, I got the result, which meets most of the requirements, but nevertheless has certain flaws.

On the image below you can see an example of the interface.

P.S.

As you might know, Hacktoberfest is almost over. So, you understand what I mean (t-shirt).

Site

GitHub

[10] Hacktoberfest, Exploring The Caverns of GitHub and Free T-Shirts

2020-10-13T00:00:00Z

As you might know, at this time, there is an event called Hacktoberfest. Hacktoberfest is a month-long (October 1 - 31) open-source virtual festival organized by companies such as DigitalOcean, Intel, and Dev. It is quite a popular event among aspiring developers and all kinds of people who are interested in contributing to the open-source. Taking part is easy enough. After registration, you only need to submit four pull requests to any GitHub repo with the hacktoberfest topic or label. People that are maintaining repos, in turn, can create issues with such labels and wait for the contributors.

Pull requests

I did both. First and foremost, I started by figuring out what the heck is a pull request. I mean, I used GitHub a lot before, but somehow it went past me. I was familiar with pushing, pulling, commits, repos, branches, and so on, but I have never used pull requests in my projects. Anyway, it turned out that it is quite a simple procedure. So, after some digging of information, I have already made my first pull request. You can see it in the picture below.

My pull requests may not be the most useful in the world, but I tried my best. The primary purpose was to try new technologies and to learn new skills. Among other things, I implemented a dropdown menu button with the React Bootstrap library. Later I have also added some information about using data types in JS to the JavaScript Interview Cheatsheet repository.

Issues

At this point, I realized that I have no idea what is the issue, so I started to think in that direction. After all, I opened one issue on each of my two most active repositories - React website and Todo App built with React Native. You can see the essence of the issues in the pictures below. I was pleasantly surprised by the responsiveness of the community, and I'm very grateful to the people who helped me with the issues.

Site

GitHub

[9] A Brand New Website and a Lot of React

2020-09-29T00:00:00Z

So, as it may be understood from the title of this post, I have made a new website for my projects. This is not exactly a portfolio or a CV, but something like that. There I put everything that I do during my studies at the university and the self-studies.

v. 1 - Skeleton

The first version of the website was made almost a year ago as a web programming course assignment. That time I used Skeleton, which is a very simple responsive CSS boilerplate, not so powerful as Bootstrap, but much easier to use. This version of the site was not so fancy, and, in a big way, just a "copy/paste" project from different tutorials.

v. 2 - HTML, CSS, JS

After a few months, I realized that I want to make a more "stylish" website, for which I will not be so ashamed and even can show to someone. That time I decided not to use any kind of frameworks, and go with just HTML, CSS, and JS. I used a flexbox for styling components and implemented some more complicated things (e.g., glitching logo) if you compare it to the previous version. Anyway, the result turned out not to be so impressive.

v. 3 - React

Finally, about two weeks ago, I started to work on the current version of the website. I decided not to rework the previous versions, but to make it all over again from the scratch. This time I took React as a web framework. I like React for the possibility to write JSX, the hooks system, and the variety of third-party libraries.

At the moment, I use the VS Code as an editor, and I am also using several add-ons for my VS Code setup, e.g., Prettier, ESLint, Bracket Pair Colorizer, etc. I tried many color themes as well but barely could use nothing other but standard Dark+.

I divided my project into many parts, which is quite typical for React development. There are all the components that are placed on the main App.js component:

├── Board.js
├── ChipCloud.js
├── Drop.js
├── Dropdown.js
├── Footer.js
├── Grid.js
├── GridItem.js
├── Menu.js
├── Screens.js
├── Stats.js
├── Switch.js
├── Timeline.js
└── Toggle.js

In this project, I noticed that grid and flexbox could work in symbiosis, so I used both. As third-party libraries, I used Material - UI, Ant Design, and React Bootstrap. Mostly it is very convenient for styling the drop-down menu, buttons, and so on. This time it was also a bit difficult to make all media queries since the site comprises a lot of components. So it took some amount of time to realize that the media queries for Safari could be done like that:

@media not all and (min-resolution: 0.001dpcm) {
  @media only screen and (max-width: 1900px) {
  }
}

The website (29.09.20)

Website source code on GitHub

[8] The University's Fall Semester & Mastering Zsh

2020-09-13T00:00:00Z

Recently my second year at the University started, and I am happy to have some well-known routine in my study life. Nevertheless, in the first part of autumn, I will have only two courses: Orientation to Sustainability Thinking (2 ECTS), which is more about the sustainable picture in general and Technical Mathematics (3 ECTS), which is just a regular theoretical course in math. The first one is completely independent, and on my part, is almost done and is waiting for evaluation. The math course is a regular lecture course and will run until the end of the year. Since the end of September, I will also start another University module dedicated to web development. I am looking forward to starting this particular module since web development is what interests me most at the moment.

By the way, I keep watching some FrontendMasters courses, and recently I went through the Complete Intro to Linux and the Command-Line named course by Brian Holt. This course was a lot of fun, and Brian is definitely one of the best teachers I have ever seen. I learned a lot about Zsh and Bash commands, such as less, Touch file{1..10..2}.txt, rm -rf, ls -lsah, kill -9, whoami, ps aux, wget, curl, and so on. I refreshed my knowledge about using sudo and manipulating user permissions. There was as well a whole part of the course related to the Vim and Nano, and yes, now I even know how to get out of Vim. I have also learned to create and use my own simple shell scripts, like:

read -p "Enter a folder name: " FOLDER

DESTINATION=~/Desktop/$FOLDER

read -p "Enter a file prefix: " FILE_PREFIX

mkdir -p $DESTINATION
cd $DESTINATION
touch ${FILE_PREFIX}{1..10}.txt
echo done

I have also made some changes to the basic Zsh settings on my terminal. For example, I installed the oh-my-zsh framework, which is just outstanding. It allows you to simply add plugins to Zsh. There is my list of plugins: plugins=(git history osx web-search). I have also made some changes to the .zshrc file, which allows the terminal to randomly choose one of my favorite Zsh themes on every boot (spaceship, robbyrussell, amuse, avit, norm, pygmalion, sunrise, wezm, ys).

Blog: https://create-react-app.com/

Site: https://proj.create-react-app.com/

Site (mirror on github): https://villivald.github.io/proj/

[7] React Native and my current state of affairs

2020-08-22T00:00:00Z

In the last few weeks, I was a little tired of learning React and JavaScript. Therefore, I decided to try some new things. I do not know if it is a negative impact of that notorious "JavaScript fatigue". In any case, there are also good sides. At least I widened my horizons a bit by learning new technologies.

First, I took a Design for Developers course by Sarah Drasner from the FrontendMasters. It gave me some inspiration to implement alternative approaches in the design of web applications. I have also refreshed my knowledge of Grid and CSS in general.

Then I had a brief (very brief) look at the Svelte course by Rich Harris himself. I find Svelte to be a very promising and intriguing framework, and I will definitely go back to learn it when I will have more time.

Further, I was interested in React Native because of its flexibility and the option to develop both Android and iOS applications at the same time. That way, I started with a React Native course by Kadi Kraman. This course was good enough for starting with React Native, but on the other hand, it was too short and left me with a lot of questions and concerns. For that reason, I bought an Udemy React Native - The Practical Guide course by Maximilian Schwarzmüller, which is much more complete and comprehensive.

At the moment, I have passed about 20% of the course (it is 30+ hours long). I also made my first React Native App, which is a to-do app, just like my last React project. I will try to develop it during the course, and my goal would be to make a simple and useful application with a clear design. Currently, the code of the project can be found on my GitHub.

Blog: https://create-react-app.com/

Site: https://proj.create-react-app.com/

Site (mirror on github): https://villivald.github.io/proj/

[6] JavaScript - Map, Filter & Reduce

2020-07-28T00:00:00Z

I am still focusing on learning JavaScript and especially different JavaScript methods while waiting for the next academic year to begin. The first courses are due to start in early September, so it’s not so long to wait anymore. I hope that it will boost my productivity since now I feel extremely unfocused and a bit confused in the abundance of information.

Anyway, there is still certain progress in my skills. Now I will also probably write more often since I have an idea for a cycle of posts about JavaScript. The first post of this cycle was published last week and was related to the topic of JS spread operator. In this post, I will go over some significant JavaScript methods such as map, filter, and reduce.

Map

In this simple example of using a map(), I am creating a function fn that takes two arguments - name and id. Then I pass some names to the function and convert the string to the desired form by using the map method.

function fn(name, id) {
    console.log(id + 1, ": ", name)
}

["John", "Marie"].map(fn)

/*
1: John
2: Marie
*/

Map() is also suitable for some other use cases. In the code below, I am using it to calculate the length of the elements.

var names = ["John", "Tom", "Tim"]

var lengths = names.map(function (name) {
    return name.length
})

console.log(lengths)

// [ 4, 3, 3 ]

In the last piece of code, I transform an array of numbers using the map and the sqrt methods (square root).

var numbers = [9, 25, 49, 100]
var x = numbers.map(Math.sqrt)

console.log(x)

// [ 3, 5, 7, 10 ]

Filter

A filter() is another helpful JavaScript method. It allows us to literally filter arrays (or in this particular case - an array of objects). In the example below, I created a function that returns an array of users that are logged into our imaginary system.

function isLoggedIn(user) {
    return user.session != null
}
console.log([
    {userId: 42, session: "123"},
    {userId: 12},
    {userId: 58,session: "3333"}
].filter(isLoggedIn))

// [ { userId: 42, session: '123' }, { userId: 58, session: '3333' } ]

In the next example, I am using a filter() for sorting the elements of an array. The function returns an array of positive numbers.

var array = [0, 11, -7, -4, 2, 68];

var positive = array.filter(function (number) {
    return number > 0;
});

console.log(positive); // 11, 2, 68

Reduce

The reduce method is a little more complex. In a few words, it allows us to calculate a single value based on the entire array. In the first example, I created a function addToRecord that combines the information given in the arrays.

function addToRecord(record, [key, value]) {
    return {
        ...record,
        [key.toUpperCase()]: value
    }
}

console.log(
    [
        ["name", "John"],
        ["age", 30],
        ["isLoggedIn", true]
    ].reduce(addToRecord, {}))

// { NAME: 'John', AGE: 30, ISLOGGEDIN: true }

And here we get a short implementation of factorial (5! = 1 × 2 × 3 × 4 × 5 = 120) using the reduce method.

let arr = [1, 2, 3, 4, 5]

let result = arr.reduce((res, current) => res * current)

console.log(result)

// 120

https://create-react-app.com/

https://proj.create-react-app.com/

https://villivald.github.io/proj/

[5] JavaScript - Spread operator

2020-07-24T00:00:00Z

In the last couple of days, I was trying to intensively learn JavaScript. So, in the few next posts will be some thoughts about useful functions, methods, and syntax features. Today I will start with the javascript spread operator.

Spread syntax

The javascript spread operator could be a pretty useful tool that saves space and improves the syntax. In the first example below, I am using it for passing args array to the newArgs on line 5. Next, on lines 7 and 8, I am passing those arrays to fn function.

fn = (x, y, z, a = 4, b = 5, c = 6) => {
  console.log(x, y, z, a, b, c)
 }
var args = [1, 2, 3]
var newArgs = [...args, "four", "five", "six"] // [1, 2, 3, four, five, six]

fn(...args) // 1 2 3 4 5 6
fn(...newArgs) // 1 2 3 four five six

The next example is slightly different. Here I am creating a function, which uses …args as a parameter. Inside the function, we have a for-loop that iterates through the list of arguments. In principle, there can be as many arguments as you need. Finally, when the function is being called, it takes all arguments that have been given, 1, 2, or 100, etc.

sumAll = (...args) => {
    let sum = 0
    for (let arg of args) {
        sum += arg
    }
    console.log(sum)
}

sumAll(1) // 1
sumAll(1, 2) // 3
sumAll(1, 2, 3) // 6

We could also use the spread operator for something like this:

Iteration through the string.

const str = "Hello"
var letters = [...str]
console.log(letters) // [ 'H', 'e', 'l', 'l', 'o' ]

Dividing an array into a number (z) and an object (w), which is, in fact, another array. (More about JS Data Types here).

var [w, ...z] = [1, 2, 3]

console.log(w, z) // 1 [2, 3]

console.log(typeof(w)) // number
console.log(Array.isArray(w)) // false

console.log(z[1]) // 3
console.log(typeof(z)) // object
console.log(Array.isArray(w)) // true

Or even iterating through the object:

var object = {
    a: 1,
    b: 2,
    c: 3,
    *[Symbol.iterator]() {
        for (let key of Object.keys(this)) {
            yield this[key]
        }
    }
}

console.log(...object) // 1 2 3
console.log(typeof(object.a)) // number

The latest example can be also done in a following way. But in this case, it returns an array:

var object = {
    a: 1,
    b: 2,
    c: 3
}

var x = Object.values(object)
console.log(x); // [1, 2, 3]
console.log(typeof(x)) // object

https://create-react-app.com/

https://proj.create-react-app.com/

https://villivald.github.io/proj/

[4] React - Todo app

2020-07-15T00:00:00Z

Finally, I have some time to write about my experience with React. When I am thinking about all the things I have learned over the last year, React seems to be the most tricky part of web development so far. I watched a bunch of videos and read a lot of everything. And even so, I don’t feel particularly confident in dealing with it.

I guess that the reason is not the complexity of React as a concept, but rather my insufficient understanding of the basics of JavaScript and things related to it. Learning to code turned out to be, at the same time, surprisingly inspiring but also difficult and multilayered. It also differs a lot from my entire previous student experience.

Anyway, in the last few days, I have been working on a React Todo application. As you can see, the functionality of the app is quite limited at the moment. Right now it is only possible to create new tasks, mark tasks as done, or delete them. Nevertheless, I already have on my mind a few options for future development. First of all, I would like to add a possibility to edit tasks and restore them from the trash. Then, there could be some sort of calendar integration, or, at least, the ability to schedule tasks by days. Express could also be added in the future since now there is only local storage for storing information.

The code of an application is available at my GitHub.

The basic configuration of my project was as follows:

npx create-react-app APP_NAME

npm i -D prettier
--> .prettierrc --> {}

npm install -D eslint eslint-config-prettier
--> .eslintrc.json -->
{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "no-console": 1,
    "react-hooks/rules-of-hooks": 2,
    "react-hooks/exhaustive-deps": 1
  },
  "parser": "babel-eslint",
  "plugins": ["react", "import", "jsx-a11y", "react-hooks"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

--> .gitignore -->
node_modules/
.DS_Store
.cache/
dist/
coverage/
.env

npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

npm i -D eslint-plugin-react-hooks

npm install -D babel-eslint @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/preset-react

I also made some minor changes to my website. There are screenshot and links below:

https://create-react-app.com/

https://proj.create-react-app.com/

https://villivald.github.io/proj/

[3] My Studies at the University

2020-07-04T00:00:00Z

As I mentioned in one of my previous posts, I am currently studying IT at the LAB University of Applied Sciences (Finland, Lahti). The first year of my studies ended about one month ago, and in the coming fall, I will continue with the second one.

During the first year, we had basically a lot of core studies, like English, math, and physics, which is, I think, quite common. Fortunately, we also had some courses on more IT-related topics: web development (HTML, CSS & JS), basics of software engineering (Python, SQL), servers, virtualization, etc.

Anyway, after the first year, we will need to choose our study path more precisely. So, as you can see from the picture below, every student has a lot of options to choose from. The point is to choose 7 modules (except the lower module and also the thesis and internship). Each module worth 15 credits and to graduate you need to complete 240 credits in four years. At the moment, I have 90 credits, so I guess it is pretty realistic.

I tagged some modules, about which I decided to take them: Web and game dev, Software engineering, Web services, and Mobile and game dev. There are also four modules about which I’m not sure yet. You can choose from a lot of inspiring subjects, for example, data analysis and machine learning. At the same time, I am trying to concentrate more on web development related things. So, maybe it is not a very productive strategy to go for too many things at the same time. In any case, I still have time to think about it.

https://proj.create-react-app.com/

https://villivald.github.io/proj/

[2] JS Minesweeper

2020-07-02T00:00:00Z

Well, it's been over two weeks since the start of my vacation. Before it started, I thought I was going to write here more often, but there were many other things and so on. Due to the coronavirus situation, it was almost impossible to travel anywhere except within the country. So we had a couple of car trips inside Finland (Tampere, Lahti, Järvenpää, Kirkkonummi, etc).

Anyway, my self-learning continues and I could say that I'm getting more familiar with JavaScript and React. There will be a separate post fully dedicated to React in a few days (I hope).

But let's get back to the point of this post. In the last few days, I've been working on a minor JS project. I was trying to make a simple JS Minesweeper game. So, there is the result. At the moment, the game works to some extent, but I guess it still needs a couple of improvements.

I noticed a few lags, especially this applies to the corners of the map where it occasionally behaves weirdly. In the near future, I will try to fix them and, I suppose, I will also make some changes to CSS as well.

You can try the game (and see my other projects) by clicking one of the links below:

https://villivald.github.io/proj/

https://proj.create-react-app.com/

P.S. You can also find the code at my GitHub.

P.P.S In the current version of the game the winning is possible, but let's say, quite unlikely 🙃.

[1] JavaScript Data Types

2020-06-15T00:00:00Z

In addition to my main studies, I constantly watch FrontendMasters courses. Those courses are mostly about JavaScript, HTML, CSS, web development in general and things like that. So in this post, I'll share some considerations about JavaScript data types.

Well, at first, there are some basic data types, like strings, numbers and booleans (true vs false):

console.log(typeof "Test")
→ string

console.log(typeof 8)
→ number

console.log(typeof true)
→ boolean

Then, in the following example, we can see the difference between undefined and undeclared variables. The difference is obvious enough, but at the same time, JavaScript takes both cases as undefined for some reason.

let x
console.log(typeof x)
→ undefined

console.log(typeof y)
→ undefined (hmm... undefined or maybe undeclared?)

Next, there is a group of quite different things such as an object, array and null that are in practice perceived equally.

let x = {}
console.log(typeof x)
→ object

let list = [1, 2, 3]
console.log(typeof list)
→ object (Array is also an object in JS)

I guess that the better way to differentiate regular objects from arrays is to use Array.isArray.

console.log(typeof null)
→ object (Wait... null is an object? 🧐 It seems to be so.)

There were a couple of completely new things to me as well, such as symbol and bigint. They are definitely not the things I used a lot, so I can't say anything special about them.

console.log(typeof Symbol("&"))
→ symbol

console.log(typeof 1n || BigInt(42))
→ bigint

Of course, there is also a function, which data type is a function. Yes, it was easy this time.

let w = (name) => { console.log(`Hi ${name}`) }
console.log(typeof w)
→ function

And finally, there are also several examples not directly related to JavaScript data types, but which seemed interesting to me.

console.log(Number("Test"))
→ NaN

let zero = -0
console.log(Object.is(zero, 0))
→ false
console.log(Object.is(zero, -0))
→ true

https://create-react-app.com/

https://proj.create-react-app.com/

[0] Git

2020-06-05T00:00:00Z

At the moment I am especially interested in Git and have recently passed two courses devoted to this technology. One course was from the University of Tampere, which I’m going to include in my degree. And the other one is a course called Git In-depth from Frontend Masters.

Actually, both courses were quite impressive, and I have learned a lot about Git. So, there are several points I found out and which I found particularly important as my personal top-8:

1). A remote repository

Adding and deleting:

2). Branches

With switching to a new branch and without it:

3). Stashing

There is a simple example of using stashes below. It is quite handy when you want to save some changes but do not want to commit it yet.

4). Tags are not something I use a lot, but anyway I think they could be useful for some occasions.

You should use git push --tags (or git push tag_name) to push tags to a remote repository.

5). Git merge. Fast-forwarding by default vs no fast-forward.

git merge exercise3:

I got the difference between git merge some_branch and git merge --no-ff some_branch. It is becoming obvious when you use git log --graph.

git merge --no-ff exercise3:

6). Git log - Grep, filter, since

There are some more "advanced" git features, like grep, filter and since:

7). Git log - no-pager and oneline

8). Git commit --amend

Amend is a very useful commit "editing" tool. Actually, it's not exactly editing, but as we can see from the sha of commits - c8a341a vs dcbdc49, amend creates a new commit from the last one.

P.S.

Finally, I realized that git pull = git fetch + git merge. Amen.

[-1] University

2020-05-29T00:00:00Z

Since my previous post was more about my background, then in this one I will talk about my current situation. At the moment I am studying at the LAB University of Applied Sciences which is located in Lahti, Finland. And yes, I’m learning information technology.

Lahti is located about a hundred kilometers from Helsinki, where I live at the moment. And it is not the biggest city, even by the standards of Finland. Anyway, they have quite a good university — https://lab.fi/en. And more importantly, they also have online degree program options, one of which I chose. So I rarely have to physically go to university. It’s very convenient if you need to combine work and study, and for sure it is also a brilliant choice for an introvert person like me.

So, I started studying about a year ago, in August 2019. The official name of my degree program is an Information Technology. And after graduating I become a Bachelor of Engineering.

The principal area of programming that I’m most interested in is web development. HTML, CSS, and JavaScript are the things that are inspiring me right now. In an ideal situation, I would like to develop in that direction and also find a job in that field.

Okay, it’s probably time to finish with the introduction and telling about myself. In the next posts, I will be more precise about IT-related topics.

P.S.

There below is a website with my minor newbie projects. I made most of them as a part of the courses (except the site itself), so there’s nothing particularly impressive in there so far. Even so, I will try to frequently update this site as I improve my skills.

https://proj.create-react-app.com/

[-2] Intro

2020-05-23T00:00:00Z

Hello to everyone whoever reads this post. So, let’s start with a brief introduction.

My story relating to this blog started in 2015. This year I graduated from the University of Helsinki, where I studied Russian literature as a major. Literature was a pretty natural choice for me since I always adored reading and wanted to do literature research professionally. My choice fell exactly on Russian literature because I am Russian and despite the fact that I lived in Finland for most of my life I found myself closest to the world of Russian culture.

Study at university felt pretty awesome, and I felt like it was the right choice for me. Ok, so, finally, in 2015 I wrote my Masters’ Thesis about Russian émigré literature in France and that’s where it ended. Anyway, after graduation, I realized quickly enough that the Master of Arts degree is nothing to do with the real world. Especially if you study something like literature. When you get to university right after school you are not probably thinking about your future job, you just want to do what you like the best. Ok, maybe you were lucky more (or you were smarter than me, which is quite likely) but I thought exactly like that.

As you probably already understood, my university degree did not allow me to find a job in my own field. Mostly because such a field just doesn’t exist in Finland. After realizing that I started thinking about what I should do in this situation. At this point, I decided that it is time to find a “real job”. I sent my CV to all possible places and got ton of rejections, when one day in 2016 an ad caught my eye: “Tram driver, HSL Helsinki”.

Since my impressive career as a tram driver is not the topic of this blog, let’s move to 2019 straight away. I guess, later I will write something also about working as a tram driver. Anyway, not today.

So, 2019 was the year I decided to change the sector in which I was working. Because of this, I thought it was worth going to study again. My choice fell on information technology because in addition to Russian literature I have also always been interested in computers and coding.

In my future posts, I will talk about my studies at university as well as about my self-studies. I will also try to write about my own small projects and other things like that. HTML, CSS, JS, React, driving downtown during rush hour, you name it. Stay tuned and thank you for reading this.