DEV Community: Kars van Iersel

The one and only SEO checklist you will ever need

Kars van Iersel — Thu, 26 Aug 2021 07:11:35 +0000

If you are an SEO newbie or have some experience but would like to get a step-by-step SEO guide on how to avoid common website promotion mistakes, here's a list of SEO tasks based on best practices that you should take into account when creating and optimising your websites.

Introduction

So you got your fancy website or blog up and running, but now you need to rank high in Google. The question is always how do I make sure I rank so that my pages get found by Google? Well Look no further, I've compiled a complete step-by-step SEO checklist of SEO tasks based on the best practices. I guarantee you that you will see results if you can check all of them!

I'm currently working on a Notion board with an actionable checklist that you guys can duplicate and use! I will update this post once I'm done with that. Consider checking back on this page for the Notion link, or follow me on Twitter or subscribe to my newsletter.

1. Keyword research 🔬

Analyse competitor keywords

To begin the process of gathering keywords for your website, start by researching a competitor's page that ranks well in search engines. This is because these pages may contain highly valuable keywords already proven to work on Google and other search engines.

Useful links

Collect core keywords

A semantic core of a website is the collection of keywords that describes what you're selling and helps gain top search results. You describe your website by these core keywords.

Useful links

Keyword mapping

Keyword mapping is the process of breaking down a list of keywords into semantic clusters that allows you to distribute them between your site's pages. This can help avoid keyword cannibalization, which occurs when several pages on one website compete for the same words in search results.

Useful links

2. On-page SEO optimisation 📈

Install a web analytics tool and set up your goals

Web analytics tools track how many visitors your website is receiving and what these users are doing on the site. To measure performance, you need to set goals for different user actions (such as registrations or transactions). Goals help define marketing strategies by identifying key objectives that can be adjusted over time.

Useful links

Add your website to Google Search Console

Google Search Console is a free tool that tracks website rankings and helps reveal indexed pages. It also shows errors on the site, which can give insight into how to improve it for search engines to rank it higher.

Useful links

Register a local business on Google Maps

Google Maps is a useful tool for finding local businesses. To show up on Google Maps, you must complete the registration process by filling out all necessary information and verifying that your business exists in real life. Doing so will boost your visibility within search results relevant to users of certain areas, which should lead to increased website traffic from people looking at those specific regions who are interested in what you're selling!

Useful links

Create a logical site structure

The structure of the website is what determines how easy it is to find all pages on a site. Organizing each section, subsection, and page in an open-ended way makes it easier for bots that search engines use to crawl through your site and index every single one of its pages.

Useful links

Secure the website by migrating it to HTTPS

HTTPS protocol is an extension of the HTTP developed for safe communication. It's needed to maintain site security so no information such as visitor actions or their contact details are retrievable. The presence of this HTTPS has been influential in Google search rankings since 2014, and its influence on these rankings will likely grow over time.

Define the preferred domain (www or non-www)

Search engines will see example.com and example.com as separate pages, so defining the preferred domain is useful in avoiding page duplication since it allows you to specify which one should be indexed by search engines first if both are found on a website's link list or sitemap file for instance.

Create a robots.txt file

When building a website, the robots.txt file is used to tell search engine crawlers which pages are and aren't indexed on our site. For example, we wouldn't want any sensitive information or internal documents being crawled as it could cause damage if they were viewed publicly; therefore, these specific pages should be blocked from access by bots for them not to appear on Google Search results.

Create an XML sitemap

The sitemap.xml file is a document in the Extensible Markup Language (XML) that lists all of your website's URLs to help search engine robots index them faster. Sitemaps are used on websites where content changes frequently or has lots of pages and helps Google find those quickly so their users can have better browsing experiences with minimal time waiting for results.

Useful links

Set a language with .hreflang attribute

The hreflang attribute is used to define a website's language or regional URL in case the site has translated versions. This tells Google what URLs to display for specific regions and which version of your content they should index during crawls.

Useful links

Create SEO-friendly URLs

The SEO-friendly URL is more readable and includes keywords that are recognized by search engine robots. This has a positive effect on the page’s ranking because it helps both users and bots understand what they can find on this webpage quickly. For example: /seo-checklist vs. /xn-sEoChecKListeX123534098/. /seo-checklist/ is the type of friendly URL you want to aim for.

Use breadcrumb navigation

Breadcrumbs show a user how they moved around between the pages on your website so that he/she does not get lost. They are also helpful to search engines as it clarifies the hierarchy of all webpages, and can be shown in snippets within SERPs (Search Engine Results Pages).

Improve your SEO with user-friendly interlinking

