I develop the internetz. Stay up to date with the newsletter https://thewholesome.dev Connect with me on Twitter @ https://twitter.com/lasnind

tl;dr — Developer tools, Coding inspiration, JavaScript news, SaaS ideas, CS career advice, CSS animations delivered straight to your inbox — https://thewholesome.dev/welcome

Image for post
Image for post
The Wholesome Dev is a (Free) Developer Newsletterhttps://thewholesome.dev/welcome

Big news! I’m launching a free developer newsletter for everyone. No signup is required to view it, but you’re more than welcome to sign up and stay in the loop.

Newsletters are a fantastic way to click with people— and I want to do exactly that — connect with my readers on a deeper level.

These are the perks you’ll receive when you sign-up for the newsletter.

  • Receive coding inspiration
  • JavaScript, JavaScript, JavaScript!
  • Read my tutorials
  • Hear my opinions
  • SaaS ideas
  • Startups that are just winning at life — I have a newsletter about just that here → https://crushingit.substack.com/
  • Or just watch lists of fancy CSS animations

— If the above sounds great — then The Wholesome Dev is precisely the newsletter just for you.

Note: I will still continue to write on Medium — I think it’s a fantastic platform for both writers and readers.


tl;dr: Discover tomorrow’s winning startups today → https://crushingit.substack.com

Image for post
Image for post
Startups Crushing It! → https://crushingit.substack.com

That’s right! I’m starting a newsletter about early-stage startups. There are tons of indie developers and early-stage startups working on their projects that no one has heard of.

Since I love researching startups and grilling founders — It’s a natural step for me to start a newsletter to post my findings and gems.

Image for post
Image for post
Startups Crushing It! — https://crushingit.substack.com/welcome

Startups Crushing It! Brings the most fascinating startups to your inbox, ad-free, and spam-free!

Image for post
Image for post
Startups Crushing It! → https://crushingit.substack.com

I find high potential startups you never heard of, and deliver them straight to your inbox. No spam, no bullshit, no ads, no selling data!

If this is something you might be interested in — please check out the free public version here: https://crushingit.substack.com/


Skeleton loading screens will improve your application’s user experience and make it feel more performant

wireframe diagram of a LinkedIn screen
wireframe diagram of a LinkedIn screen
LinkedIn.com style skeleton loading screen example (Image source: Author)

What do Reddit, Discord, Medium, and LinkedIn have in common? They use what’s called a skeleton loading screen for their applications.

A skeleton screen is essentially a wireframe of the application. The wireframe is a placeholder until the application finally loads.

Here’s how usually skeleton loading screens look. Notice how they’re a replacement for the traditional loading spinner.

animation of a skeleton loading screen: a wireframe briefly appears, followed by the content
animation of a skeleton loading screen: a wireframe briefly appears, followed by the content
Skeleton loading screen for the usual blog post

The skeleton loading screen essentially impersonates the original layout.

This lets the user know what’s happening on the screen. The user interprets this as the application is booting up and the content is loading.

What Is a Skeleton Loading Screen?

The skeleton screen is a version of the user interface that mimics the page’s layout. …


Challenge yourself and bring your front-end skills to the next level

animation of flaming skull on a card with the number 13 in the lower left corner
animation of flaming skull on a card with the number 13 in the lower left corner
Ghost card — By Yugam

As a developer, the more projects and experience you have, the better you become. Coding is a muscle that, like any other, requires constant exercise.

Why not spend a couple of evenings on a side project and put in the extra effort to become exceptionally better at coding?

Without further ado, here’s the list of coding ideas for boosting your front-end development skills. Use this article as a source of inspiration for your next project.

Here’s the full list of challenges you could start coding today.

1. Ghost Card (Expert)

The ghost card concept is a flaming skull that is animated with CSS and JavaScript. …


Sharp is a high-performance module for resizing and formatting images

Woman sitting on a couch holding a laptop
Woman sitting on a couch holding a laptop
Photo by Christina @ wocintechchat.com on Unsplash

