6 hours ago

I've got no idea how up-to-date it is (and I know it's a bit older), but this is probably one of the cleanest walkthroughs #react I've worked through.

I don't work in the front end at all, so having something that's accessible even with my limited time is a huge benefit.

Gonna use it as a jumping off point to more modern React, and front end in general.

#js #javascript

#husky debería ser clasificado como #malware

#js #development

Brian LeRoux 💚
13 hours ago

Returning to VanJS after many years away tonight. 🎉 #js #webdev

16 hours ago

TIL that `console.table()` exists. 😲


Aral Balkan
17 hours ago

:kitten: Just merged an improved slots implementation to main and you can now pass CSS class lists to components. 🎉

Read more:


Layout components:

Passing CSS class lists to components:

Named slots:

Sample project:

#Kitten #SmallWeb #templating #layout #components #web #dev #html #css #js

François Zaninotto
18 hours ago

ThumbHash: A very compact representation of an image placeholder. Store it inline with your data and show it while the real image is loading for a smoother loading experience. Similar to BlurHash. #WebPerf #JS


I'm insane.

So of course I do :p

And thats why I use #opera on any platform.

#firefox removed local #html / #js / #anything loading in a latest android app update.

So byebye ff xD

Max Bachhuber
2 days ago

I didn't expect that day to come... iOS 16.4 will support #WebPush 🥳😱

This will be one big step into fully supporting #ProgressiveWebApps on all major platforms.

And lot more features all people in #WebDevelopment have waited for:

#PWA #WebDev #HTML #CSS #JavaScript #JS #Apple

WDRL 310

4-day Work Weeks, Awesome CSS, Image Performance, and Type-safe APIs.

#webdev #typescript #js #css #worklife #ux #newsletter

Ze života scrapera AI :-) #js

Josiah Winslow
3 days ago

Someone notified me of a weird #browser interop issue that affected my #website. Apparently in #Safari, if you've selected some text and you click a button, the text selection will be cleared.

A fix for this was annoying, but quick to write.

#webdev #JS #JavaScript

A Discord chat log, which reads as follows:

Josiah Winslow — Today at 7:19 AM
someone let me know of a weird interop issue
apparently in safari on mobile, the text selection is cleared when you press a button
the pelicanizer relies on this not happening
so i gotta change that
but not now because i'm lazy
Josiah Winslow — Today at 8:26 AM
turns out yes i *am* fixing it now because i'm too lazy to be lazy
// Change text selection in document
document.onselectionchange = () => {
  /* HACK[id=safari-selection] In Safari, clicking a button clears the text
  selection. Because the Pelicanizer relies on the text selection being
  preserved upon clicking a button, we have to find some way to preserve the
  text selection.

  To work around this, every time the text selection changes, we save all text
  selection ranges (only Firefox supports multiple ranges, but just in case),
  and whenever a Hide/Toggle/Show button is clicked, we clear the text selection
  (again, just in case) and store the saved ranges back into it.

  const sel = window.getSelection();
  // If selection type isn't Range or selection has 0 ranges
  if (sel.type !== "Range" || sel.rangeCount === 0)
    // We aren't selecting anything
    lastSelectionRanges = null;

  // Collect all ranges in selection
  lastSelectionRanges = [];
  for (let i = 0; i < sel.rangeCount; i++)
    lastSelectionRanges[i] = sel.getRangeAt(i);
// Helper function for "___ Selected" buttons
function buildSelectedButtonHandler(action) {
  return () => {
    // Clear text selection
    const sel = window.getSelection();

    // Add back ranges from last selection
    // LINK #safari-selection
    for (const range of lastSelectionRanges ?? [])

    const letters = getSelectedElements()
      .filter(n => n.classList.contains(PELICAN_LETTER_CLASS));
    // If there are no letters, do nothing
    if (!letters.length) return;

    shouldRegenerateImage = true;

    letters.forEach(n => {

// Click "___ Selected" buttons
hideButtonEl.onclick = buildSelectedButtonHandler("add");
showButtonEl.onclick = buildSelectedButtonHandler("remove");
toggleButtonEl.onclick = buildSelectedButtonHandler("toggle");

Just saw this on Twitter account of @donavon

Saw it, wanted to share also here 🤡

> I saw this code in the wild. It doesn't fail, but 🤦‍♀️

> Do you see it?

#javascript #promise #programming #await #async #js

CodePen.IO :verify:
6 days ago

RT simey
the @CodePen #codepen #challenge is about Expanding Buttons ... Well here's the Expanding Brain meme (Galaxy Brain) in button format.
The code is a mess, don't look.
#webdev #css #js #frontend #FrontEndDeveloper


I'm feeling unimpressed with Yarn/Npm incompatibilities this morning. Overrides vs resolutions, wut? #js #javascript

Lord of the Rings second breakfast meme: We've had one Javascript package manager, yes. But what about a second Javascript package manager?
1 week ago

In case you need to solve some quartic equations:
Tried for days to get a JS quartic solver running for all cases in my geometry tool. All methods had issues. Maybe due to wrong implementations... Most descriptions I found weren't written that clearly for all cases. Then I found the linked paper. Easiest to implement and most stable without getting into numerical stuff! Only used the largest abs. value cube root instead of an arbitrary one #js #math

Symfony Station :symfony:
1 week ago

The brilliant Josh Comeau shares: "The End of Front-End Development" [not] #CSS #AI #JS

Figurine of Josh Comeau in a sea of fire.
Reuben Walker
1 week ago

The brilliant Josh Comeau shares: "The End of Front-End Development" [not] #CSS #AI #JS

1 week ago

Trying to write a piece of date code for me for the first time (I hate working with dates!) and this seems right! (apart from the return statements…)

Prompt: `javascript code to return true if the date "2023-03-10T14:45:04Z" is two weeks or older `

#js #webdev #lazy


screenshot of code response in gist link
Kristoffer Strube
1 week ago

Blogged: How to send push notifications to a browser in ASP .NET Core

I wanted to share this since Apple recently added support for Push Notifications on iOS.

#dotnet #csharp #mvc #js #push #apple

The anatomy of a javascript error. :blobaww: Helpful article about javascript error handling and throwing.

#javascript #js #errorhandling #errorthrowing #bookmark #fueraufmklo

1 week ago

UI Dev Newsletter is all about HTML, CSS, JS, UI, UX, and a11y, and it has a new design!

Stay ahead of the latest UI Dev news, and get a shiny list of up to ten free links every second Monday.

#HTML #CSS #JS #JavaScript #UI #UX #a11y

1 week ago

New article: With or without the JS framework

Is it really that unusual for a frontend developer not to use a JS framework?

#js #webdev

1 week ago

Added lines and polygons to my JS geometry tool! Was inspired by a tweet to make a demo to test out those new features. Basically one way to find the shape of the ground when you don't have access to geometry, but maybe a raycast. I suppose this is similar to how some games do it (not a game dev lol). Video shows some "sensors" looking down. The intersections are then combined as segments (green), closest points line (red), convex hull (blue area), and steepest incline (dashed line). #js #math

Okay so, I have a webpage that just uses only CSS variables for its colors, and all the elements have a transition for the background color

When changing the theme, I simply swap out an attribute value in the HTML element for the CSS selector that contains the CSS variables for the corresponding theme

However, while changing themes, the CSS transitions just don't seem smooth at all on mobile... Meanwhile on other websites that do similar don't have this issue

I'm confused

Mᴀʏᴀ :bc:
1 week ago

#js #javascript
Soooo, anyone who have had a problem using .append() or another js method in a recursion? I have (ugly) complicated nested functions and they are going perfectly fine for a full loop and than there's that .append() method going completely crazy, although it was fine in the first loop.
It doesn't create the <div> that I'm trying to create, therefore I'm not able to get the <div> in jQuery by id, and therefore it fucks up everything afterwards. Aaaaand than the <div> magically appears on the screen, although I'm not able to get to it on the back end. Also, I don't think that should be a problem but I thought it's worth mentioning, I use a full stop (.) in the id I use for the <div> in question I'm trying to create.
Also, sorry for the painful poor explanation, I'm just completely confused what the f is happening, so yeah, I found it hard to find good words to explain it.

UPDATE: it was the full stop 🤡

Ingo Richter
1 week ago

After a recent involuntary team change at work I want to update my #JS/#TS/#CSS/#React knowledge to ingest all the big changes from the last 3 years since I stopped working on web related projects. Any sites/books/projects recommendations beyond beginner level?

Raymond Scott Pert
1 week ago

RT @cyberghost

Personal websites/blogs that have a simple and clean layout and work with Tor using the safest option (JavaScript disabled):

Thank you ❤️

#tor #privacy #css #minimalism #js #javascript

1 week ago

Personal websites/blogs that have a simple and clean layout and work with Tor using the safest option (JavaScript disabled):

Thank you ❤️

#tor #privacy #css #minimalism #js #javascript

1 week ago

til about, and that it's stage 4

no more .slice().sort()!! #js

Nathan Friedly
2 weeks ago now supports fetch()'s new getSetCookie() API, to provide easier and more reliable access to uncombined Set-Cookie headers.

(Multiple Set-Cookie header values were combined into a single comma-separated string previously, which is tricky to parse since the values can also contain commas!)

#Node.js supports the API, #deno has an open PR, and hopefully #ReactNative will roll out support sometime soon.

See for more.

#javascript #js #nodejs #npm

Jan :rust: :ferris:
2 weeks ago

msw - Seamless REST/GraphQL API mocking library for browser and Node.js.

This is not your typical API Mock library - msw actually mocks by intercepting requests _on the network level_. ✨

#NodeJS #Testing #JS #JavaScript #Mocking #Mock #TDD #DevTools #WebDev #Network

2 weeks ago

Alternatives to #Handlebars:

Mustache: zero dependencies, and dead simple. Too simple? Being logic-less means that conditionals and loops are pre-cooked, and that may limit options.

Pug: main advantage and main drawback: its concise but idiosyncratic syntax, similar to that of #Slim — which I know and have used in the past, but is too much of a departure from #HTML.

EJS: similar to Handlebars, simple but apparently versatile. Documentation isn’t great.

:javascript: #JS #JavaScript :node: #Node.js #Node

2 weeks ago

Alternatives to #Express:

Koa, which can either replace or complement both Express and Connect.

Fastify, which looks straightforward and very similar to Express. Plugin for templating (supporting Handlebars, Mustache, Pug and EJS): @fastify/view.

NestJS, which seems too convoluted and probably redundant since it works on top of either Express or Fastify (?).

Meteor: more of a platform. No tutorial for vanilla JS (only for React, Vue, etc), and not oriented towards SSR.

I’ll probably go for #Koa or #Fastify.

:javascript: #JS #JavaScript :node: #Node.js #Node

2 weeks ago

:javascript: #JS :node: #Node

What should I use instead of #Express and #Handlebars for a web application in Node.js in 2023? Can someone summarise pros and cons of the most popular alternatives? I see way too many…

Dave Mackey
2 weeks ago

"Ain't it fun
Living in the real world"

Where the #documentation for the #JS browser project was written for the #C/C++ project.

"Ain't it good?


So what are you gonna do
When the world don't orbit around you?"

😂 I actually kind of enjoy the challenge, but it does make things much more time consuming.

I've upgraded all the bitrot on my blog and it's nice to see that the #JS ecosystem is just as easy in the ways it's easy and hard in the ways it's hard as it's always been.

2 weeks ago

More proof that Stackoverflow starts negging you if you stop answering questions for 10 years or so. #js

Stackoverflow UI showing a notification saying "You've earned the jquery tag badge."
2 weeks ago
blake shaw
2 weeks ago

How have folks' experience with the #JS backend for #Haskell been?

Ana Tudor 🐯
2 weeks ago

And the most random assortment of buttons to summon Satan

Fun fact: first made this for a conference talk. Upon arriving there, discovered the venue was a church. One of the paintings there crashed with a loud noise during my talk.

Requires support for registering custom properties via @ property.

#CSS #JS #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #mask #svg #satan

Animated gif. Clicking the Summon Satan button brings up a Lucipurr character and a control panel with a melting pot of styles for the controls there. These controls can make Lucipurr's horns and forehead pentagram start glowing, can make his whiskers start moving, can make his fangs and claws come out, can adjust the length of his pitchfork or his eye colour.
Ana Tudor 🐯
2 weeks ago


✨ an old download button

✨ an animated version (Chromium only) of the candy ghost buttons I wrote about a few years back on CSS-Tricks:

#CSS #JS #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment #mask #pastel

Animated gif. Shows a mesh-textured download button whose border, once clicked, starts filling up with a neon blue from left (0%) to right (100%, download complete).
Screenshot. Shows the 50% done state of the download button.
Animated gif. Shows the pastel ghost buttons filling up from the bottom to the top on hover and this fill XOR-ing the button text and icon.
Screenshot. Shows various fill levels for the candy ghost buttons.
Ana Tudor 🐯
2 weeks ago

Some XOR effect close buttons for some random quotes

The basic idea behind is something I recorded myself coding from scratch

The concept behind the XOR is something I explaine in this @css article

#CSS #JS #blending #CodePen #webDev #button #buttons #control #controls #coding #webDevelopment

Animated gif. Tiles getting rearranged after a tile before them is closed. The close button has a XOR effect on hover and the tile closing effect is the same.
3 weeks ago
Maarten Stolte
3 weeks ago

#lit #js Is there a way to find out the element (and it's properties like name) when you have a method auto executing instead of e.g. through click? Code is like this:
<input type="checkbox" name="foo" ?checked=${this._isChecked()} />

Ana Tudor 🐯
3 weeks ago

So we must scale down edges along the y axis post-skew in order to get a rhombus again!

This scaling factor is the cosine of the skew angle, which doesn't change linearly with a linear change in the angle from -90° to 90°. We can approximate the change with cubic-bezier, but we can't use individual transform properties as those would place the skew after the scale.

So when I first coded this 5 years ago, I chose to use #JS.

#css #transform #maths #trigonometry #CodePen #webDev #coding

--syf: cos(var(--sxa));
  skewX(var(--sxa)) scaleY(var(--syf))
--syf: cos(var(--sxa));
transform: skewX(var(--sxa));
scale: 1 var(--syf);
/* scale applied before skew here 👎 */
/* transform order matters!!! */
Ana Tudor 🐯
3 weeks ago

There's also this square tiling

This is a pure #CSS version of something I coded with #JS a few years back

If you look at the orange squares, they get squished to rhombi & eventually to a line (then they go back).

This is done with skew along the x axis. But the way this works means edges along the other axis (y) get longer & we don't have a rhombus (all 4 edges equal) anymore!

#CodePen #trigonometry #webDev #maths

Square tiling animation.
Screenshot of linked demo, showing edges of a former square getting longer along its y axis post x axis skew.
3 weeks ago

Yes this! Why I not prefer the single page application (SPA) only approach for a website...
- via @taseroth


#javascript #spa #web #website #webdev #wrong #js #dev #app #webapp

Josiah Winslow
3 weeks ago

Meanwhile, in WEBDEV-134, we have the classic "error I don't know the cause of". #js #javascript

// if we don't defer coloring, we get an error I don't know the cause of
Rainbow.defer = true;
Josiah Winslow
3 weeks ago

There is always a better way than using eval(). #js

Josiah Winslow
3 weeks ago

More comments from my VICOM-128 final. #HTML #JS

(Side note: that data-placeholder thing isn't an *element*, it's an *attribute*.)

<!-- This is where I choose to put my table of contents,
     with links to sections within the page.
     I know it looks pretty bare now,
     but there's content in there, trust me. -->
<div id="toc-container" class="yes-script"></div>
// These functions are stolen from
// Here is some code I found that doesn't quite work

	$("textarea").each(function () {
		this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
	}).on("input", function(){
		var top = $(window).scrollTop(); = "auto"; = (this.scrollHeight) + "px";
<!-- I don't know whether to have the output be a textarea or pre tag
     I want textarea, because pre won't behave how I want it to
     But then again, textarea won't behave how I want it to either -->
<textarea id="output" disabled rows="1" cols="50" placeholder="Program output goes here"></textarea>
     It works...but the name by itself doesn't validate...
     I'm beginning to question why HTML validation matters -->

<pre id="output" data-placeholder="Program output goes here"></pre>
Josiah Winslow
3 weeks ago

By my third #HTML assignment, I was excited to get started with #CSS! (I even threw in a bit of #JS.)

And of course, the end result looked like it was made by someone who had never used CSS before. Because it was.

Aw sweet now I get to find out how to actually use div
I sure hope this works
<div class="acronym-box">
Reusing code is fun beep boop
/* Ooh boy, this is about to get reeeeeeeeeal fun */
A website titled "Stop Creating Ridiculous Acronyms, Man!" that talks about acronyms that, in the author's opinion, are bad.

The site's design is all over the place, with a green background, black text, a red title, green underlined headers, and various other random design elements that make it hard to look at.
Josiah Winslow
3 weeks ago

I've done a lot of #coding for my college courses. And I've written a lot of #comments.

Here are some highlights I've found. I'll update as I find more.


#code #programming #dev #webdev #html #css #js #java #cpp #php

Thomas Michael Semmler
3 weeks ago

Here it is. I have been thinking about this for so long. And in a recent conversation that I had, I finally decided to actually write the post:

This is not a happy post. But it is attempting to provide words where they might be needed.

There is the job and the craft of making websites. What if we consider them separate identities with separate concerns?

Thank you to @darth_mall, @sebastianlaube, @sarajw, @ItsCrisDiaz, @nshki, @mnmlst and @m2m

#design #webdev #js

If you don't think that #ReactJS has improved #DX then I don't think you have done much #development; with or without it.

#webDev #JS #JavaScript #software #programming #frontend