Puzzle Classic "Baba is You" recreated in JavaScript - Behind the Code

Remaking the excellent puzzle game where the logic of the game is changed during gameplay.

Namespaces are just fine

No need to destructure everything.

Code reviews - Are you checking for this?

One often overlooked thing in code reviews

Reverse-engineering Cuphead's film-grain effect - Behind the Code

A great slam and then some!

Comparing strings - What can go wrong #unicode

What can go wrong with one of the most basic things in programming - lots.

Cross-Site Scripting (XSS) and is your SPA really safe from it?

One of the most dangerous attacks out there

Secure Cookies in 5 steps

Even with the right CORS setup and CSRF protection cookies present a few more attack vectors. Let's discover how to secure cookies.

CSRF tokens for SPAs

Demonstrating two approaches to set up CSRF tokens for SPAs

Demystifying CORS, CSRF tokens, SameSite & Clickjacking - Web Security

One of the best features of the web is its backwards compatibility. But ironically, this also makes the web somewhat insecure by default. Let's have a look

How to test time-dependent code in JavaScript

Time travelling in JavaScript!

Git aliases for increased productivity

More Git aliases to ease your devlife.

Build Adonis/Vue apps without an API

A prototype of how to seamlessly integrate Adonis.js and Vue.js.

Isomorphic handling of promises in libraries like react.js, vue.js, angular, svelte etc.

If you are working on a SPA that connects to an API somewhere, you are going to need to write a lot of fetch requests. Now it's not as simple as fetching something and putting the result on the page.

Publish to NPM automatically with GitHub Actions

Part three of a series in which we explore GitHub Actions to create a CI/CD pipeline.

GitHub Actions: Setting up Test Coverage for a JS/TS/Node project

Part two of a series in which we explore GitHub Actions to create a CI/CD pipeline.

GitHub Actions: Setting up CI for a JS/TS/Node project

Part one of a series in which we explore GitHub Actions to create a CI/CD pipeline.

Clean URL slugs: The Good, the Bad, and the Ugly

Clean URLs come with great benefits, who wouldn't want one? Well...

Your flexbox is actually not centered

CSS line-height !== leading

1 year with React Hooks - Biggest lesson learned

I've been working with React Hooks for over one year now. Working on a variety of things, there has been one glaring issue that I've run into, not once, but twice.

Vue 3 just got me from interested to excited

Vue 3 has been on my radar for a while, but a recent RFC got me from interested to excited.

Good bye API layer. Uniting frontend and backend

A prototype of how to seamlessly integrate frontend and backend code.

Tailwind CSS - from skeptic to practiced

Introduction to an interactive tutorial on Tailwind CSS.

Detecting the end of a fluent API chain in JavaScript

Or: how to duck-type internal JavaScript objects!

My webdev related finds for Apr/May 2020

A curated list of blog posts, videos, JS stuff and SVG resources I found in Apr/May.

Introducing learning by vueing

Introducing a platform to learn vue interactively.

Breaking free from the request and argument drilling with AsyncHooks

Introduction to an amazing new feature that landed in Node 13.

You may not need vuex. Here are some alternatives

Let's take a look at two approaches you can take before reaching for vuex!

Add Tailwind CSS to a vuetify project

Want to try out tailwind CSS in your project, but it already uses a component library? Let me help you with that!

Document your thoughts

How writing ideas up helps with conceptualizing thoughts.

Adonis.js - Advanced factories

Little tricks to simplify writing factories in Adonis.js.

Getting things done when you don't have the time

We all have obligations and sometimes it feels it can be quite tricky to make time for side projects.

How TypeScript over babel greatly simplifies creating libraries

Creating a NPM library sounds simple at first but once you think of supporting node, browser, ES5, ES6 etc. it can turn into quite a daunting task. Babel helps but adds a lot of complexity, let's see how you can achieve the same with less using TypeScript.

Vue.js - Cleaning up components

If you write a semi-big vue application you might see familiar patterns popping up repeatedly. Let's take a look at some of these and how we can drastically improve our components.

TDD course with AdonisJs - 9. Cleaning up after ourselves