The purpose of internal links is to make a website more navigable and structured. They can direct the user towards other parts of the site, establish information hierarchy by pointing out what content comes first or last in an article, spread link weight across pages that are related so it does not all rest on one page alone (this enhances search engine optimization), and ultimately give your online presence authority.

Useful links

Check HTTP status codes

When a web browser requests information from the server, it receives an HTTP status code in response. These codes are divided into classes and tell browsers if everything goes well or not; they let you know whether all pages of your website function as expected. Search engines may lower rankings for websites with many incorrect responses that have wrong status codes since this signals to them there is something suspicious going on at these sites--they're probably trying to hide their low-quality content by sending back fake statuses instead of real ones!

Use Canonical URLs

Duplicate content is a problem for websites that want to appear unique in search engines. A canonical tag tells robots which page they should index and rank higher, so you can avoid the penalty of duplicate pages.

Check the markup validity of web documents in HTML

The validity of your website's HTML code is extremely important in terms of search engine optimization. If it contains a lot of errors, such as deprecated tags or misspelled words, then this can damage how well the website ranks on Google and other major search engines.

Fix broken links

Broken links are detrimental to the user experience, and as a result, they can hurt your website's signals that search engine robots look at. When non-working links discourage users from exploring further on your site, it means an error for search engines. If there is a great number of such errors, then this tells them you have low-quality content which will affect their overall rankings in results.

Mind the number of outbound links

If a website has too many irrelevant links, search engines may consider it spam. For this reason, the site's rankings in search results might plummet significantly.

Create a 404 error page

Non-existing pages can occur when a page is redirected, deleted, renamed. All such non-existent pages should be sent to the 404 status code which will inform users what happened and how they need to overcome it.

Improve the page load speed

One of the most influential Google ranking factors is page load speed. It refers to how long it takes for a webpage's content and images to show up after loading on the website, which can dramatically impact whether users choose your site or another one.

Useful links

3. Mobile optimisation 📱

Create a responsive version of your website

Most of the traffic these days comes from mobile devices. Roughly 60/70% of web visitors, visit your website on a mobile device. That is why Google started using a Mobile-first type of indexing. This means that Google cares more about your mobile site than your desktop version. Making sure your website works great on mobile is one of the most important factors.

Useful links

4. Content strategy ✏️

Write unique titles for each page

The title tag is the essential part of web page coding that determines a website's ranking on search engine result pages (SERPs). While it only takes up to 70 characters, being able to optimize your titles can make or break you.

Write unique meta descriptions for each page

Meta descriptions are snippets of content that appear in the search engines as a preview of your page. They're also an opportunity for you to tell users what they'll find on your site and whether it's relevant to their query or intent about landing pages.

Useful links

Optimise H-tags

The HTML headings in a website are important because they give search engines an indication of what the page is about. There are six different levels to choose from, all with varying degrees of importance when it comes to SEO (search engine optimization). Keywords should be distributed evenly throughout each level as this will show Google which keywords deserve more weight than others and allow them to rank accordingly.

Use alt tags on every image

The alt attribute or alt tag is an HTML attribute for a text that describes an image in detail. It must be placed directly in the image tag and not as a separate link like title tags. Alt tags help search engines quickly get a better understanding of what’s illustrated on an image, users who might otherwise have difficulty viewing images, especially those with disabilities because it will read out to them what's described on each picture that has this feature which also helps people understand why they should click into something if pictures are explaining how things work instead of just words alone whereas screen readers use these descriptions when images aren't displayed at all due to technical difficulties, etc...

Useful links

Optimise content both for crawlers and people

Search engine robots have the user's best interest in mind. They like it when content is original and valuable, which means that keywords should be included naturally in a piece of writing instead of being stuffed into sentences just to tick boxes on an SEO checklist.

Useful links

Create fresh content

As a website owner, it is important to look at your user intent and demand so that you can meet their expectations. You need eye-catching content with relevant information for the reader to attract them as they surf through various websites online.

Develop a content plan

The content plan is a list of pieces that will be published on the site to help it rank higher. The updates play an important role because they work alongside SEO and make sure what's being shared online isn't just about promotion but also relevant information for users. It helps streamline the publication process by keeping track of upcoming web pages so there aren’t any delays or overlaps.

Add a blog to your website

Using a blog to attract, engage and convert users is important for any marketing strategy. Blogs are also an overlooked way of improving your website's search engine rankings (SERP).

5. Off-page SEO optimisation 🚀

Check quantity and quality of site's backlinks

Backlinks from different web sources to our website play a significant role in how the site ranks on search engine results. It's important to have both quantity and quality backlinks when it comes to SEO, since having too much of one or not enough of another will impact your link profile negatively.

Analyse your competitors' backlinks

