Tag: Documentation

Astro 2.0 and TypeScript 5.0 beta

Posted on by

#​623 — January 27, 2023

Read on the Web

JavaScript Weekly

Astro 2.0: The Next-Gen ‘Islands’-Oriented Web Framework — 2.0 includes hybrid rendering (mixing of SSR and SSG outputs), type safety for Markdown & MDX, and an upgrade to Vite 4.0. Astro is worth exploring when performance is key as it works with popular frameworks but lets you deliver the least JS possible to get pages rendered.

Fred Schott

Prefer a talk? Nate Moore’s ViteConf talk ▶️ Islands Architecture, Astro, and You will bring you up to speed.

Deep Cloning Objects in JavaScript, The Modern Way — If you’ve been leaning on something like Lodash for deep cloning, you might not need to any longer. “It’s been a long time coming, but we finally now have the built-in structuredClone function to make deep cloning objects in JavaScript a breeze.”

Steve Sewell

Go From Professional Web Developer to Lead Engineer — Aspiring lead developer? Our collection of comprehensive video courses cover the fundamentals of JavaScript, TypeScript, React, web performance, and more.

Frontend Masters sponsor

Announcing TypeScript 5.0 Beta — A new major version number, but users of the popular typed JS superset will face a ‘similar upgrade experience’ to previously. Decorators make it in as a first class feature, significant performance and package size optimizations are present, export type * is supported, all enums are now union enums, and much more.

Daniel Rosenwasser (Microsoft)

AlaSQL.js 3.0: Isomorphic JavaScript SQL Database — A SQL database you can use in the browser, Node.js or mobile apps. An interesting bit of functionality is you can use SQL to query JavaScript objects – example. “The library adds the comfort of a full database engine to your JavaScript app. No, really.”

Andrey Gershun

IN BRIEF:

🏅 If you’re really into Vue.js, you’ll soon be able to become officially certified in it.

If you’re using React, you should be using a React framework, 🐦 says Andrew Clark of the core team.

The creator of alternative JS runtime Bun asks: “If there’s one thing missing from Bun for you to switch, what is it?” You can reply on Twitter.

jQAPI.com is an amazing meeting of old and new JavaScript – it’s an Astro powered version of jQuery’s documentation!

RELEASES:

Shoelace 2.0
↳ Agnostic library of web components.

μFuzzy 1.0
↳ Tiny fuzzy search library.

React Router 6.8

Node.js 19.5.0

📒 Articles & Tutorials

Getting Started with SvelteKit — SvelteKit only recently hit 1.0 and this is a comprehensive overview of how to build a site using the Svelte-oriented app framework. It covers topics like routing, layouts, data, props and more.

Adam Rackis

Using .NET Code from JavaScript using WebAssembly — “Starting with .NET 7, you can easily run any .NET method from JavaScript without needing the whole Blazor framework.”

Gérald Barré

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

scrollend: A New JavaScript Event — Finally an event you won’t need a hotel booking for. scrollend provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? Surprisingly not – Firefox 109+ supports it too.

Adam Argyle (Chrome Team)

Packaging Rust Apps for the npm Registry — Isn’t npm just for JavaScript projects? Nope. Node is required to make this technique work, but as long as you can package and execute a binary, you’re good to go.

Orhun Parmaksız

Making Sense of TypeScript using Set Theory — This article certainly doesn’t hang around. Neat diagrams too.

Vladimir Klepov

React Authentication, Simplified

Userfront sponsor

Accessible Hamburger Buttons without JavaScript — Sometimes you need to consider if modern techniques allow you to avoid JavaScript. Here’s a CodePen if you want to play.

Pausly

While we’re on the topic of less JavaScript, the latest episode of the Stack Overflow podcast ▶️ ‘The less JavaScript, the better’ focuses on Astro.

🛠 Code & Tools

Uppy 3.4: Powerful, Modular JavaScript File Uploader — Upload not just from local sources but even Dropbox or Instagram. Integrates with popular frameworks and supports resumable uploads. GitHub repo.

Transloadit

Nut.js 3.0: Desktop Automation from Node — Take control of your desktop (Windows, macOS or Linux) in code with control over keyboard + pointer, along with image matching functionality. GitHub repo.

Simon Hofmann

Optimize Your Systems’ Performance With TelemetryHub – Real-Time Data Monitoring & Analysis — An advanced data visualization and analysis tool that can help you identify and resolve unseen issues in your environment. Try free.

TelemetryHub by Scout sponsor

Eleventy v2.0: First Beta of the Popular Site Generator — Eleventy is a popular Node.js static site generator and v2.0 includes enough major changes that a thorough beta is needed. The creator ▶️ made this quick video about the release.

Zach Leatherman

Mock Service Worker 1.0: API Mocking Library for Browser and Node — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

Drift: A Self-Hostable Gist-Like / Pastebin Service — Built with Next.js 13.

Max Leiter

Dygraphs 2.2
↳ Interactive charts of time series data.

actions/github-script 6.4
↳ Write GitHub Actions workflows in JS.

Playwright 1.30
↳ Browser automation framework.

Faast.js 6.4
↳ Serverlessly call JS functions on AWS Lambda & Google Cloud Functions.

Cypress 12.4
↳ Testing framework for anything in a browser.