It's always good to take a pause, look back at what we built and see if we can clean up something.

"git nah" and more handy Git aliases

Creating our own custom git commands for increased productivity

TDD course with AdonisJs - 8. Third party APIs, ioc and custom validators

Let's take a closer look at the ioc container and implement a third party API.

TDD course with AdonisJs - 7. Moderators

Adding a new feature for moderators to modify threads.

Tips on naming boolean variables - Cleaner Code

If there is one thing developers agree on, it is the fact that naming is hard, hopefully these tips can save you valuable time in the future.

TDD course with AdonisJs - 6. Validation

Currently it is possible to create a thread without a body or title. So let's add some validation to our controller.

TDD course with AdonisJs - 5. Middlewares

We learn an important lesson about the difference between integration and unit tests.

TDD course with AdonisJs - 4. Using the auth middleware

Most applications require auth in some sort, it's a breeze with AdonisJs and I show it to you.

TDD course with AdonisJs - 3. Model factories & DB transactions

We take a look at simplifying our tests with model factories as well as one common gotcha.

TDD course with AdonisJs - 2. Our first test

We write our first integration test and set up the database layer.

TDD course with AdonisJs - 1. Let's build a reddit clone

Part 1 of a series in which we engulf in the joy of TDD with AdonisJs.

Simple libraries do not guarantee simplicity

Rethinking popular NodeJs libraries.

Testing made easy with AdonisJs

Adonis lets you write clean tests and is a good candidate for test driven development. I will show how to get started with testing as well as some common techniques regarding the database setup.

A case against component libraries

CSS frameworks are a great way to quickstart a project. They let you focus on your application rather than the design. This is especially great if you are not a designer and don't have one in your team.

tap tap tap

Turn any non fluent API into a fluent one.

Utility-first CSS - You have to try it first!

Utility-first CSS provides many benefits over traditional solutions. The article highlights these and addresses common concerns regarding utility-first CSS.

React Hooks for Vue developers

Let's compare some common vue things and implement them using react hooks, then list up the pros and cons of each.

Common MySQL traps

Exploring some common mistakes with using MySQL like how utf8 is actually not utf8.

Automatic Dependency Injection in JavaScript

We learnt about dependency injection and ioc, there is one last step.

Demystifying Dependency Injection, Inversion of Control, Service Containers and Service Providers

It's really quite simple.

IIFEs in JavaScript and how to avoid this common mistake

JavaScript, IIFEs and ASI.

Undo changes in Git - Cheat sheet

Never confuse git checkout, stash, reset, clean, revert, rebase -i, amend again.

Refactoring search queries in Adonis.js

Learn all about model scopes and conditional queries.

Implementing SSR into a Laravel/Vue app

The issues I ran into integrating server-side rendering into an existing Laravel Vue application.

Extending arrays using proxies in JavaScript

Subclassing arrays in JavaScript

Exploring subclassing, a new addition with ES6.

Explaining shallow / deep copying through acronyms

Learn all about the benefits of JavaScript's array methods and iterables, effectively avoiding temporary variables and conditions, as well as revealing intent.

Array methods and iterables - Stepping up your JavaScript game

Learn all about the benefits of JavaScript's array methods and iterables, effectively avoiding temporary variables and conditions, as well as revealing intent.

Vue vs Traditional HTML - Reusability & Components - Beginner's Guide

What babel-polyfill doesn't include

babel-polyfill is super easy to use. Just install it from npm and import it in your app. Now you are ready to go and write next level JavaScript without having to worry about browser support, or are you...

Vue vs Traditional CSS - Beginner's Guide

Let's explore Vue's refreshing approach on CSS.

Avoiding fat controllers in Adonis.js

Taking a look at controllers and how they can grow into big junks of code, and how we can avoid this.

Vue vs Vanilla JavaScript - Beginner's Guide

Comparing the implementation of a VueJs app with vanilla JavaScript and how Vue can help us create readable robust applications.

Build fullstack Javascript apps with Adonis and Vue

Bringing together two amazing frameworks that allow us to build clean applications using only Javascript.