To understand what a backlink profile should look like, it's important to research competitors that rank highly in the SERPs.

Competitor research is an integral part of a link-building strategy. Analyzing competitor backlinks helps you get insight into how your website can improve its ranking on Google search results pages. It also enables you to see exactly where opponents are gaining all their links and learn from them so that your site doesn't make similar mistakes when trying to gain rankings yourself!

Create a link building strategy

A link-building strategy is a process of prioritizing your website's links to help you get more backlinks and compete with top-ranking competitors. This may depend on how many backlinks you currently have, along with those from high competition sites'

Useful links

Collaborate with websites by sharing relevant content within the industry or niche

One of the most important factors to consider when looking for backlinks is if your host website has a related topic. If it does, then you should exchange guest posts with them because they would be more valuable than on an authoritative site unrelated to yours. That means you should do exchanges and write guest blogs at resources popular in your targeted niche!

Useful links

How to Find Sites That Will Want to Link to Your Content by Gisele Navarro

Participate in niche forum discussions and answer the questions

Users who are potentially interested in some product or service often search for relevant forums where they can find fresh information and reviews. Participation on the forum creates content, which helps websites rank higher in Google's results pages as well as increasing traffic to a website. Q&A platforms (Yahoo Answers, Quora) not only provide interesting answers about different topics but also help increase brand awareness and attract targeted users back to your site.

Encourage users to write reviews about your product or service

You can choose to use a review aggregator, where the user's opinion about services/products is shared and it will impact your decision whether or not you should try out that service/product. Search engines evaluate mentions of reviews for websites impacted by local SEO in particular.

Use images, videos, and documents for website promotion

With the growing number of tools to create shareable multimedia content, businesses need to understand how these media can be best optimized and integrated into their overall SEO strategy. We will look at some common types of sharable files as well as a few tips on optimizing them properly to maximize search visibility. The key to efficient use lies in maximizing search visibility with proper optimizations.

6. Social media strategy 🧑🏾‍🤝‍🧑🏾

Learn the social signals model of your industry

Social media shares increase the visibility of a page and its user engagement metrics which leads to an increase in the SERP ranking. Before starting any social media campaign, define what sort of content will strike a chord for your particular business segment.

Aim to create viral content

To drive additional traffic to your website, you should grow a strong social account on Facebook, Twitter, and Pinterest. Social accounts can help increase search engine rankings by engaging in positive interactions with the users who share links for relevant content that matches what is listed under "content."

Add social media buttons to your website

The fact that you have influential accounts on Twitter, Facebook, and Pinterest will inevitably attract a lot of people to your website. These platforms are also great for increasing the search engine rankings of your site!

Use the Open Graph protocol for social media posts

Interested in learning how to share your content with the world via social media? Open Graph is a protocol that allows you to control the way it looks when shared on Facebook. It is a meta tags structure for each post headline, description, and preview so that they attract more clicks and shares!

Conclusion

I hope this post can help you a bit! I will keep this post updated when I find newer or better links that are relevant to these steps. Consider following me on Twitter or subscribing to my newsletter in order to stay up to date!

Let me introduce you to Inertia.js, something you didn't know you were missing

Kars van Iersel — Wed, 25 Aug 2021 18:24:39 +0000

Introduction

Roughly a year ago I had to make a very large scale application and I couldn't decide on a backend framework. However, I knew I wanted to use Vue.js as my front-end. So I began my long quest the ideal framework for my backend. I had doubts between Node.js and Laravel, and I couldn't really decide. I had almost no experience with Node.js or Laravel. The only back-end language I had experience with was vanilla PHP.

Enter Inertia.js, all of the sudden I found Inertia.js . A Laraval package created by Jonathan Reinink. Inertia.js allowed me to develop my large scale app using Vue and Laravel in one codebase. Which I really liked cause I hated to idea of having two GitHub repositories, one for the front-end and one for the back-end.

Now, remember I had almost no experience with Laravel and now I also had to learn Inertia.js on top of it in order to develop my entire application. And trust me, the deadline was though. But boy oh boy Inertia.js was such a pleasure to develop with. Learning Laravel was a breeze, applying Inertia.js was a breeze and I finished the project much faster than I initially anticipated.

For your understanding the project had some of the following features:

Reservation system for clients
Admin system to handle reservations (create, cancel, refund etc)
Payment processing
Date scheduling
Different type of products
Upselling items

Oh and the site is getting used by over a 1000 people per day. So I had to create a solid app that wouldn't crash and burn.