Images are a big part of the puzzle you should be familiar with when it comes to building modern, fast, and user-friendly applications. Every application makes use of images in some way or another.

For instance, users want to resize their profile photos, merchants want to shape their images so they’re as compelling as they can be for buyers, etc.

Large images are frustrating to deal with since they take forever to load and are even more frustrating to store into the database. There’s a way we can make our images more user-friendly, loader faster, and even higher quality.

The typical use case for the Sharp library module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, and WebP images of varying dimensions. — According to the official Sharp…


A list of inspiring ideas for your next project to stretch your skills

Moving image of a neumorphic light switch
Moving image of a neumorphic light switch
“Neumorphic Light Switch” — By Jon Kantner

One of the best ways — if not the best way — of improving at coding is to spend as much time coding as possible. The more projects and experience you have under your coding belt, the better you become.

Why not spend a couple of evenings on a side project and put in the extra effort to become exceptionally better at coding.

Without further ado, here’s the list of coding ideas for boosting your front-end development skills. Use this article as a source of inspiration for your next project.

3D Spinning Triangle (Expert Level)

Start your morning, lunch, or afternoon off by re-creating and coding this complex 3D spinning triangle. …


Save time and reduce the amount of boilerplate you have to write every time you start a new project

Open toolbox on a wood floor
Open toolbox on a wood floor
Photo by Tekton on Unsplash.

Starter kits, also known as code templates, help you speed up the development of your projects. The more time you save by automating the mundane tasks, the more efficient and productive your development cycle is.

In a nutshell, starter kits are usually some form of pre-existing code that you can use as a launching pad for new projects. Want an ORM? You got it. Want user authentication included? No problem.

Instead of spending a couple of hours setting up a new project, use that time to build the features that actually matter the most.

Without further ado, here’s a list of starter kits you can start using today. …


Everyone loves a good timeline

time line of WWII events with dates on the left and events on the right
time line of WWII events with dates on the left and events on the right
React-Chrono timeline component — Source: https://react-chrono.vercel.app/

If you have ever been asked to build a company timeline that displays events chronologically, you’ve found the right article.

This article shows you how you can build a timeline component using React and React-Chrono.

In case you’re not sure, the timeline component displays a list of events in chronological order. This is useful for displaying events and also for illustration purposes.

The greatest quality about open source is all the time you save by reusing components and packages, which are provided by the community.

Instead of reinventing the wheel, you save the hassle and time. …


Snowpack is an alternative build tool to Webpack or Rollup

Snowpack’s logo and slogan.
Snowpack’s logo and slogan.
Photo from Snowpack.

JavaScript build tools such as Webpack or Parcel need to rebuild and re-bundle entire chunks of your application every time you save a single file — according to Snowpack.dev

The incrementing re-bundling step adds a miniature delay between hitting save on your changes and seeing the results reflected in the browser.

Snowpack serves your application unbundled during development. Every file only needs to be built once and then is cached permanently.

Diagram demonstrating how Snowpack is different from its counterparts.
Diagram demonstrating how Snowpack is different from its counterparts.
Photo from Snowpack.

When a file changes, Snowpack rebuilds that single file. There’s very minimal time wasted re-bundling on every change. Instead, there are instant updates in the browser.

Snowpack’s unbundled development supports the same bundled builds that you’re used to for production. — according to Snowpack.dev


The what, why, and how when it comes to testing your application with a headless browser and Node.js

Corner of computer monitor showing search box
Corner of computer monitor showing search box
Photo by Richy Great on Unsplash

Headless browsers are good at executing JavaScript code fast and simulating clicking or hovering on elements on the page on different devices. Headless browsers are also incredibly useful when it comes to testing network activity, mocking network requests, and testing different geolocations.

The reason you would want to do all of the above is to make sure everything works as intended before you push your code to production.

Instead of going through each page and checking for errors manually, you can write UI tests and integrate them into your build process.

You write the code for interactions such as clicking or hovering on elements on the page. The headless browser runs automatically in the background and produces screenshots at different points throughout the process. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store