How to create your own CodePen clone with vanilla JavaScript
I’m working on a new project-based JavaScript course for beginners and aspiring developers.
In addition to a ton of projects, I wanted to include little mini-challenges with each lesson. And to do that, I want to include a code sandbox (like CodePen) right in the tutorial.
Rather than loading buckets of React like most libraries for this require, I decided to build my own. Let’s look at how!
An example challenge For example, imagine that you’ve just learned about the Array.
When I think of showing off syntax highlighted code on the web, I think of code that takes in a string of code, finds relevant substrings (tokens) with elaborate RegExes, then wraps them in spa…
Syntax Highlighting code snippets with Prism and the Custom Highlight API
Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of span elements wrapped around the tokens? Thanks to the Custom Highlight API, you can!
wants to extract the all link from webppage. · Issue #2708 · microsoft/playwright
I have to implemented this function. var hyperlinks = await page.evaluate( () => { return document.links; }); web page has about 287 links but this function is returning a array of 287 element b...
Let’s learn how modern JavaScript frameworks work by building one
In my day job, I work on a JavaScript framework (LWC). And although I’ve been working on it for almost three years, I still feel like a dilettante. When I read about what’s going on in …
HTMX Playground allows you to write code in a backend-like environment, running entirely inside the browser. You can define endpoints within server.js and render your own templates. It will run a mock server that intercepts outgoing requests from HTMX.
From time to time I need to stitch together two or three images into a horizontal or vertical image. It seems so wasteful to spin up a whole design document for that task. What I wanted was a CLI that does that for me and I found one that does the job: Stitchy.
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
How Marketing Changed OOP In JavaScript — Smashing Magazine
Discussing the decisions surrounding JavaScript prototypes, the article by Juan Diego Rodriguez scrutinizes their origin, examines missteps in the design, and explores how these factors have affected the way we write JavaScript today.
GitHub - henriqueinonhe/promises-training: Practice working with promises through a curated collection of interactive challenges. This repository provides a platform to refine your skills, complete with automated tests to to give you instant feedback and validate your progress.
Practice working with promises through a curated collection of interactive challenges. This repository provides a platform to refine your skills, complete with automated tests to to give you instan...
argyleink/blingblingjs: 💲 Micro-library of shorthands for DOM selection, events, and attribute manipulation
💲 Micro-library of shorthands for DOM selection, events, and attribute manipulation - argyleink/blingblingjs: 💲 Micro-library of shorthands for DOM selection, events, and attribute manipulation