My experience with Inertia.js, Laravel and Vue.js was such a delight that I wanted to share this with you. Cause I feel like Inertia.js is not getting the attention it deserves. I honestly believe that a front-end developer, who needs basic CRUD back-end functionality, can develop some incredibly SaaS applications using this tech stack. And if you are more experienced with Laravel you can really make anything you can think of with the power of Vue combined.

What is Inertia.js?

Inertia.js is a package built for Laravel allowing people to develop single-page applications without building an API, using either Vue.js, React or Svelte for their front-end. According to their website Inertia.js is the new approach to building classic server-driven web apps, they call it the modern monolith.

So Inertia allows you to create client-side rendered apps, using React, Vue or Svelte by leveraging existing server-side frameworks. In my case Laravel, it can also work with Rails.

Inertia doesn't use client-side routing and it also doesn't require an API to be developed. You only need to develop the controllers and page views like you would normally do with Laravel.

So this means you can just write Laravel code and render on the client without having to output everything with an API and inherit everything in your SPA. Inertia streamlines this process by delivering straight from server-side to client-side. Saving a lot of time

Not a framework

It is important to note that Inertia itself is not another framework. It doesn't replace your existing server-side or client-side frameworks. It is designed to work with both. It is like the middleman connecting the two together.

They currently work with the following front-end frameworks:

Vue
React
Svelte

And with the following back-end frameworks:

Laravel
Rails

Should you use Inertia.js?

Inertia is designed for developers and larger development teams who usually build server-side applications using Laravel or Rails. So developers who are used to creating controllers, that get data from a database using ORM and render views.

Typically with Laravel you would use blade templates to render your server-side rendered vies. But this becomes a bit harder if you want to swap it out with a JavaScript based SPA framework, such as Vue or React. Normally you would just start by creating an API and combining the two using said API.

This means creating either a GraphQL or REST API. Creating Auth functionality for that API. Client-side state management. Having your code split up in two repositories (one for front-end and one for back-end). This means you now also need two hosting packages to host each platform on.

You can already clearly see how much more work is involved the moment you want to use a modern client-side framework. Inertia removes all this extra hassle and complexity.

Inertia works almost the same as you normally render your views, getting data from the database and rendering it in your view. Inertia brilliantly makes the pages render in JavaScript components instead. This means you have the full power of your Vue or React front-end code while delivering everything from the server without having to build an entire API.

Why I started using Inertia.js

The main reason why I started using Inertia was because I hated the idea of having my code split up in two repositories. Also I really wanted to work with Vue.js for my front-end.

I didn't have the time to develop my own API and then handle all the logic on both sides. I wanted one project that did all the work for me. I didn't want to have to handle authorization with Vue.js cause I find it very annoying and a time waster to set up. I mean, handeling authorization using Laravel (PHP) is so much easier. I don't want to reinvent the wheel by using Vue. I want to write code and deliver my project quickly.

How Inertia.js works

Inertia allows you to build apps just you would regularly do with a server-side framework. It uses the framework's existing routing, controllers middleware, authentication and more functionalities.

The only thing that Inertia adds, or changes rather, is your view layer, the way you render your front-end. Instead of using your regular server-side rendering, such a blade template, the views are passed to JavaScript components. This means you can keep writing your server-side code, like Laravel, like you regularly would, in combination with state of art front-end frameworks, such as React and Vue.

If you are interested in the more technical background as in how this actually works, you can read that in the Inertia documentation.

My experience with using Inertia.js

Coming from a more front-end heavy background I was bit overwhelmed with using Laravel and to create my SaaS application. However since I was able to use Inertia, I was able to apply all the knowledge I had from Vue. This meant I only had to learn some Laravel specific items. Everything front-end related was nothing new.

If I had to this with Blade templating it would've been a nightmare for me! And I wouldn't be able to have finished my project on time and with great success.

So far I've been using Inertia for all my projects. It really made me switch my tech stack towards:

Laravel
Inertia
Vue
TailwindCSS

Oh btw before I forgot to mention, if you are afraid that Inertia won't work with Vue 2 or Vue 3. Don't worry, it works with both. Actually it doesn't matter what version you use cause Inertia doesn't affect Vue all that much. It just passes the data in a really clever way.

And for the past 6 months using this tech stack I have been literally amazed with the amount of code I can produce, and the quality of it. Honestly, having an idea for something and being able to turn it into an MVP within weeks (often just a good weekend), is a lot of fun!

Another great thing is that Inertia recently launched their SSR feature (server-side rendering) for their Github sponsors. Which takes this entire tech stack to the next level . Because the biggest problem with SPA's is that they don't rank well in Google due their JavaScript heavy nature. But now with Inertia you are also able to server-side render all of your pages, and rank better in Google. Of course there might be causes where you don't actually want SSR. For me it brings a lot of new interesting things to the table.

