PHPnews.io

Overview for 'sebastiandedeyne'

Dropdowns

Written by Sebastian De Deyne / Original link on Mar. 5, 2020

On to our first component: a dropdown list. I'm going to walk through the implementation I landed on in a recent project. There are many ways to build dropdowns, and you might want to shape the API your way, so use this post as a source of inspiration.Before we dive into the script, let's take a lo…


Give it five minutes

Written by Sebastian De Deyne / Original link on Feb. 21, 2020

I came across this post by Jason Fried (from Basecamp) about giving ideas a few minutes before shooting them down.I've caught myself blurting out unnecessary negative opinions when presented with an idea. More often than not, I have more empathy towards the idea a few minutes later, and feel bad ab…


File structure

Written by Sebastian De Deyne / Original link on Feb. 19, 2020

In the previous posts, we've gone through our first few utility functions. We now have enough in our toolbox to move on to our first component. However, where do all these functions belong?Let's get straight to the point. Here's what the structure of my vanilla JS projects looks like:components/dat…


Event delegation

Written by Sebastian De Deyne / Original link on Feb. 13, 2020

After learning how to select elements in the DOM, it's time to zoom into events. This is the third post in the JavaScript Framework Diet series.Haven't read the first two posts? Get started with the introduction.Consider the following piece of HTML:<a href="/projects"><svg><!-- List …


Selecting elements (part 2)

Written by Sebastian De Deyne / Original link on Feb. 6, 2020

In Selecting elements (part 1) we learned how to select elements from the DOM, and how to find elements inside other elements, both with our own $ and $$ helpers.In part 2, we're going to review two DOM element instance methods: closest and matches.Finding the nearest matching parent with closestEl…


Selecting elements (part 1)

Written by Sebastian De Deyne / Original link on Feb. 6, 2020

Lets get warmed up! Before we can get productive, we need two small helpers that we'll be using in most components we'll build from here on. I'm talking about $ and $$, which are wrappers around document.querySelector and document.querySelectorAll.function $(selector, scope = document) {return scop…