D3plus 2.1
↳ Extend D3.js with more visualization types.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Senior Full-Stack Engineer – React + TypeScript — Come help Qwire modernize how studios, composers, artists, publishers, labels, and the rest of the industry manage music rights.

Qwire

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Vite 4.0 released

Posted on by Simon Helberg

#​618 — December 9, 2022

Read on the Web

JavaScript Weekly

Vite 4.0 Released — From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box: fast hot module replacement, instant server starts, optimized builds with Rollup, TypeScript and JSX support (more on why to use Vite here). You can even give it a quick spin online via vite.new.

Evan You and Vite Contributors

Anjana Vakil on the JavaScript Fundamentals — This video course covers the core skills needed to become a professional JavaScript programmer, including writing reusable code with functions, conditionals, fetching data from APIs, and more. It’s everything you need to continue your journey to become effective at JavaScript.

Frontend Masters sponsor

npm Gains New Security Features — GitHub continues its work in making the npm ecosystem safer. Two new things: granular access tokens so package owners can better control access to publishing workflows, and a new code explorer to look directly at the contents of packages from the official npm site.

Monish Mohan (GitHub)

Console Ninja: console.log Output Right Next to Your Code — A VS Code extension that displays console.log output and runtime errors next to your code. Jack Herrington recorded ▶️ a neat 6 minute intro showing it off recently.

Wallaby.js Team

IN BRIEF:

There’s a React documentary in production – ▶️ here’s the trailer.

AWS has unveiled Step Functions Distributed Map, a way you can run hugely parallel (up to 10,000 simultaneous executions) operations (written in JavaScript, perhaps) over data and documents stored on S3.

A quick look back 27 years to the launch of JavaScript in 1995.

📊 D3 7.7, the latest version of the popular data visualization framework, is out and I wanted to recommend looking at co-creator Mike Bostock’s notebooks if you want inspiration on using D3, a look at new features, etc. He posts interesting stuff.

The JS debugger in the latest VS Code release now supports console.profile for CPU profiling code, as well as nested sourcemaps.

RELEASES:

Rome 11 – Linter in urbe novissima sunt.

Storybook 7.0 beta 0

Rollup 3.7 – ES module bundler.

xv 2.0 – Zero-config Node test runner.

Nx 15.3 (A huge news update post.)

Ember 4.9

Bun 0.3 – The challenger JS runtime.

📒 Articles & Tutorials

Sandboxing with Partytown — Partytown provides a way to run third party scripts within a Web Worker rather than on the main thread. Could this be used for sandboxing? Weston tried it out and concluded it’s not quite there.

Weston Ruter

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

Is Prisma Better Than Your ‘Traditional’ ORM? — Prisma has become a very popular ORM option in the Node space in recent years. The creator of the Practica Node starter app considers if Prisma makes sense as a universal ‘go to’ ORM. No, but..

Yoni Goldberg

When to Use gRPC vs GraphQL — A balanced comparison of two popular API protocols to see where each works best.

Loren Sands-Ramshaw

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

▶  A Discussion on Optimizing Your JavaScript with Rust — A chat with Vercel’s Lee Robinson at the recent Next.js conference.

Ben Popper podcast

🛠 Code & Tools

Codux: A Visual IDE for React — One of the co-founders of Wix introduces a new standalone tool to accelerate the React development process. It currently only supports Chromium-based browsers but you can take it for a test drive or learn more from its homepage.

Nadav Abrahami (Wix)

Harlem 3.0: Simple Extensible State Management for Vue 3 — Provides a simple functional API for creating, reading, and mutating state.

Andrew Courtice

Open Source Firebase Alternative for Web, Mobile, and Flutter Devs

Appwrite sponsor

JS Image Carver: Content-Aware Image Resizer and Object Remover — Uses the seam carving approach (if you’ve used ‘Content Aware Scale’ in Photoshop, you’ve seen it). The live demo on this one is fun to watch.

Oleksii Trekhleb

Civet: The CoffeeScript of TypeScript? — If you liked CoffeeScript back in the day, here’s the same idea in a modern TypeScript-oriented form.

Daniel Moore

Maska 2.1: Zero-Dependency Input Mask — Happy in vanilla situations, but can also integrate with Vue 2/3. GitHub repo.

Alexander Shabunevich

node-calls-python: Call Python from Node — One use case the author mentions is plugging into Python’s rich ecosystem of machine learning tools.

Menyhért Hegedűs

reduced.to: Open Source URL Shortening App Built with Qwik — The app itself is live at reduced.to but you might find it interesting as an example of a frontend built using the Qwik framework.

Ori Granot

📺 Yesterday, This Dot Media published Qwik’s creator Misko Hevery giving ▶️ a live coding introduction to Qwik – a useful way to get up to speed.

💻 Jobs

Software Engineer — Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness. Join our engineering team.

Stimulus

Senior UI Dev — Join us and innovate with MicroFrontends, custom Node tools, build systems (Webpack/Github Actions), TypeScript, React, and more with a11y and DX in mind.

Vertex Inc

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Spacetime 7.3
↳ Lightweight JavaScript timezone library.

Partytown 0.7.3
↳ Run intensive third-party scripts in a worker.

Splitter 1.4
↳ React component for split views.

reveal-md 5.4
↳ Reveal.js presentations from Markdown files.

Mongoose 6.8
↳ MongoDB object modeling library.

React Tooltip 5.0