Conclusion

If you are working with Laravel already it highly recommend you checking out Inertia. Actually I recommend everybody trying out Inertia. It really combines the best of both worlds. One of the best back-end frameworks there is combined with the most popular front-end frameworks out there.

The learning curve is not that high, just a building a basic CRUD application with Laravel + Vue can probably be achieved within 1 day if you are a bit familiar with how MVP frameworks work.

Take it from me, I barely touched Laravel and never heard of Inertia before and I was able to build a very large and complex application in a matter of weeks.

If you have questions feel free to reach out to me! I'm happy to help. On that note, there is also an Inertia discord server . They are pretty active and so far I've had plenty of help over there. So thanks for anybody who's in that channel!

Noteworthy links

Why you are not focused as a web developer

Kars van Iersel — Tue, 24 Aug 2021 14:55:11 +0000

Introduction

We web developers are always faced with distractions. It's not uncommon to see web developers on their computers with open tabs for Twitter, Facebook, and Reddit crowding the taskbar of your computer. Here are some tips on staying focused in order to be more productive as a web developer.

1. Turn off notifications from web apps that are distractions

One way to stay focused while web developing is to turn off notifications from web apps that are distractions. Whether it is Reddit or Facebook, these web applications will keep you checking for updates and inevitably bring you away from your work. Turning off those notifications can help keep web developers focused on their work.

2. Set short deadlines for yourself throughout the day and work on one task at a time

Another thing web developers can do to help stay focused on their work is to set short deadlines for themselves. Set one 30-minute deadline for yourself and then focus on one task at a time. You will be more focused and can ensure that you will have a productive day.

The Pomodoro Technique

The Pomodoro Technique is one of the most popular productivity techniques for web developers. A web developer can use this technique to focus on a single task and set short deadlines for themselves. This technique is based on time-boxing work in 25 minutes, with 5-minute breaks between them. The web developer will have to work for 25 minutes without any distractions and then take a break. There are also various applications that web developers can install that will help keep them on track by doing things such as blocking web sites like Reddit or Facebook from loading when web developers are working on their tasks.

3. Create a "Do Not Disturb" zone in your home or office with headphones, earplugs, and an eye mask to block out other distractions

The next thing web developers can do is to create a "do not disturb" zone in their home or office. This way web developers will have everything they need to stay focused on their work without any other distractions. This zone should include headphones, earplugs, and an eye mask. When web developers make this space for themselves, they are more likely to stay focused on their work and not be interrupted by anything else that might happen around them.

4. Give yourself rewards when you complete tasks - this can be anything from taking a break to reading something interesting

A web developer can use this technique when they are trying to work on a task. Maybe web developers might need some motivation to complete the task, so web developers can give themselves a reward at the end of it. Rewards are unlimited, web developers might want to take a break or read something interesting. This technique can motivate web developers to get through the rough parts of web development.

Take Breaks

An example of a reward can be taking breaks. Studies show that the most effective way to learn is with frequent breaks. For adults, it takes about 30 minutes of solid studying before you'll start losing your focus and forgetting what you've learned. A study from Cornell University found a sweet spot for retention in adults at around 45-90 minute intervals between learning sessions-- so if you have 3 hours worth of material to cover, take three short 10+minute break followed by 5 more minutes on each section just as long as they're not longer than 2 hours total time combined!

5. Get rid of all social media apps from your phone so you're not tempted to check them constantly while working on projects or during meeting

The next thing web developers can do to help stay focused is to get rid of all social media apps from their phone. It's not uncommon for web developers to be tempted to check their social media apps while they are working on projects or during meetings. The temptation will be removed by getting rid of these web applications from web developer's phone.

6. Take care of your mental health by exercising regularly, eating healthy food, meditating, getting enough sleep, and practicing self-care techniques

The web developer can also take care of their own mental health by exercising regularly, eating healthier food, meditating, getting enough sleep, and practicing self-care techniques. Web developers can use these techniques to help with their productivity and focus on web development.

Conclusion

Web developers are constantly inundated with distractions, and it can be difficult to stay on task when you have open tabs for Twitter, Facebook, and Reddit all crowding your taskbar. Here are some tips on how web developers can stay focused in order to get more done! Web developers may want to take advantage of time-boxing work in 25 minutes intervals followed by 5 minute breaks or try creating a "do not disturb" zone that includes headphones/earplugs/eye mask. Another great way web developer's can keep their focus is by giving themselves rewards every time they complete tasks like taking a break or reading something interesting. Finally web developers should make sure they're taking care of their mental health by exercising regularly, eating healthy food, meditating

Why every developer should be using TDD

Kars van Iersel — Sun, 22 Aug 2021 23:29:14 +0000

