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.