Tag Archives: javascript

A Beginner’s Guide To Proxies in JavaScript

In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating.

One of the best ways to control an object is with a Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.

A Beginner’s Guide To Proxies in JavaScript →
MDN Web Docs: Proxy

💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.

JavaScript Classes are not “just syntactic sugar”

Andrea Giammarchi:

After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.

I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅

JS Classes are not “just syntactic sugar” →

Seam carving: content-aware image resizing … in JavaScript

Oleksii Trekhleb has implemented the Seam Carving algorithm in JavaScript.

With this article I want to do three things:

  1. Provide you with an interactive content-aware resizer so that you could play around with resizing your own images
  2. Explain the idea behind the Seam Carving algorithm
  3. Explain the dynamic programming approach to implement the algorithm (we’ll be using TypeScript for it)

Using the algorithm it’s possible to resize an original image (center) without distorting important features in the image (left) unlike regular resizing which squeezes the image (right).

Using the resulting JS Image Carver you can see the algorithm in action.

Content-Aware Image Resizing in JavaScript →
JS Image Carver →
JS Image Carver Source (GitHub) →

JavaScript Temporal API — A Fix for the Date API

Anyone who has worked with dates and time in JavaScript knows how broken the built-in Date is. In the near future we’ll be able to use Temporal instead, an ECMAScript feature currently at Stage-3

💁‍♂️ Stage-3?

The Technical Committee which is concerned with the standardization of ECMAScript (e.g. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.

Nathan Sebhastian has a good overview on how it compares to Date, along with some practical examples.

The new Temporal API proposal is designed to solve the problems with the Date API. It brings the following fixes to JavaScript date/time manipulation:

  • Creating and dealing only with immutable Temporal objects
  • Straightforward API for date and time computations
  • Support for all timezones
  • Strict date parsing from ISO-8601 format
  • Support for non-Gregorian calendars

JavaScript Temporal API — A Fix for the Date API →

Comparing the New Generation of Build Tools

Over at CSS-Tricks Hugh Haworth has done a nice write-up on the next generation of build tools that have been popping up.

A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app.

Covered are esbuild, Snowpack, Vite, and wmr.

Comparing the New Generation of Build Tools →

Related: Recently Snowpack author Fred K. Schott was a guest on React Wednesdays to talk about Snowpack:

Style Pseudo-elements with Javascript Using Custom Properties

Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript.

In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help.

👉 If you set a custom property on the element that “owns” the pseudo-element the pseudo-element itself can pick it up, thus enabling a way to style it.

Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties →

This Web Site is a Tech Talk

Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020:

The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.

/me nods along for the entirety of this talk.

Powering his faux-live-coding slidedeck is Queue Code, a package to let you live code like he did in this talk.

This Web Site is a Tech Talk (incl. resources) →

The new native web: Bye bye animation libraries?

Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup:

Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have a critical look at its limitations.

JavaScript: What is the meaning of this?

Jake Archibald:

JavaScript’s this is the butt of many jokes, and that’s because, well, it’s pretty complicated. However, I’ve seen developers do much-more-complicated and domain-specific things to avoid dealing with this this. If you’re unsure about this, hopefully this will help. This is my this guide.

JavaScript: What is the meaning of this? →

Needledrop: A Turntable Interface for Music Playback

Leveraging the JavaScript YouTube Player API and with a good pinch of CSS on top, Thomas H. Park created this record player for you to play with.

Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be.

Clever usage of repeating-radial-gradient to create the grooves of the record.

Needledrop →
Needledrop (Blog Post) →