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

A fascinating read on how transducers work, building them up from scratch from reducers using JavaScript, then showing how to uses built-in transducers from Ramda. And if all that sounds like gobbledygook, you’re not alone - but read this article and it will start to make sense. :) Author James Sinclair on why bother learning this challenging concept: A solution that would give us the elegance of using small, simple functions. But also the efficiency of doing our processing in a single pass through the array. What is this magical solution? It’s a concept called a transducer.

read more

We all love to hop on the latest JavaScript bandwagon - and there are some amazing things you can do with modern frameworks. Modern JavaScript and DOM APIs are much improved as well, with a movement to ditch jQuery in favor of vanilla javascript. But Martin Tournoij also has a pretty good case for why jQuery might still be pretty nice, starting with: Pages like You might not need jQuery try to sell the idea that it’s easy to ditch jQuery, but the very first example is a good reason to use jQuery: one line of trivial jQuery code gets replaced with 10 lines of vanilla JS code!

read more

Inspired by JSParty #77, a breakdown of 5 of the top skills for junior JavaScript developers to learn. My personal favorite point is this one on the importance of looking for bigger picture patterns: One of the great things about front-end development in 2019 is that despite the abundance of frameworks, we’ve also started to see some big megatrends that are true across frameworks. This is good news for developers because it means that as you go deep in one framework you can still pick up skills that will translate to others if need be.

read more

You’re running out of good reasons to stay on Medium.

read more

If you watched ceej’s The economics of open source, then you already heard about Entropic. It’s only a month old, but the federated package registry already has some working code and a fleshed out manifesto. Now’s not the time to use Entropic, but now is the time to get involved.

read more

I’m blown away by the clarity of explanation in this post, and came away with it excited to start using Reduce way more. Definitely worth a read to level up your game. Reduce is the Swiss-army knife of array iterators. It’s really powerful. So powerful, you can build most of the other array iterator methods with it, like .map(), .filter() and .flatMap(). And in this article we’ll look at some more amazing things you can do with it. But, if you’re new to array iterator methods, .reduce() can be confusing at first.

read more

Jerod, Suz, Divya, and Kball share their thoughts, opinions, and advice on developer strengths and weaknesses — compromise, communication, tool mastery, deep dives into dev history, and mentorship/sponsorship. .

read more

I love modern JS frameworks, but there’s so much amazing goodness built straight into modern browsers. As post author Louis Lazaris says: With so much focus on tooling lately, it’s nice to take a break from all of the React and npm-install-everything posts and take a closer look at some pure DOM and Web API features that work in modern browsers with no dependencies.

read more

Real life data on how Google indexes javascript-rendered websites today. This has been a controversial subject, and this article by no means settles it entirely, but provides some strong data for what types of dynamic content are well indexable and which are not. Though to be honest, I think the most important conclusion the author makes might be this one: If you need your site to perform on search engines other than Google, you will definitely need pre-rendering of some sort.

read more

With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.

read more

An interesting example of porting a native/mobile custom library to the web using webassembly. Didn’t work as expected out of the box, so they ported another custom library and raced them. Then added a JavaScript implementation for a trifecta. Love that they shared the actual customer-facing results too. As authors Pranav Jha and Senthil Padmanabhan say: Technology evolves at a very rapid pace. Every day we hear new things getting launched. But only a few make a difference to customers, and WebAssembly is one of them.

read more

I 💚 youtube-dl, but I use it just infrequently enough that I can NOT remember which flags to use. I guess I’m not the only one!

read more

JAMStack is all that, whole grain low fat, I know you want a piece of that… No but seriously now, I love what’s going on with the JAMstack and the implications for performance, security, and maintainability. Not sure what this stack even is? Why should you care? In this interview, Vitaly Friedman of Smashing Magazine talks with Phil Hawksworth from Netlify about what it is all about: JAMstack is all about a way of deploying and serving websites that don’t rely on an origin server, they don’t rely on requests hitting an active server all the time.

read more

Daniel Brain makes the case for “functional-ish” JavaScript… code that utilizes functional programming concepts without going all-in on functional. But functional programming does not need to be all-or-nothing, and in my view it’s better to be a little more pragmatic. That is to say, if you don’t do anything else, try writing code that’s functional-ish. This definitely matches my personal approach. Fully functional still kinda blows my brain, but layering in functional approaches has dramatically improved my code. What about you? Would love to hear some functional or functional-ish “war stories”.

read more