Bytes #2 - JS OGs reminisce, Angular ditches IE, and the future of No Code

Angular 10 was released, the JS OGs wrote a REALLY long paper on the history of JavaScript, and 10 tips for getting the beach body of your dreams. GLHF.

Angular 10 is moving on from IE

Woody dropping IE

Me, 12 years ago. Angular, last week

They grow up so fast… Angular turned 10 (versions) old last week and decided it was time to grow up and move on from Internet Explorer 9, 10 and IE mobile. For now, they’ve just “deprecated support” (whatever that means), but they promised to fully drop support in a future release.

From the docs: “Supporting outdated browsers like these increases bundle size, code complexity, and test load, and also requires time and effort that could be spent on improvements to the framework.”

Some other highlights from this release:

New date range picker: Angular Material now includes a new date range picker that looks pretty slick.
New strict project setup: Enabling this new, optional strict flag initializes your project with some new settings that improve maintainability and help you catch bugs ahead of time.
Warning about CommonJS imports: You’ll now get a warning whenever your project pulls in a bundle that’s packaged with CommonJS, which can often lead to larger, slower apps.

The Bottom Line

Like Ed Sheeran, Angular’s most popular days are probably behind it. The haters will say it’s because of its relative complexity, which creates a steep learning curve for developers new to the framework. Just wait until they see me pull up to the club with my brand new Angular 10 date range picker though.

“JavaScript: The First 20 Years”

How we got here… And by we I mean, the JavaScript ecosystem.

Earlier this month, the ACM journal published a 189-page paper on the history of JavaScript from 1995-2015, written by the best two people for the job: JavaScript creator Brendan Eich and Allen Wirfs-Brock (basically the Walter Isaacson of JavaScript). Ironically, this definitely took longer to write than JavaScript itself.

The opening line had us hooked: “How a sidekick scripting language for Java, created at Netscape in a ten-day hack, eventually becomes the world’s most widely used programming language.” In case you don’t make it any further than that, here’s the tl;dr for the rest of the paper:

Part 1 – Origins of JavaScript: How and why JavaScript was initially developed by Brendan back in 1995, what Netscape wanted it to do, and what it evolved to do instead.
Part 2 – Creating a Standard: How the TC39 became the JavaScript Jedi Council and helped JS survive Netscape’s decline in the early 2000s.
Part 3 – Failed Reformations: Discusses the failed attempts to revise JavaScript and the issues it caused for the community in the mid 2000s. If they never figured it out, would we all be Flash developers right now?
Part 4 – Modernizing JavaScript: How we eventually got ECMAScript 2015 and a solid JavaScript foundation to build the web on for (hopefully) decades to come.

The Bottom Line

Hopefully David Fincher gets the movie rights.

Spot the Bug - Answer Below

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = Animal('Leo', 'Lion')

Cool bits

Robin Wieruch gave us an in-depth tutorial for using Oak in Deno.
Chris Noring demonstrates how you can learn from building your own web framework for Node.js.
A quick read on why target="_blank" is unsafe and how to fix it.
Chrome 85’s new DevTools now support style editing for CSS-in-JS frameworks and new JavaScript features like optional chaining.
Speaking of optional chaining, Lea Verou wrote about what it was like refactoring a large codebase to use it.
Thomas Honeyman wrote about how to write PureScript React components to replace JavaScript if you’re into that sort of thing.
Learn to build a simple fluid image pop up modal in this 30-minute video from Dev Ed.
TensorFlow.js is a library for machine learning in JavaScript that lets you use ML directly in the browser (updates LinkedIn to AI Engineer)

Spot the Bug - Answer

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Inside our Animal constructor function, we’re relying on JavaScript to create a this object for us. However, in order for it to know to do that, we need to invoke the function with the new keyword.

One Question Interview

What does the future of “No Code” look like?

“In 2011, Marc Andreessen famously wrote that software is eating the world. His article has proven prescient and shows no signs of slowing. Unfortunately, the power to take part in that economy was limited to the tiny percentage of people who could create software by hand with code. The No Code movement is about building bridges to creators and empowering them to create software without code. Already we see rich visual development tools for creating websites & user interfaces (full disclosure, I work on this one), connecting systems & managing data. There is going to be an explosion of specialized tools to distribute tasks that are currently confined to the work of engineers. The component mental model will be distributed across product organizations as the source of truth for Design Systems are moved from front-end developers to designers using tools like Modulz & Blocks. We’re going to see the data world shaken up with tools for data processing & AI model training. The cost of creating in-house tools is going to drop with the expanding breadth of functionality landing in cloud providers & new visual tools. It’s only a matter of time before accessible general purpose visual development unleashes the masses. Yes, Marc Andreessen was right, software is eating the world! Today more people can create software than ever and this trend will only continue as No Code is eating software.”

Merrick Christensen (Core team at WebFlow and the best engineer I know)

ELI5(ish)

JavaScript’s prototype

Whenever you create a function in JavaScript, that function has a prototype property on it whose value is an object. Any properties (or methods) you put on that object will be available to every instance of the function. What this means is that you can use the function’s prototype property to share methods across all instances of a function.

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}

Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}

const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

leo.eat(5)
snoop.eat(10)

For a more detailed breakdown, visit A Beginner’s Guide to JavaScript’s Prototype.