JavaScript Icon

JavaScript

JavaScript is an object-oriented programming language used alongside HTML and CSS to give functionality to web pages.
830 Stories
All Topics

Brandon Bayer github.com

Blitz.js — a Rails-like framework for full-stack React apps without an API

Brandon Bayer:

The central thesis is that most apps don’t need a REST or GraphQL API. Blitz brings back the simplicity of server rendered frameworks like Ruby on Rails while preserving everything we love about React.

Additionally, Blitz is bringing other Rails goodness that’s missing in the React ecosystem like file structure and routing conventions, a really nice console REPL, intelligent code-scaffolding, and a fine-tuned out-of-the-box setup with Prettier, Typescript, ESlint, Jest, Cypress, etc.

The framework ‘wars’ continue right alongside the monolith-vs-microservices debate. For more on the principles behind Blitz, check out the manifesto.

JavaScript backstage.io

Spotify's open platform for building developer portals

The philosophy behind Backstage is simple: Don’t expose your engineers to the full complexity of your infrastructure tooling. Engineers should be shipping code — not figuring out a whole new toolset every time they want to implement the basics. Backstage allows you add “stuff” (tooling, services, features, etc.) by adding a plugin, instead of building a new tool. This saves you work and avoids the need of your team to learn how to use and support yet another tool.

Read all about how Spotify uses this internally in this blog post.

Spotify's open platform for building developer portals

Svelte github.com

Why Svelte is our choice for a large web project in 2020

This is a well-reasoned piece that includes Svelte’s advantages, disadvantages, and drawbacks today.

Is using bleeding edge tech risky and foolish? How much blood are we talking about? My experience tells me Svelte is a safe choice, more leading edge than bleeding. However I’m more risk tolerant than most people, I have a lot of experience with JS frameworks, and our team is motivated, so we can deal with rough edges.

Facebook Engineering Icon Facebook Engineering

Rome is an experimental JavaScript toolchain

It includes a compiler, linter, formatter, bundler, testing framework and more. It aims to be a comprehensive tool for anything related to the processing of JavaScript source code.

Rome aims to be a replacement for many existing JavaScript tools. We will, however, offer integrations for components in other tools. For example, using the Rome compiler as a plugin for another bundler.

This comes out of Facebook’s React Native team. It’s MIT licensed and was started by Sebastian McKenzie, who also authored Babel and Yarn.

JavaScript github.com

An extremely fast JavaScript bundler and minifier

Why build another JavaScript build tool? The current build tools for the web are at least an order of magnitude slower than they should be. I’m hoping that this project serves as an “existence proof” that our JavaScript tooling can be much, much faster.

According to the author, esbuild is fast because..

  1. it’s written in Go
  2. much of the work is done in parallel
  3. it takes very few passes and avoids data transformations
  4. it was coded with performance in mind
An extremely fast JavaScript bundler and minifier

CSS-Tricks Icon CSS-Tricks

Why JavaScript is eating HTML

Mike Turley for CSS-Tricks:

JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.

I get this question occasionally and I often have trouble answering it. All of the materials I’ve found on this topic are written for an audience that is already familiar with JavaScript — which is not terribly useful to those who focus on HTML and CSS. But this HTML-in-JS pattern (or something else that provides the same benefits) will likely be around for a while, so I think it’s an important thing that everyone involved in web development should understand.

Crystal mint-lang.com

Mint – a programming language for writing single page apps

Mint has all the tools you need to write error free, easily readable and maintainable applications in record time.

Built-in styling, data management, language-level routing, and JavaScript interop make this a very interesting project, indeed. It’s still in heavy development, so the only real-world example you’re going to see is their implementation of realworld.io.

Marco Otte-Witte simplabs.com

How to over-engineer a static page

Marco Otte-Witte:

When we set out to rebuild our own website simplabs.com in 2019, we wanted to use that project as an opportunity to ignore all economic considerations (and reason you could say) and dive deep into what was technically possible. Doing so would allow us to build something that was super customized for our specific needs and highly optimized for performance. We ended up spending a lot of time and effort but are quite pleased with the result.

While we cannot recommend anyone following our example as your time is most likely better spent elsewhere, this post explains the approach we took. I will be covering topics like static pre-rendering and client-side rehydration, advanced bundling and caching strategies as well as service workers.

Highlights added by me because this is a fun read (and no doubt a fun experiment for them), but I also cannot recommend you follow their example. 😉

Marja Hölttä v8.dev

Understanding the ECMAScript spec (part 1)

When’s the last time you read the ECMAScript spec? Marja Hölttä on the V8 dev blog:

In this article, we take a simple function in the spec and try to understand the notation. … Even if you know JavaScript, reading its language specification, ECMAScript Language specification, or the ECMAScript spec for short, can be pretty daunting. At least that’s how I felt when I started reading it for the first time.

Also check out How to read the ECMAScript specification which covers most of the material from this post, but from a different angle.

JavaScript github.com

Clean Code concepts adapted for JavaScript

Software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. This is not a style guide. It’s a guide to producing readable, reusable, and refactorable software in JavaScript.

Not every principle herein has to be strictly followed, and even fewer will be universally agreed upon. These are guidelines and nothing more, but they are ones codified over many years of collective experience by the authors of Clean Code.

React github.com

A simplified Jira clone built with React and Node

This looks like an excellent read for anyone looking to level up their fullstack JS chops:

I do React consulting and this is a showcase product I’ve built in my spare time. It’s a very good example of modern, real-world React codebase.

There are many showcase/example React projects out there but most of them are way too simple. I like to think that this codebase contains enough complexity to offer valuable insights to React developers of all skill levels while still being relatively easy to understand.

A simplified Jira clone built with React and Node
0:00 / 0:00