Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
If you ever need to make an input field or text area non-editable the readonly attribute comes in very handy. When the readonly attribute is present in the markup, it specifies that the user will not be able to modify the value. However the user will still be able to tab to it and copy the text. Note: The readonly … Read more
The post Text Input Non-Editable appeared first on Web Design Weekly.
Flexslider is one of the most used sliders, for good reason. This snippet helps lazy load your images. In order to create a perceived performance for users, we as authors shouldn’t allow the loading of every single image at once for sliders or carousels. In this snippet we only load the first and second image on init window load. This … Read more
The post Lazy Loading Images for Flexslider appeared first on Web Design Weekly.
Do you ever find yourself trying to remember the URL path of you images directory? Well with Sass you can quickly add the path to the desired location and just use the variable throughout your code. Sass to the rescue. All you need to do is declare the variable and then use the interpolation syntax when you reference it. More … Read more
The post URL as a Sass Variable appeared first on Web Design Weekly.
This little snippet can come in handy when you need to serve a different header on a per page basis. All you need to do is create a new header file – header-yourfilename.php and then put in some logic in your desired template file. In my case I have a header file called header-home.php and in my homepage template I … Read more
The post Load a Different Header in WordPress appeared first on Web Design Weekly.
There are a few ways to implement the clearfix hack but the following Sass Mixin has been in my toolbox for the last year thanks to this article on Nicolas Gallaghers blog. Usage:
The post Sass Clearfix Mixin appeared first on Web Design Weekly.
Those with a keen eye will notice that the up and down arrows for the number input doesn’t show up in Chrome (and some other WebKit based browsers) until you hover or are focused on the input. To force the arrows to be visible we just need to change the opacity of the inner and outer spin button.
The post Force Up and Down Arrow for Number Input appeared first on Web Design Weekly.
Recently I had a great conversation with an outstanding User Experience designer about a few interactions on a project we were working on. One of the points we talked about was, what should happen when text within input fields are excessively long. The desired result we both agreed on was to change the font size of the html input field … Read more
The post How to change the Input Font Size based on Text Length appeared first on Web Design Weekly.
WordPress shortcodes are a simple way to set up functions to create macro codes for use in post content. For instance, the following shortcode (in the post/page content) would add your recent posts into the page: It’s pretty simple and brings your WordPress blog alive with ease. Recent Post Short Code In WordPress 1 Add this code to your functions.php file. 2 … Read more
The post Recent Post Shortcode appeared first on Web Design Weekly.
This snippet is super small but is super handy. It detects to see if JavaScript is enabled on the users browser. If yes, a class will be added to the <body> tag Adds the class yourClassName to <body> tag if Javascript is enabled.
The post Add Class To Body If JavaScript Is Enabled appeared first on Web Design Weekly.
#702 — August 29, 2024
JavaScript Weekly
Rspack 1.0: The Rust-Powered JavaScript Bundler — Far from being ‘yet another bundler’ with its own approach and terminology to learn, Rspack prides itself on being webpack API and ecosystem compatible, while offering many times the performance. The team now considers it production ready and encourages you to try your webpack-based projects on it.
Rspack Contributors
💡 Rspack also has a family of ancillary tools worth checking out, such as Rsdoctor, a tool for analyzing and visualizing your build process (for both Rspack and webpack!)
Front-End System Design — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more.
Frontend Masters sponsor
How to Create an NPM Package in 2024 — Sounds simple, but there are a lot of steps involved if you want to follow best practices, introduce useful tools, and get things just right. Matt Pocock walks through the process here, and there’s a 14-minute screencast too, if you’d prefer to watch along.
Matt Pocock
IN BRIEF:
🤖 v0 is an AI-powered tool from Vercel for, originally, generating shadcn/ui-powered React components based upon prompts you supply. Now, however, it has basic Vue.js support too.
Deno 1.46 has been released and promises to be the final 1.x release before the much awaited Deno 2.0. Deno’s Node compatibility improves even more (it now supports Playwright and many more things) and ships with V8 12.9.
📊 IEEE has published its latest annual list of top programming languages. JavaScript takes third place, but TypeScript has leapt up several places to fourth.
RELEASES:
Prisma 5.19 – The popular ORM for Node.js and TypeScript adds ‘TypedSQL’, a way to write raw SQL queries in a type-safe way.
📈 billboard.js 3.13 – Popular D3 chart library adds area-step-range charts.
pnpm 9.9 – Fast, space efficient package manager.
React Email 3.0, Ember 5.11, Bun v1.1.26
📒 Articles & Tutorials
JS Dates are About to Be Fixed — Handling dates and times is famously a painful area for programmers and JavaScript hasn’t done a lot to make it easier. Libraries like Moment.js help a lot, but Iago looks at how the Temporal proposal and its features will begin to help a lot more over time.
Iago Lastra
Weekly Chats on the Art and Practice of Programming — Your home for weekly conversations with fascinating guests about how technology is made and where it’s headed.
The Stack Overflow Podcast sponsor
JavaScript Generators Explained — Jan was frustrated by the quality of documentation and articles explaining generators in JavaScript, and set out to explain things in a way that a more advanced developer could appreciate.
Jan Hesters
Implementing a React-a-Like from Scratch — While it’s unlikely you’ll actually want to do this, at least thinking about it can prove instructive as to what’s going on in React’s engine room.
Robby Pruzan
▶ How to Implement the 2048 Game in JavaScript — Ania is back with one of her usual easy to follow walkthroughs of implementing a complete game in JavaScript. This time it’s the 2048 sliding puzzle game. (Two weeks ago she did Tic-Tac-Toe as well.)
Ania Kubów
Learn Role-Based Access Control and Simplify Permissions Management — Enhance security and streamline access by managing user roles with Clerk Organizations.
Clerk sponsor
📄 The Only Widely Recognized JS Feature Ever Deprecated – Spoiler: It’s with. Trevor Lasn
📄 Generating Unique Random Numbers in JavaScript Using Sets Amejimaobari
📺 21 Talks from the Chain React 2024 Conference – A React Native event. YouTube
📄 Exposing Internal Methods on Vue Custom Elements Jaime Jones
📄 The Interface Segregation Principle in React Alex Kondov
🛠 Code & Tools
TypeScript 5.6 Release Candidate — As always, Daniel presents an epic roundup of what’s new. We’ll focus more on it next week though, as the final release is anticipated to land next Tuesday (September 3).
Daniel Rosenwasser (Microsoft)
Vuestic UI 1.10: A Vue.js 3.0 UI Framework — Features 60 customizable and responsive components and with the v1.10 release it’s gained a significant bundle size optimization, a custom compiler that improves build time performance, and other minor enhancements. GitHub repo.
Vuestic UI
✅ Bye Bye Bugs — Get 80% automated E2E test coverage for mobile and web apps in under 4 months with QA Wolf. With QA cycles complete in minutes (not days), bugs don’t stand a chance. Schedule a demo.
QA Wolf sponsor
Material UI v6: The Popular React UI Design/Component System — At ten years old, the popular design system has its latest major release. There’s a focus on improved theming, color scheme management, container queries, and React 19 support. There are revamped templates to be inspired by, too.
García, Bittu, Andai, et al.
npm-check-updates 17.0: Update package.json Dependencies to Latest Versions — That is, as opposed to the specified versions. It includes a handy -i interactive mode so you can look at potential upgrades and then opt in to them one by one.
Raine Revere
Code Hike 1.0: Turn Markdown into Rich Interactive Experiences — Aimed at use cases like code walkthroughs and interactive docs, Code Hike bridges the gap between Markdown and React when creating technical content that takes full advantage of the modern web.
Rodrigo Pombo
Calendar.js: A Calendar Control with Drag and Drop — A responsive calendar with no dependencies, full drag and drop support (even between calendars), and many ways to manage events with recurring events, exporting, holidays, and more.
William Troup
📊 Perspective 3.0 – Data visualization and analytics component. The core is written in C++ and compiled to WebAssembly where it can be used from JavaScript. Their homepage shows it off well with a live example.
json-viewer 3.5 – Display JSON data in a readable, user-friendly way.
♟️ Stockfish.js 16.1 – A JavaScript chess engine.
jest-dom 6.5 – Jest matchers to test DOM state.
Marked 14.1 – Fast Markdown compiler / parser.
Javet 3.1.5 – Java + V8. Embed JS into Java.
Pixi.js 8.3.4 – Fast 2D on WebGL engine.
#701 — August 22, 2024
JavaScript Weekly
Regexes Got Good: The History (and Future) of Regular Expressions in JavaScript — Regular expression support was always a little underwhelming in JS, but things have improved. Steven takes us on a tour to refresh our knowledge, as well as show off his ‘regex’ library that boosts JS regexes to a true A++ rating. Steven was co-author of O’Reilly’s Regular Expressions Cookbook and High Performance JavaScript so knows his stuff.
Steven Levithan
WorkOS: The Modern Identity Platform for B2B SaaS — WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It’s trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow.
WorkOS sponsor
Node v22.7.0 (Current) Released — Node 22.6 let you strip types from source code, but now with –experimental-transform-types you can transform TypeScript-only syntax into JavaScript before running it too. Module syntax detection is now also enabled by default.
Rafael Gonzaga
Bun v1.1.25: Now Running at 1.29 Million Requests per Second — I’m having a little fun with the title, but the latest version of the JavaScriptCore-based JS runtime has added node:cluster support and uses this to demo a high level of HTTP throughput on a ‘Hello World’ example. Support for V8’s C++ API has also landed – notable because Bun isn’t V8-based.
Ashcon Partovi
IN BRIEF:
We’ve mentioned ECMASCript 2024 a bit recently, but Pawel Grzybek has a neat and tidy overview of what’s new in the ES2024 spec.
🐝 Could Wasp be ‘the JavaScript answer to Django’ for full-stack webdev? The Wasp team certainly thinks so.
🎙️ Ryan Dahl, creator of both Node.js and Deno, went on the Stack Overflow podcast to talk about Deno’s current limitations and what’s coming in Deno 2.0.
RELEASES:
PlayCanvas Engine 2.0 – A powerful JS-based Web graphics platform.
Node v20.17.0 (LTS) – The LTS release of Node adds support for require-ing synchronous ESM graphs.
Astro 4.14 – The popular agnostic content site framework now includes an experimental API for managing site content.
pnpm 9.8, Vuetify 3.7, Neo.mjs 7.0
Join Us for ViteConf on October 3rd — Learn how the best teams are building the next generation of the web with Vite!
StackBlitz sponsor
📒 Articles & Tutorials
50 TypeScript F–k Ups Mistakes — An admittedly colorfully-titled book digging into lots of subtle mistakes you might run into with TypeScript. It’s available on Leanpub in PDF, iPad, and Kindle forms, or you can read it all directly on its GitHub repo. At least worth a skim in case you’re running into any of its points..
Azat Mardan
The Official Redux Essentials Tutorial, Redux — The long standing guide to how to use the popular Redux state container the right way with best practices has undergone a big reworking with TypeScript used throughout, new concepts added, and more coverage of RTK/React Toolkit features.
Redux Team
React is (Becoming) a Full-Stack Framework — Is React merely a frontend library? How does the backend fit in? The author shares his thoughts on what led him to start considering React as more of a full-stack solution.
Robin Wieruch
📄 Using JavaScript Generators to Visualize Algorithms Alexander G. Covic
📄 Optimizing SPA Load Times with Async Chunks Preloading Matteo Mazzarolo
📄 Using isolatedModules in Angular 18.2 Thompson and Lyding (Angular Team)
📄 How to Generate a PDF in a JavaScript App Colby Fayock
🛠 Code & Tools
Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework — A lightweight WYSIWYG Markdown editor based around a plugin system that enables a significant level of customization. It’s neat to see the docs are rendered by the editor itself. GitHub repo.
Mirone
Fuite 5.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at a URL to analyze for memory leaks. Here’s how it works. There’s also a video tutorial.
Nolan Lawson
✂️ Cut Your QA Cycles Down to Minutes with Automated Testing — Are slow test cycles limiting your dev teams’ release velocity? QA Wolf provides high-volume, high-speed test coverage for web and mobile apps — reducing your test cycles to minutes. Learn more.
QA Wolf sponsor
LogTape: Simple Logging Library with Zero Dependencies — I’m digging this new style of library that promises support across all the main runtimes (Node, Deno, Bun) as well as edge functions and the browser devtools.
Hong Minhee
📊 Chart.js 4.4: Canvas-Based Charts for the Web — One of those libraries that feels like it’s been around forever but still looks fresh and gets good updates. Bar, line, area, bubble, pie, donut, scatter, and radar charts are all a piece of cake to render. Samples and GitHub repo.
Chart.js Contributors
Legend State: A Tiny, Fast and Modern React State System — A year ago, Jack Herrington wondered if Legend State could be ▶️ ‘the ultimate state manager’ and things have progressed a lot since, with it now boasting being the fastest React state library in town.
Jay Meistrich
Tagger: Zero Dependency, Vanilla JavaScript Tagging Library — You can play with a live demo here.
Jakub T. Jankiewicz
tinykeys 3.0: A Keybindings Library in ~650 Bytes — Keeps things as simple and sweet as possible.
Jamie Kyle
heic-to: Convert HEIC/HEIF Images to JPEG or PNG in the Browser
Hopper Gee
Cheerio 1.0 – HTML/XML manipulation library for Node.
🎨 Chroma.js 3.0 – JavaScript color manipulation library.
eta (η) 3.5 – Embedded JS template engine for Node, Deno, and browsers.
Embla Carousel 8.2 – Carousel library with fluid motion and good swipe precision.
d3-graphviz 5.6 – Graphviz DOT rendering and animated transitions.
Alpine AJAX 0.9 – Alpine.js plugin for building server-powered frontends.
Happy DOM 15.0 – JS implementation of a web browser sans UI.
Elliptic 6.5.7 – Elliptic curve cryptography in plain JS.
Poku 2.5 – Cross-platform JavaScript test runner.
💚 Use Node? Check out the latest issue of Node Weekly, our sibling email about all things relating to Node.js — from tutorials and screencasts to news and releases. We do include some Node related items here in JavaScript Weekly, but we save most of it for there.
An amazing payment form widget, a new Vue.js framework for static websites, and lots more in our compilation for the month of November.
Our resources collection for the month of October includes helpful fronted libraries, a cute CSS framework, and some awesome Node.js tools.
This September’s collection is packed with cool JS libraries, an experimental CSS framework, and other awesome tools!
New JavaScript tools from the Facebook developers team, an excellent Electron starter kit. and more in our web dev resources compilation for March!
Our web dev resources compilation for February comes packed with awesome React frameworks, tools for writing better tests, and much more!
We’re kicking off 2020 with a list of some of our favorite web dev libraries, frameworks and tools that you should use in your next project.
A collection of our favorite web dev resources for the month of May, featuring useful JS tools, React components, and more!