Common JavaScript issues developers face

#​599 — July 22, 2022

Unsubscribe  |  Read on the Web

JavaScript Weekly

RedwoodJS vs. Blitz.js: The Future of Fullstack Meta-Frameworks — Quite a lengthy review of both frameworks. Redwood is an opinionated React-based framework oriented heavily round the idea of a GraphQL server as the ‘one API’ at the heart of an app. Blitz, on the other hand, is a Ruby on Rails-inspired layer on top of Next.js with SPA, server side rendering and static site generation chops. Don’t forget Remix too.. this is a busy space!

Tamas Kadlecsik

Ten Common JavaScript Issues Developers Face — If you’ve been working with JavaScript for many years (perhaps since 2014 when this newly-updated article was first penned), these are potholes you (probably) already know how to steer around, but there’s plenty to chew on here otherwise.

Ryan J. Peterson

CSS Animations and Transitions — Join David Khourshid on this detailed video course and discover how to bring your interfaces to life with UI animations. Learn about CSS transitions, keyframes, custom properties, choreography, animation states, and much more

Frontend Masters sponsor

Reducing the Size of a Large JavaScript SDK Package by 29% — After some comments on how large their JavaScript package was getting, developers at Sentry (an app monitoring service) set to work trying to get an initial 30% reduction. Tree shaking turned out to have the biggest effect.

Abhijeet Prasad (Sentry)

Payload 1.0: A Headless CMS Platform Built on Node — An exciting project that appeared in early 2021 with a bang then became open source just a couple of months ago. There’s a lot to like about Payload if you need a headless CMS including a customizable React-based admin system, GraphQL or REST APIs, flexible auth and file upload systems, and it’s easy to get started. GitHub repo.

Payload CMS

IN BRIEF:

RELEASES:

NeutralinoJS 4.7.0 – Lightweight cross platform apps with JS & HTML.
npm-check 6.0 – Check for outdated or unused dependencies.
Fastify 4.3 – Fast Node.js web framework.
ESLint 8.20
Angular 14.1
Vue 2.7.8
.. and more releases at end of this issue.

📒 Articles & Tutorials

Thoughts on Integer Math in JavaScript — No concrete examples here but if fast integer math is something you need, you could do worse than to build upon James’ thinking (to which he hopes to write a more complete follow-up).

James Darpinian

JavaScript Obfuscation Techniques by Example — The Hacker News discussion around this article was, perhaps, even more interesting, I thought.

Trickster Dev

10 npm Security Best Practices

Snyk.io sponsor

JavaScript AST Manipulation with Babel: The First Steps — From the same author as the item on obfuscation (above) comes a look at the basics of using Babel to turn obfuscated code into a syntax tree and then back into more readable JavaScript.

Trickster Dev

▶  An Introduction to SvelteKit in 80 MinutesSvelte is an increasingly popular way to build reactive frontend apps and SvelteKit provides a framework and more complete development experience around Svelte. Nacho gives us a tour.

Nacho Falk

▶  Blazingly Fast ‘React’ with Fresh — One of the most popular React YouTubers out there heads Deno-side to look at Fresh, a new islands-based web framework that doesn’t use React per se but.. close enough, with Preact and JSX for rendering and templating.

Jack Herrington

2022 State of the Java Ecosystem Report — New Relic’s report is based on data gathered from millions of applications providing performance data.

New Relic sponsor

Converting Cypress E2E Specs from JavaScript to TypeScript — More to it than you might expect.
Gleb Bahmutov

🛠 Code & Tools

Tweakpane 3.1: Compact UI Element for Tweaking Parameters and Viewing Value Changes — This is the sort of thing you see in creative coding demos quite often, but could be used almost anywhere. You can create your own mini pane of basic UI controls to dynamically adjust (or just reflect) values relating to something going on on the page. It’s simple and looks great, and if you want a demo, then…

cocopon