Introduction

No skill is more important for programmers than the ability to write code that works. But all too often, developers don't think about whether their code will work until it's finished, and by then they've already created many bugs that are difficult or impossible to fix.

That's why every developer should be using Test Driven Development (TDD). TDD forces you to "think before you act" and come up with a test before writing any new lines of code. This simple technique has been shown in studies done at Microsoft Research and elsewhere to reduce programming errors by as much as 50 percent--an amazing reduction in mistakes! And because TDD prevents so many bugs from creeping into your software, it also makes future debugging sessions shorter and reduces technical debt.

What is TDD

When developers code, they need to make sure that their code works, and it will work when the project is complete. This means they need to write tests for this coding before they even write the code!

The way TDD works is simple:

First, create a test for your program that will be called "Arithmetical Addition Test" - in this case, adding two numbers together.
Then write some arithmetic addition code that creates a result according to the test you created.
Finally, run your test and make sure that the result matches what you expect it to be. If not, then your code has an error in it somewhere.

The benefits of using TDD

The benefits of using TDD are many. One of the major benefits is that it prevents bugs before they ever get into your code. This is a great thing because not only do you find the mistakes earlier and more easily, but you also don't have to waste time fixing them later on. This means that a developer can spend less time debugging and more time creating solutions.

It's also important to note that TDD allows developers to distribute their work in a better way. Taking the time to create tests for every function forces developers to think about what they are doing before they start writing new lines of code, which helps them use their time better and understand what's going on in the project better.

Test Driven Development (TDD) is an important skill to have for developers because it helps them create code that will work. It's a simple process of creating tests before the code and then checking if they match up to what was expected after running them. This technique has been shown in studies done at Microsoft Research and elsewhere to reduce programming errors by as much as 50%.

How to use TDD in your workflow

There are many benefits to using TDD in your workflow, and it doesn't take too much time or effort to implement.

It's important for developers to create tests first before they start writing code. Once you have testing, you know what your expectations for the code should be and can write the code to match those expectations. When you're both writing the test and the function, it forces you to think about what each step of the process is doing as well as how they interact with each other. This helps reduce errors and bugs that get into your code before they cause problems in the future.

When coding, it's also important to make sure that the tests are developed enough. It's not necessary for them all to be 100% complete, but they should at least have a basic functional outline to help make sure that the code is going in the right direction.

When you should start using TDD

The best time to start using TDD in your workflow is right now. The sooner you start, the more bugs will be caught and the less work you'll need to do fixing them later on. Even if you're not currently using TDD, there's never a bad time to start. Even though it can be challenging at first, when writing code without testing can lead to much more complex issues later on in the development process.

Tips for getting started with and implementing TDD into your workflow or project

TDD can be challenging to use at first, but the time spent will be worth it in the long run. It's important that tests are written carefully and completely so that they do not need to be changed later on during development. The best way to start is by testing a few of your functions in a simple program or project before moving on to more complex code.

For example, you could try out TDD with a small function that takes two numbers and adds them together. Once you're confident with how TDD works with this function, then move on to the next one related to addition and continue from there.

It can also be helpful for developers to make sure that they have plenty of tests before they start writing code. You don't need hundreds of tests, but a good number to start with is about 5-10 per function that's being developed.

Conclusion

TDD is a popular programming technique that helps developers create code that will work. This process involves writing tests before the code and then checking if they match up to what was expected after running them. There are many benefits to using TDD in your workflow, including reducing bugs by as much as 50%! No matter where you're at or how experienced of a developer you are, it's never too late to start this practice in your workflow. It can be challenging at first but the time spent will pay off down the line with less debugging needed on future projects!

UI/UX Design Tips: Emphasize by de-emphasizing

Kars van Iersel — Wed, 20 Jan 2021 12:56:57 +0000

Often with Front End Development, or UI and UX work, you will notice that some important element is just not getting the attention it deserves, but you feel like you cannot adjust the element anymore to emphasize it more.

You try to make fonts bolder or you change color to make it stand out a bit more. Like in the following example, you try giving the vote count a heavier to attract more attention to it. But as you can see, it doesn't add all that much emphasis on the most important features of this component

Wrong example of how to emphasize important content

When you find yourself in this situation, try to de-emphasize the less important elements. You will see that you need to do very little to emphasize the important elements now.

A clear example of how de-emphasizing makes important content stand out

You will see that the important content now draws way more attention to itself. A lot of people focus on emphasizing the important parts, while it is way easier to de-emphasize the less important elements! By doing very few changes, you can achieve a lot.

Now to emphasize a bit more, and add some extra touch to your important elements, try adding a color. Of course, it should be in-line with your brand colors. Try using your accent color to make those important items stand out!

