DEV Community: Jaakko

Speed up your development with Git aliases 🚀

Jaakko — Sun, 28 Nov 2021 19:02:34 +0000

Git aliases are a powerful workflow tool that creates shortcuts to frequently used Git commands. Using Git aliases will make you a faster and more efficient developer.

Creating aliases

Use the command below to create aliases, replacing <alias> with the name of the alias and <command> with the command to be aliased:

Alternatively, you can edit the global git configuration file and add all aliases at once, by opening the git configuration file by running git config --global -e in your terminal.

Useful aliases

I'm @bjakyt on Twitter. Follow me for more!

Responsive typography in one line

Jaakko — Sat, 27 Nov 2021 20:22:56 +0000

The CSS clamp() function is a small and maybe a bit unknown function, but I think it's pretty awesome. It works by clamping a value between an upper and lower range.

It can be used for various things such as border size or padding values, but so far I have only used it for font sizes.

The usual way to create fluid typography involves playing around with different calculations around the viewport size and for some reason, I have never liked doing it that way. The clamp() however, has nice readability and it's easy to control.

Here's a small snippet of using clamp():

As you can see, it takes three values. Those values are:

A minimum value
A preferred value
A maximum value

In the snippet above, I set the minimum size as 1.75rem and the maximum size as 3rem for the h1. For h2 we have 1.2rem and 1.4rem, and the h3 has 1rem and 1.5rem.

Here's the result, when used in the front page of dev.to:

Mobile:

Desktop:

Cool and easy, huh? No need for complex calculations or media queries.

You can play around with the middle value (preferred size), as it controls the fluidity. You can use vw units that allow the font to scale with the size of the display but stay within your ranges.

Follow me on Twitter for more: https://twitter.com/bjakyt

How I structure my React.js projects

Jaakko — Sat, 27 Nov 2021 01:54:00 +0000

Structuring React applications into files and folders is an opinionated topic, because there is no right or wrong way to do it. I decided to share how I have structured my projects lately.

Warning: Highly opinionated!

Let's get started.

Single file

React projects usually start with an src/ folder and one src/App.tsx file with an App component.

At some point, your app has more features, more lines, and you will need to make smaller standalone components:

Sometimes it's OK to have multiple components in one file, especially if those components are tightly coupled to the main component. Often it's better to use multiple files because eventually, that one file is not sufficient anymore.

Multiple files

Instead of having all our code in one file, we can split these components into multiple files. At this point, as our project is still quite small, I would do it like this:

In the above example, List component exports only List, but it also has the ListItem component, which is not exported.

If you want to take it to the next level, you can start using directories instead of files. I would also extract the ListItem from List and make it its own standalone component inside src/components/List/partials subdirectory:

From now on, I would only use /components directory for reusable components.

Folder separation

Next, we separate features from components. Let's say we need to create an useUser hook, so we'll create a dedicated hooks directory and put it in there:

That hooks folder is meant for reusable hooks only. If you have a hook that is used by one component only, it should remain in the component's own file (or directory).

That same principle applies to many other things as well. For example, if we need to create a reusable service - we'll create a services directory and put our service in there:

Separated views

When we create separate directories for everything that's reusable and keep the non-reusable stuff only where it is used, we've come a long way.

Lastly, I want to create a directory called views. Those views are basically a representation of the url. For example, a directory User could mean https://<url>/user and so on.

These views can of course import reusable services or components, but they also have their own subdirectories for non-reusable stuff.

Here's an example, how my project structure could look like:

Follow on Twitter for more: https://twitter.com/bjakyt

100 design resources for developers

Jaakko — Fri, 26 Nov 2021 11:15:19 +0000

Colors

Icons

Free illustrations

Freemium illustrations

Online design tools

Typography

Patterns

Learn design

Inspiration

Miscellaneous

Which technologies would you choose for your next web project?

Jaakko — Thu, 25 Nov 2021 19:08:33 +0000

If you were building an application consisting of a user interface and an API, what technology choices would you make and why?

I'll go first.

1. TypeScript
I'd choose TypeScript because it's worth it. If you haven't used TypeScript before, you may have a temporary productivity loss, but in the end, it's worth it. I haven't met anyone who would go back to plain JavaScript, after learning TypeScript.

2. React & Next.js

React is a battle-tested library for building UI's. It has good documentation and a large community. There are so many components already implemented and ready to use, so you don't have to build everything yourself.

Next.js has been around for only a couple of years, but it is already one of the most popular tools in the React ecosystem. Next.js offers you so much out of the box. SSR, file-system-based routing, has the potential to improve metrics such as time-to-first-draw (TTFD) and so much more...

3. PostgreSQL or MongoDB
In general, you should choose your database based on the structure of your data. However, I think either PostgreSQL or MongoDB is a great place to start.

If I'd end up using PostgreSQL, I would choose Prisma as an ORM. Their API is very intuitive to use, it has hassle-free migrations, and they even have a VSCode extension!

4. Zod

For input validation, I would probably go with Zod. Again, it goes so well with TypeScript. It was built with DX in mind, it doesn't have any dependencies, and it's lightweight (only 8kb zipped + minified).

5. Stitches or TailwindCSS

For styling, I would choose Stitches or TailwindCSS.
Stitches is a styling solution focusing on component architecture and developer experience. It has similarities with styled-components, but it also has a first-class variant API and a nice design system config. It's fully typed and lightweight (less than 5kb).

Another possible solution would be Tailwind. As a low-level CSS framework, it has become one of my preferred styling solutions. It has increased my productivity and made me more consistent. Even though I have liked using it, it doesn't mean that it is the perfect solution for every project.

6. Supabase

For database, authentication, and storage, I would most likely use Supabase. For those who don't know what Supabase is: Supabase is a set of tools that help developers build projects faster by automatically handling a lot of the behind-the-scenes work.

Create a project, and Supabase will give you a Postgres database, an API for interacting with the database, a user authentication system that plays well with common login providers (such as Facebook, Twitter, etc), a storage system for handling uploads, and a pretty UI for managing this all. It takes off a bunch of work you'd need to do otherwise - so you can focus on building your product.

7. Hosting: Vercel or Netlify
8. Logging and error tracking: Sentry or Logrocket
9. Testing: Jest, React Testing Library, Jest-axe

Comment below, how you would build your next project :)

Follow on Twitter for more: https://twitter.com/bjakyt

Free Next.js landing page template

Jaakko — Thu, 25 Feb 2021 10:37:35 +0000

React and Next.js resources and landing page templates can be difficult to find on the internet, especially the ones that are not outdated or don't have performance issues.

STARTD is a free Next.js landing page template for SaaS products, online services and more.

Technologies used:

Next.js — An amazing React framework
Twind — The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
TypeScript — It's worth it
ESLint — Pluggable JavaScript linter
Prettier — Opinionated Code Formatter
Husky — Use git hooks with ease
Commitlint — Lint commit messages
Renovate — Dependency update tool
lint-staged — Run linters against staged git files
Absolute import — Import folders and files using the @ prefix

Live demo: https://next-startd.vercel.app
GitHub: https://github.com/jkytoela/next-startd

Feel free to use it for whatever you want 🙌