KBall catches up with Florian Rival about bring a C++ based game engine to the web by compiling to WebAssembly and creating a React-based frontend.

read more

Serving the right code to the right browsers can be tricky. Here are some options… Agreed. Jason Miller, creator of Preact, shares his thoughts on delivering the right scripts to the right browsers.

read more

The video of Feross’s talk “What I Learned from WebTorrent” from the Data Terra Nemo conference was just released. In the talk, Feross shares behind-the-scenes details about how WebTorrent was built, he reflects on hard-won lessons, and shares advice for other projects in the P2P and decentralized web space.

read more

Suz, Feross, and Emma have an honest conversation about burnout. They ask questions like — How do developers deal with burnout? What is burnout? What are examples of burnout in open source? Plus they close the show by sharing tips for avoiding burnout and also how to manage burnout if/when it happens.

read more

Typescene is a robust front end library written in TypeScript: strongly typed, no dependencies, no nonsense. It’s really great for desktop-like (or mobile) applications, not so great for blogs and other content. It isn’t backed by some major corporation, not even a startup, but it’s been built by me: one developer on a mission to build a no-nonsense dependency-less framework The author’s journey is noteworthy, but if you’re mostly wanting to know if this particular framework speaks to you, jump directly to its list of goals.

read more

This looks like a nice way to help make web components easier to use. If you want to see it in action, Chris Coyier has a solid write-up over on CSS-Tricks.

read more

Our friends at Gatsby just announced the stable release of Gatsby themes. Chris Biscardi writes on the Gastby blog: Using a Gatsby theme, all of your default configuration (shared functionality, data sourcing, design) is abstracted out of your site, and into an installable package. This means that the configuration and functionality isn’t directly written into your project, but rather versioned, centrally managed, and installed as a dependency. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another. What does “stable” mean? The core theme APIs have been stable for a long time under the __experimentalThemes flag in gatsby-config.js. Since they’re being used in production by a number of different companies to great effect, we’re promoting these APIs, specifically composition and shadowing, to stable within Gatsby core so that people can take advantage of them with confidence.

read more

“Higher-order function” is one of those phrases people throw around a lot. But it’s rare for anyone to stop to explain what that means. Perhaps you already know what a higher-order function is. But how do we use them in the real world? What are some practical examples of when and how they’re useful? Can we use them for manipulating the DOM? Or, are people who use higher-order functions showing off? Are they over-complicating code for no good reason?

read more

KBall MC’d a live show at NodeConf Colombia with a panel of 4 experts from the Node community — Kat Marchán, Anna Henningsen, Ruben Bridgewater, and James Snell. It was a great discussion about the future of Node.js and the Node.js ecosystem.

read more

Even though there’s a promise of native lazy loading with the launch of Chrome 75, between now, then, and the time period for the other browsers to adopt it as well, we have to continue developing our own lazy loading implementations using JavaScript. From Phil Hawksworth on CSS Tricks: In this post, we’ll look at an implementation that’s already been covered in brief detail in this post by Preerhi. We’re going to expand on that so you can add your own implementation of lazy loading to your site site as I’ve done on this little demo site. Phil covers these topics… The HTML markup for lazy loading Spotting when to load images with Intersection Observer Adding support for responsive images with picture and source elements Creating an attractive initial state with small images and CSS Mass-producing image assets Creating helpers to generate the required HTML

read more

An update from Addy Osmani about the impact of JavaScript on the web and performance in 2019, and things you can do to impact it. Interesting because the number one items to pay attention to have changed from the conventional wisdom of a couple years back. Osmani: One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant costs of processing scripts are now download and CPU execution time.

read more

My big concern is at the bottom of that technology pyramid. The lowest common denominator of the Web. The foundation. The rhythm section. The ladyfingers in the Web trifle. It’s the HTML. And it is becoming increasingly clear to me that there’s a whole swathe of Frontend Engineers who don’t know or understand the frontend-est of frontend technologies. Solid rant with a nice list of resources at the end. 👌

read more

