JavaScript Icon

JavaScript

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

JavaScript github.com

A Minecraft clone built entirely with JS

Having to open an additional app to play a game is sometimes too tiring. Therefore, I thought it’d be interesting to somehow implement Minecraft with javascript, essentially bringing the whole Minecraft game into the web. This not only takes away the tedious process of installing the game, it also brings the entire game to players within a couple clicks. Words cannot describe how much I adore the thought that building this extremely ambitious piece of software was a better alternative to the tedious process of installing the game. 😆

read more

Fred K. Schott DEV.to

A future without Webpack

We continue to use bundlers even though ES Modules (the new JavaScript module system) runs natively on the web. Why? Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that has always taken pride in its view-source, easy-to-get-started ethos. Related ~> JS Party #69

read more

JavaScript itnext.io

‘No way to prevent this’, says only development community where this regularly happens

A wonderfully snarky take on the ongoing challenges with dependency management in JavaScript. PURESCRIPT, NPM — In the hours following another package disaster on npm in which a lone developer killed more than dozens of CI builds and caused serious warnings in thousands of others, developers of the only community where this kind of disaster routinely occurs reportedly concluded Monday that there was no way to prevent the disaster from taking place.

read more

Wassim Chegham xlayers.dev

Preview and convert Sketch design files into any framework and library

xLayers is a web app which aims to bridge the gap between designers and developers. Its mission is to allow both the design and development worlds to collaborate and iterate fast. Upload your Sketch file and you will get the code generated for your favorite framework of choice (React, Vue, Angular, LitHtml, Stencil and even Xamarin Forms…and more to come).

read more

Dan Abramov overreacted.io

Algebraic effects for the rest of us

Like so many of Dan Abramov’s posts, this blew my mind. He is incredible at breaking down complicated concepts and making them understandable, as well as showing the reasons behind the concepts. Should you read this post? I’d say yes, but Dan would say: If you’re the kind of person who likes to learn about programming ideas several years before they hit the mainstream, it might be a good time to get curious about algebraic effects. Don’t feel like you have to though. It is a bit like thinking about async / await in 1999.

read more

Brad Frost bradfrost.com

Choosing tools

You’re working on a home improvement project. You can choose max. 5 tools. Which ones do you pick? Sort of depends on what the home improvement project is, yeah? If the gig is repairing the toilet tank gasket, I’m likely not going to need my circular saw. But what if I really love my circular saw? I agree 110% with what author Brad Frost is saying here - we have a tendency in our world to get caught up in which tools we like and try to apply them to every situation and rarely ask what the right tools are for any particular job.

read more

Slack Engineering Icon Slack Engineering

When a rewrite isn’t: rebuilding Slack on the desktop

The Ship of Theseus is a thought experiment that considers whether an object that has had each of its pieces replaced one-by-one over time is still the same object when all is said and done. If every piece of wood in a ship has been replaced, is it the same ship? If every piece of JavaScript in an app has been replaced, is it the same app? We sure hoped so, because this seemed like the best course of action. Fascinating look behind the scenes at both the process of rewriting a massively used application and the particular architectural choices made along the way. The approach used was at once incremental and all-encompassing, rewriting a piece at a time into a gradually growing “modern” section of the application that utilized React and Redux. And the results? 50% reduction of memory use and 33% improvement in load time… not too shabby.

read more

Peter Lu github.com

XSM – an "extraordinarily simple" state management solution

[XSM] consists of a global store and the machinary to re-render the component when the state is updated. The store is just a JavaScript object with key and value pairs. By binding the instance reference, this, to the store, each component can react to the changes of the store whether it is re-render or unmount. It is really this simple, no need to use HOC, provider, reducer, decorator, observer, action, dispatcher, etc. Hence, all the three most popular framewokrs work the same way in XSM and that’s why we can keep the code size very small and support the three frameworks without framework specific modules. Works out of the box with Angular, React, and Vue.

read more

Google steinhq.com

Use Google Sheets as your no-setup database

This looks like a great option for proofs of concept or when you want to take an idea to market as fast as possible. It’s also probably empowering to non-developers on the team since so many people can slice-n-dice spreadsheets better than SQL databases. You can self-host the open source version or pay for the hosted offering. I’d love to see a comparison between this and Airtable.

read more

Smashing Magazine Icon Smashing Magazine

Improve your JavaScript knowledge by reading source code

One of the most amazing things about Open Source is how much it enables you to learn from the best. Just open up the source for your favorite library or framework and you can start learning from the best in the business. But that can feel intimidating. This article breaks down some approaches you can use to make it easier. As author Carl Mungazi says: Reading source code is difficult at first but as with anything, it becomes easier with time. The goal is not to understand everything but to come away with a different perspective and new knowledge. The key is to be deliberate about the entire process and intensely curious about everything.

read more

Medium Icon Medium

I’ve spent 5 years writing a JavaScript framework on my own

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

Chris Biscardi gatsbyjs.org

Gatsby themes promoted to stable!

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

James Sinclair jrsinclair.com

What are higher-order functions, and why should anyone care?

“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

Phil Hawksworth CSS-Tricks

Roll your own lazy loading

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

Addy Osmani v8.dev

The cost of JavaScript in 2019

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

Pete Lambert petelambert.com

HTML is the web

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

0:00 / 0:00