JavaScript Icon

JavaScript

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

Rich Harris DEV.to

Why Rich Harris doesn't use web components

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

Smashing Magazine Icon Smashing Magazine

A progressive migration to native lazy loading

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

CSS github.com

Enjoy writing CSS in your JS? Try writing JS in your CSS! 😏

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

The Changelog The Changelog #349

The state of CSS in 2019

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

Kevin Ball DEV.to

Let’s talk testing: 4 quick lessons on the philosophy of testing

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

JavaScript martinfowler.com

Micro frontends

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

James Sinclair jrsinclair.com

Magical, mystical JavaScript transducers

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

JavaScript arp242.net

An argument for jQuery in 2019

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

Kevin Ball zendev.com

Top 5 skills to learn as a junior JavaScript developer

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

James Sinclair jrsinclair.com

Functional JavaScript: how to use Array Reduce for more than just numbers

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

Smashing Magazine Icon Smashing Magazine

Vue.js and SEO: how to optimize reactive websites for search engines and bots

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

WebAssembly ebayinc.com

WebAssembly at eBay: a real-world use case

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

Smashing Magazine Icon Smashing Magazine

Demystifying JAMstack: an interview with Phil Hawskworth

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

JavaScript medium.com

Making the case for "functional-ish" JavaScript

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

0:00 / 0:00