Emphasize even more by incorporating brand colors

These types of changes take less than 5 minutes to implement but make your components stand out to your users. Not only will this trick make your website a lot easier to navigate it will also help to make your site look clean.

As you can see from the before and after shots, it adds a lot of readability for your user.

The clear difference between the two

If you liked this post let me know in the comments! Always interested in feedback. Also if you want to keep up-to-date on my weekly designs tips, consider following me on twitter.

CSS the :not() selector

Kars van Iersel — Wed, 02 Sep 2020 10:24:43 +0000

Intro

In my previous post
I wrote a bit about the :not() selector and I got a lot feedback that people never heard of this element. So I figured I would dedicate a post just to the :not() CSS selector.

What is the :not() selector in CSS?

The :not() is a CSS pseudo-class that targets elements that do not match the selector given. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

In essence you can target anything except what you put in the :not() selector.

Lets look at a quick example:

:not() rules

There are a couple of rules when using the :not() selector. You should keep this in mind when using the :not() selector in your projects, cause they could cause unsual outcomes that have you burn hours trying to figure them out.

You cannot nest the :not() pseudo-class, which means you cannot do :not(:not(...))
You cannot use it with pseudo-elements such as ::before and ::after. It will work with :first-child and :last-child since they are simple selectors.
Using the :not() selector can increase the specificity of a rule. #foo:not(#bar) will match the same element as the simpler #foo but with a higher specificity.
Using just :not(.class) will match anything that isn't .class including <html> and <body>.
The :not() selector only applies to one element; you cannot use it to exclude all ancestors. body :not(table) a will still apply to links inside of a table, since <tr> will amtch with the :not()

How to use the :not() selector with multiple classes

It is possible to use the :not() selector with multiple classes.

Normally you would just want to do:

p:not(.foo) {

}

But maybe you want to avoid multiple classes? There are no real combinators with :not() and you cannot nest them. But you can chain them, which works similar to and.

p:not(.foo):not(.bar):not(.bold):not(.italic) {

}

Tricks with :first-child, :last-child and :nth-child()

I use the :not() CSS selector most often with the :first-child or :last-child pseudo-class.

Think of having a list that you want to add some spacing to, but you don't want to last item to also have spacing at the bottom right? Well with :not() that is super easy to solve!

li:not(:last-child) {
  margin-bottom: 20px;
}

This CSS will be applied to all <li> elements except the last child.

You could also do the reverse with :first-child

li:not(:first-child) {
  margin-top: 20px;
}

Or use it with :nth-child()

li:not(:nth-child(2)) {
  margin: 20px 0;
}

Here is a quick codepen sample to see it in action:

Conclusion

A lot of handy things can be achieved by using the :not() CSS selector. I know I use it a lot of times, for menus, list items and what not. Even flexbox grids!

I hope you learned something from this post, and hopefully you can enhance your CSS skills with this knowledge.

Let me know how you apply the :not() selector, I'm always eager to new learn tricks with it.

CSS coding patterns that give you away as a junior developer.

Kars van Iersel — Tue, 01 Sep 2020 09:25:48 +0000

Recently I read JS Coding Patterns that give you away as a Junior Developer
by Alexey Chang. Which is an interesting read! I encourage you to read it if you are a junior / medior JS developer.

Anyway, I figured I would do one for CSS! I often see CSS written by many different levels of developers, and it is always quite clear if it is written by a Junior or a Senior Front End Developer.

Let's take a look at what those patterns are and how you can avoid them. Making your code look better during reviews by your peers, and hopefully giving your career a boost.

Multiple padding / margins

Oke so you want to add padding to margin to the top and the bottom. What I see a lot of junior developers do is as follows:

margin-top: 10px;
margin-bottom: 30px;

Now, this CSS will work, but is it well written? No! You should aim to have all the margins or paddings grouped up. This is especially handy for responsive CSS work, cause you can just update 1 line of CSS instead of having to update both margin-top and margin-bottom.

So start trying to write it like this:

margin: 10px 0 30px 0;

Reading it as 1 line can be daunting at first, so let me break it down for you. The first number stands for margin-top, the second number stands for margin-right, the 3th for margin-bottom and the last one for margin-left.

To give another example:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

is the same as:

padding: 10px 20px 30px 20px;

Another cool thing with this is that if you have the same values, like:

padding: 20px 40px 20px 40px;

You can write it even shorter, like:

padding: 20px 40px;

If a value is the same for both top / bottom or left / right, one number would suffice.

If don't need padding or margin on a side, you can simply use 0 or 0px like:

padding: 20px 0;

This would give me both 20px padding at the top and the bottom, and 0 padding left and right.

