Me
sebdd

thoughts and inspiration on designing, programming, and writing for the web

  • Blog
  • About
  • Speaking
  • Uses
  • Reads
  • Blogroll
  • Now
  • Newsletter
  • Twitter
  • Mastodon
  • Pinboard
  • Literal
  • Telegram
  • RSS
  • #css
  • #html
  • #javascript
  • #laravel
  • #livewire
  • #misc
  • #mysql
  • #programming
  • #tech
  • #writing

Enter & leave transitions

4 May 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

Now that we've built a dropdown list, lets add some transitions to create open & close animations.

Read more

Dropdowns

5 Mar 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

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.

Read more

File structure

19 Feb 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

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?

Read more

Event delegation

13 Feb 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

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.

Read more

Selecting elements (part 1)

6 Feb 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

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.

Read more

Selecting elements (part 2)

6 Feb 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

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.

Read more

JavaScript Framework Diet

6 Feb 2020

  • #javascript
  • #vanilla-js
  • #javascript-framework-diet

JavaScript frameworks are great, but overused. Adding small bits of interactivity to an interface shouldn't mean installing kilobytes of dependencies or introducing complex build tools.

It's time for a diet. I'm challenging you to build something without a framework, or follow along and learn something along the way.

Read more

blogging since 2015!
syntax highlighting with Torchlight