Jilles Soeters - Jilles Soeters

Data Structures - Binary Heaps (MinHeap and MaxHeap) in JavaScript

In this series we’re going to explore some must-know data structures as visually and engaging as possible. This post will hopefully help you to understand binary heaps - more specifically, MinHeap and MaxHeap.

Django Featured

Django: ForeignKey's on_delete handlers

Django models’ foreign keys require you to set an on_delete function. This is true for ForeignKey, OneToOne, and OneToMany fields. In this blog post, I will go into detail on what each method does and illustrate when to apply each one.

Chrome Featured

Modern Web: Picture-in-Picture

We live in a time where we all try and be as productive as possible. We watch videos at twice the speed, we have several (too many?) tabs open and always try and stay up to date with the latest tech. I mean, that is why you are currently reading

web-development

Facebook comment preview craze using Django

In my spare time I tend to check Facebook every now and then. With my family and most of my friends living in a different country than me it is a great way to see how they are doing. Aside from all the weird videos and "tag a friend that

Chrome Console APIs you’re probably not using yet

As a JavaScript developer I use the dev console a lot. Whenever I want to know the value of a variable or the return value of a function I use the famous console.log. A while ago I started to do some more research and found some more really cool

React, Redux and react-redux

React and Redux are great. Once you get the basics it's really easy to create very cool web apps. This is what I liked about Angular 1.x, you would read a small tutorial and be able to build an app within hours. React on the other hand - while

web-development

How to get started with web-development

Websites are awesome. You're probably using them all the time. As a matter of fact, you are using one right now! How cool would it be if you could create your own websites and web apps? Well, you can! -------------------------------------------------------------------------------- First steps To get started with creating websites you need

JavaScript

webpack async bundle loading

Webpack is great. If bundle splitting and feature flags [https://jilles.me/webpack-bundle-splitting-and-feature-flags/] didn't convince you yet, then hopefully async bundle loading will! What is async bundle loading? Async bundle loading is the act of loading a bundle asynchronously as the name suggests. It's very useful when you have pieces

webpack

webpack bundle splitting and feature flags

One of the things that makes webpack so great is its built-in plugins and features. Today we will discuss using webpack-dev-server, splitting our bundles and enabling feature flags. I will assume you already know the webpack basics, if not make sure to read my previous post [https://jilles.me/webpack-is-not-as-complicated-as-you-think/

JavaScript

webpack is not as complicated as you think

Everyone is using webpack today, and rightfully so. It is an amazing module bundler with many plugins that make it really powerful to use for production apps. Before I dived into webpack I read that its configuration was quite complicated and it was hard to set up. After playing around

JavaScript

ng-filter in Angular2 (pipes)

Filters are a great way to manipulate and filter data in AngularJS, in Angular they got a new name: Pipes. Worry not! They're just as easy to implement and a ton of fun. Creating the project We're going to use the Angular2 cli [https://github.com/angular/angular-cli] again. Install

JavaScript

ng-model in Angular2 (two-way data binding)

One of the things that made me love Angular 1.x was how easy it is to use two-way data binding. Luckily it's also a breeze to use in Angular2! What is two-way data binding? To simply put it, two-way data binding is keeping the model and the view synchronised.

JavaScript

ng-click and ng-if in Angular2 (click and *ngIf)

Following up on our series, we're going to dive into ng-click and ng-if next. Creating the project We're going to continue with the project from my previous post [https://jilles.me/ng-repeat-in-angular2-ng-for/]. I recommend you check that one out first so you get the basic idea of how a template

JavaScript Featured

ng-repeat in Angular2 (*ngFor)

After playing around with Angular2, I learned a lot of new cool stuff about the framework. In this series of posts I am going to show you how to do "Angular 1.x built in directives" in Angular2. Getting started To start a new project we are going to use

JavaScript Featured

Managing Node versions with nvm

Working with NodeJS is a lot of fun, managing versions not so much. If you have ever done any serious Node development you have probably ran into some version problems at some point. Luckily that is a problem that is easily solved with nvm. What is nvm? nvm [https://github.

tmux for developers

tmux is great, as a web developer I use it all the time. At first I thought "who needs a terminal multiplexer" but after having used tmux for a while now, I can't go without it. If you find yourself switching projects and restarting the same tools over and over

JavaScript

Awesome JavaScript array methods

If you work with JavaScript, you probably use arrays a lot. In this post I would like to introduce you to a few of my favourite array methods. For all the examples we will use the following array. var users = [ { firstName: 'Jilles', lastName: 'Soeters', gender: 'M' }, { firstName: 'Justin', lastName: 'Bieber',

10 essential Mac apps for developers

I work in an office as a JavaScript developer and am generally the go-to guy for any Mac / OSX problems people have. Whenever I do some pair programming I hear "wow, what's that tool you're using called?" a lot. I think it's time to share my 10 essential apps for

JavaScript

The Speech APIs

We live in an exciting time where we can speak to computers and they can speak back to us. This is not just limited to your iPhone or Android, these days it's also supported in browsers. 1) Speech Synthesis API Let's start with the lesser known Speech Synthesis API. This

Workflow

Badassify your terminal and shell

As a developer you probably spend a lot of time using the terminal. Whether you only use it a couple of times a day or day in day out, your terminal should feel good. If your terminal still looks something like this: You're going to love this post. (If you're

JavaScript

Introduction to Gulp

Being productive is something that us developers value a lot. We try to automate everything so there's little repetitive work left to do. Unfortunately there are still loads of developers who minify their JavaScript & CSS using online tools and refresh their browser manually once they save a file. What is

Node

Express Routing - Advanced Techniques

There's a little more to Express routing than simple GET and POST handling. If you've read my Express Routing - The Beginners Guide [https://jilles.me/express-routing-the-beginners-guide/] you'll know about the basic techniques. Today I'll go in some more advanced techniques that you need to know if you want to

Node

Express Routing - The Beginners Guide

Getting started with Express is not the easiest thing to do, if you have read my previous post on Express' app.js [https://jilles.me/getting-the-express-app-js/] you will have a basic understanding of a default Express app by now. If you haven't, I encourage you to read it. There is

Node

Understanding the Express app.js

If you're like me and you start with something new, you want to know what every little piece does and means. This was the first problem I had with Express coming from just a basic JavaScript background. After installing express and express-generator from npm and running npm install, you can

Personal

Welcome

My name is Jilles Soeters. I am a 21 year old developer from the Netherlands. I work at a company called Xebia as a front-end developer. I'm also a developer expert at Google. You should follow me on twitter @jilles [https://twitter.com/Jilles]!