Using static values of Sass / CSS Variables

Variables bring great value to CSS. It allows us to change a color on 1 single place and automatically all the CSS that use that variable are now using that new color.

If you are unfamiliar with CSS variables, check out: Mozilla MDN.

I often see newer developers opt to not use variables, sometimes because they feel it is hard to implement. Sometimes even because they just don't know they exist.

When to use Sass / CSS variables?

This is a question I often receive and see floating around. In general I follow following rule: if a value is used in more than 3 locations, make it a variabel.

This could be for: colors, typography, box-shadows, borders, animations and almost everything else.

How to use CSS variables

Using CSS variables is very easy. As seen in the following code snippet:

:root {
  --primary-color: #333;
}

p {
  color: var(--primary-color);
}

For the people wondering what :root is, :root stands for the absolute root of your site. So this CSS is loaded for the entire document. Making it a perfect location to set global variables such as colors.

Now if I update the --primary-color in :root the color of p is automatically updated!

Not using :not(), :first-child and :last-child

Have you ever had the issue were you didn't want to apply CSS to the first or last element of a list? Well, there is some CSS syntax for that!

What often happens is that you have a list, like:

<ul>
  <li>First Child</li>
  <li>Second Child</li>
  <li>Last Child</li>
</ul>

Now you want to create some spacing between the elements, so you add some CSS:

li {
  padding: 0 0 20px 0;
}

The problem this creates is that it also applies this spacing to the last element. Which is something you don't always want.

If you use:

li:not(:last-child) {
  padding: 0 0 20px 0;
}

The CSS is applied to the <li> element except the last child. Hence the :not() syntax.

Now there is a lot you can do with :not() so it is worth checking out! I could write a complete post about just the cool things you can do with :not().

It could also be the case you only want to apply CSS to the first or last element. Instead of making a seperate class for it, start using first-child and last-child.

li:first-child {
  margin: 20px 0 0 0;
}

This will only give the first <li> element 20px margin-top! No need for extra classes.

Conclusion

I hope you learned some cool new CSS patterns from this post. If you have any questions, I'm happy to help out!

Let me know what your thoughts are.

HTML Must Knows the datalist element

Kars van Iersel — Mon, 31 Aug 2020 21:23:33 +0000

The HTML <datalist> element is a very powerful input element. It functions as an input field with dropdown options, but here is the catch: it comes with autocomplete. Users will see a drop-down list of predefined options as they write in the input field!

The <datalist> element contains various <option> elements that represent the options that are available to the user.

It kind of feels like a <select> dropdown, but on steroids. Since the user is able to type and get autocomplete options in return.

How to use `<datalist>`

<label for="animals">What is your favorite animal?:</label>
<input list="animals" name="animal" id="animal">

<datalist id="animals">
  <option value="Dog">
  <option value="Cat">
  <option value="Horse">
  <option value="Donkey">
  <option value="Bunny">
</datalist>

Note the id of the <datalist> and the value of the list attribute on the <input> field

The HTML will translate into:

If you click on the input field you already see the generated list of options that I've provided. Now start typing in the input field! As you will notice, once you start typing the list will shrink. It will only show the available options based on what you have typed.

So out of the box, HTML gives us an input field that brings autocomplete to the table.

The beauty of this is that it even works in all browsers! Both desktop and mobile.

Conclusion

When I learned about the <datalist> element I was very happy! In almost every project I had to spend hours creating custom dropdown lists with autocomplete. Never knowing that there was a HTML tag for it!

I wonder what you think of the <datalist> element? Let me know!

Looking for an experienced Vue SSR developer, anyone here who has worked with Vue SSR?

Kars van Iersel — Fri, 11 Oct 2019 21:33:28 +0000

Wondering if there are any people within this community who are experienced with Vue.js SSR? https://ssr.vuejs.org

Let me know in the comments!

Free Web Illustrations – 1,500+ Beautiful Free Illustrations for Web Designers

Kars van Iersel — Thu, 29 Aug 2019 17:33:07 +0000

https://freewebillustrations.com

Amazing quality for free illustrations! Up your design level with these :)

Also another great resource:
https://undraw.co/illustrations

Discuss: Your preferred Cloud Service

Kars van Iersel — Thu, 29 Aug 2019 14:48:54 +0000

I recently got an increasing interest for learning some Cloud Computing services out there.

Since there are 3 main players, AWS, Google Cloud Platform and Azure. I was wondering, what is your preference?

What are the pros and cons you've noticed while working with one of these platforms. And which would you recommend the most to others/new people?

Would also be great to know the key differences between the platforms and the skill level required to start working with one of these services.

Let's discuss!