Great description of how the Hooks API leads us from an imperative style of implementing side effects (“Do thing x on mount, do thing y on unmount”) to a declarative style of implementing side effects. Author Sebastian De Deyne puts it this way: Instead of thinking about when we should apply the side effect, we declare the side effect’s dependencies. This way React knows when it needs to run, update, or clean up.

read more

Fascinating look through at one of the up-coming features in React. The React team keeps innovating and pushing the ecosystem forward. In this case, by creating a beautifully simple declarative approach to handling with variable network times and asynchronicity.

read more

This looks great for quickly seeing the structure of a JSON object without all the scrolling. Pretty cool that the output is valid JS so you can copy/paste it to other places as well.

read more

Rich kicked the proverbial hornet’s nest yesterday. After you read his 10-point post, stick around for the comments, many of which rebut one or more of those points. I’ll weigh in on #3: Platform Fatigue Every time we add a new feature to the platform, we increase that complexity — creating new surface area for bugs, and making it less and less likely that a new competitor to Chromium could ever emerge. Co-sign! 💯

read more

Jerod and Divya are joined by George Mandis to learn all about his “frivolous” JavaScript library that’s helped countless websites implement the beloved cheat code. Ten years later and still actively maintained, Konami-JS has stood the test of time and produced some epic stories along the way (you’ll love hearing how George broke Marvel.com).

read more

Native lazy loading is coming to the web. Since it doesn’t depend on JavaScript, it will revolutionize the way we lazy load content today, making it easier for developers to lazy load images and iframes. I’m excited about native lazy loading! We’ve been using lozad.js for lazy loading with some success. There are times when it seems that IntersectionObserver fails to its job and an image won’t load. (If you scroll the element out and back in to the viewport, it will usually work the second time.) But it’s not a feature we can polyfill, and it will take some time before it becomes usable across all browsers. n this article, you’ll learn how it works and how you can progressively replace your JavaScript-driven lazy loading with its native alternative, thanks to hybrid lazy loading. I might try this hybrid approach and see what happens…

read more

First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you! If you think this sounds crazy… just wait until you have a look at it: .item { cursor: pointer; --js:( function toggle() { this.classList.toggle('active'); } this.addEventListener('click', toggle ); ); } Play around with CJSS on Codepen, but that’s all I’d advise you to do with it (as would the author).

read more

KBall, Divya, and Nick get together with Chris Ferdinandi to talk about vanilla JavaScript, best resources for learning, and our favorite vanilla JavaScript tips, tricks and APIs.

read more

We’re talking with Sacha Greif to discuss the State of CSS survey and results. CSS is evolving faster than ever. And, coming off the heels of their annual State of JavaScript survey, they’ve decided to take on the world of styles and selectors to help identify the latests patterns and trends in CSS. We talk through the history and motivations of this survey, the methodology of their data collection, the tooling involved to build and run the survey, and of course we dig deep into the survey results and talk through the insights we found most interesting.

read more

From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! 💪 🚀 Nice use of the the <details> element to hide the answers from view until you’re ready for them.

read more

Inspired by JSParty #70, 4 quick lessons on the philosophy of testing. The motivation? Tools like Mocha, Jasmine and Jest have made writing tests far easier… But there’s still a gap. It’s extremely hard to find information on the philosophy of testing. What to test and why. How much is enough? What type of tests should I be writing, and when does it fit into my process?

read more

What’s the front-end equivalent of a micro-services architecture? A micro-frontends architecture of course. This approach makes a ton of sense, though in my opinion you will definitely want to have an internal components library and some cross-frontend coordination so your UI doesn’t degrade into a series of disconnected, disjointed experiences. It’s hard to argue against the benefits stated by author Cam Jackson: Micro frontends are all about slicing up big and scary things into smaller, more manageable pieces, and then being explicit about the dependencies between them. Our technology choices, our codebases, our teams, and our release processes should all be able to operate and evolve independently of each other, without excessive coordination.

read more

Zach Leatherman joins the party with Divya and Nick to talk about fonts and static site generators! Zach shares his knowledge about font loading, what can go wrong, and how we can avoid issues. Then we discuss Zach’s newest project, Eleventy, a simple static site generator, and the panelists share things they are excited about.

read more