Fireworks.js 2.0: It’s Literally Fireworks for Your Web Page — Well, literally in a visual sense at least 😉 The homepage is a neat demo given you can dynamically play around with all of the library’s parameters (courtesy of Tweakpane, mentioned above!)

Vitalij Ryndin

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest.

Wallaby.js sponsor

Superstate: A New ‘Micro’ State Management Library — So micro, even, that the getting started tutorial takes all of 30 seconds to read. GitHub repo.

Guilherme Oderdenge

TanStack Table v8: Headless UI for Building Tables and Datagrids — Want the hard work of managing a table or data grid element taken care of but want to keep 100% control over markup and styles? This is what you need (if the idea of a ‘headless UI’ is new to you, read this intro). Vanilla JS, React, Vue, Solid and Svelte developers are all taken care of.

Tanner Linsley

Atropos: Create Touch-Friendly 3D Parallax Hover Effects — Use with plain JS, React, or Vue and it’s easy to configure with no dependencies. The home page includes some quite striking examples that aren’t as over the top as you’d expect.

Vladimir Kharlampidi

OTHER QUICK RELEASES:

PrimeNG 14 – Suite of 80+ Angular UI components.
Acorn 8.8 – Tiny JS parser written in pure JS.
Discord.ts 10.0 – Framework to create a Discord chat bot.
Prisma 4.1 – Popular ORM for Node.js and TypeScript.
MelonJS 13.0 – 2D sprite-based JS game engine.
Secure Electron Template 20.0 – An Electron boilerplate app.
zip.js 2.6.2 – Zip and unzip files in the browser or Deno.
Octokit.js 2.0.4 – GitHub SDK for browsers, Node, and Deno.

💻 Jobs

Software Engineers — Sticker Mule is the Internet’s most “kick ass” brand. Our software team operates from 17 countries, and we’re always looking for more exceptional engineers.
Sticker mule

Attend Our July 27th 2022 State of Wage Inequality in Tech Discussion — Join Hired, Blacks in Technology, Ada’s List, Interview Kickstart, and Speak_ for a collaborative panel discussion about Hired’s 2022 Impact of Wage Inequality data report.
Hired

Did you know..

Related Post

Seven weird ways to call a JavaScript functionSeven weird ways to call a JavaScript function

<table border=0 cellpadding=0 cellspacing=0 align="center" border="0"> <tr><td style="font-family: -apple-system,BlinkMacSystemFont,Helvetica,sans-serif; font-size: 15px; line-height: 1.55em; "> <div> <table border=0 cellpadding=0 cellspacing=0 border=0 cellpadding=0 cellspacing=0><tr> <td align="left" style="padding-left: 4px; font-family: -apple-system,BlinkMacSystemFont,Helvetica,sans-serif; font-size: 15px; line-height:

Popular Node.js practices to reconsiderPopular Node.js practices to reconsider

<table border=0 cellpadding=0 cellspacing=0 align="center" border="0"> <tr><td style="font-family: -apple-system,BlinkMacSystemFont,Helvetica,sans-serif; font-size: 15px; line-height: 1.55em; "> <div> <table border=0 cellpadding=0 cellspacing=0 border=0 cellpadding=0 cellspacing=0><tr> <td align="left" style="padding-left: 4px; font-family: -apple-system,BlinkMacSystemFont,Helvetica,sans-serif; font-size: 15px; line-height:

Douglas Crockford on ‘retiring’ JavaScriptDouglas Crockford on ‘retiring’ JavaScript

<table border=0 cellpadding=0 cellspacing=0 align="center" border="0"> <tr><td style="font-family: -apple-system,BlinkMacSystemFont,Helvetica,sans-serif; font-size: 15px; line-height: 1.55em; "> <div> <table border=0 cellpadding=0 cellspacing=0 border=0 cellpadding=0 cellspacing=0><tr> <td align="left" style="padding-left: 4px; font-family: -apple-system,BlinkMacSystemFont,Helvetica,sans-serif; font-size: 15px; line-height: