DEV Community: MV

[31] 100 Days of Swift UI - Days [1-10]

MV — Thu, 15 Feb 2024 19:41:41 +0000

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.

Original post @ create-react-app.com

Site https://villivald.com/
GitHub https://github.com/villivald
Mastodon https://notacult.social/@villivald

[30] Accepting defeat and plans for the future

MV — Mon, 18 Sep 2023 19:42:34 +0000

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.

Original post @ create-react-app.com

Site https://villivald.com/
GitHub https://github.com/villivald
Mastodon https://notacult.social/@villivald

[29] How I got my first job in IT

MV — Mon, 04 Apr 2022 14:19:17 +0000

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 🆓

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

[28] Top 10 Web Dev Tools in 2021

MV — Sun, 26 Dec 2021 09:00:57 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

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

MV — Tue, 30 Nov 2021 10:09:53 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

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

MV — Tue, 19 Oct 2021 05:14:07 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

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

MV — Fri, 17 Sep 2021 07:08:01 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

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

MV — Wed, 18 Aug 2021 01:48:30 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

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

MV — Mon, 12 Jul 2021 08:31:29 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog

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

MV — Wed, 16 Jun 2021 06:28:18 +0000

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/

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog
Hashnode https://proj.ninja

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

MV — Mon, 10 May 2021 09:35:01 +0000

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/

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

Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog
Hashnode https://proj.ninja

[20] Top 15 Most Valuable GitHub Repos in 2021

MV — Wed, 28 Apr 2021 08:36:41 +0000

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.

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

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

Original post @ create-react-app.com

My Site https://villivald.com/

GitHub https://github.com/villivald