#JS

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

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;
return;
}

// 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(); sel.removeAllRanges(); // Add back ranges from last selection // LINK #safari-selection for (const range of lastSelectionRanges ?? []) { sel.addRange(range); } const letters = getSelectedElements() .filter(nodeIsVisible) .filter(n => n.classList.contains(PELICAN_LETTER_CLASS)); // If there are no letters, do nothing if (!letters.length) return; shouldRegenerateImage = true; letters.forEach(n => { n.classList[action](PELICAN_LETTER_HIDDEN_CLASS); }); }; } // Click "___ Selected" buttons hideButtonEl.onclick = buildSelectedButtonHandler("add"); showButtonEl.onclick = buildSelectedButtonHandler("remove"); toggleButtonEl.onclick = buildSelectedButtonHandler("toggle");$

Arda Kılıçdağı

4 days ago

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?

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.
https://codepen.io/simeydotme/pen/jOveeBg
#webdev #css #js #frontend #FrontEndDeveloper

:sys_twitter: https://twitter.com/simeydotme/status/1638858415895109634

Leo Petražickis 🇺🇦

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?

sibaku

Symfony Station :symfony:

In case you need to solve some quartic equations: https://www.mdpi.com/2227-7390/10/14/2377
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

The brilliant Josh Comeau shares: "The End of Front-End Development" [not]
https://www.joshwcomeau.com/blog/the-end-of-frontend-development/ #CSS #AI #JS

Figurine of Josh Comeau in a sea of fire.

Reuben Walker

The brilliant Josh Comeau shares: "The End of Front-End Development" [not]
https://www.joshwcomeau.com/blog/the-end-of-frontend-development/ #CSS #AI #JS

felix

alt: https://gist.github.com/blackspike/7c57b80fc747721e739b88b11256e50c

Trying ai.com 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 ai.com code response in gist link

Kristoffer Strube

#dotnet #csharp #mvc #js #push #apple
https://kristoffer-strube.dk/post/how-to-send-push-notifications-to-a-browser-in-asp-net-core/

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.

👨‍💻 ⇑⇑⇓⇓⇐⇒⇐⇒BA

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

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

https://www.bugsnag.com/blog/anatomy-of-a-javascript-error

CiTA

https://www.silvestar.codes/side-projects/ui-dev-newsletter/

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

CiTA

https://www.silvestar.codes/articles/with-or-without-the-js-framework/

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

kkarpieszuk

https://dev.wpzlecenia.pl/2023/03/wordpress-przepisany-w-javascript-bez-php-i-serwera/

#wordpress przepisany w #js bez #php i bez #apache

sibaku

Freeeeeeeeeeeeeeeeeeeeee :ablobfoxbongohyper:‮‮‮‮‮

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 :blobfoxnotlikethis:

Mᴀʏᴀ :bc:

#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 🤡

plrang

Just enabled the Live Demo, check it out https://plrang.github.io/CHIP8-Interpreter-Vanilla-Javascript/ #chip8 #js #javascript #emulator #interpreter #spaceinvaders #retrogames #codingisfun #vanillaJS

Ingo Richter

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

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

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

til about https://github.com/tc39/proposal-change-array-by-copy, and that it's stage 4

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

Nathan Friedly

https://npmjs.com/set-cookie-parser 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 https://github.com/whatwg/fetch/pull/1346 for more.

#javascript #js #nodejs #npm

Jan :rust: :ferris:

https://github.com/mswjs/msw

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

tripu

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

tripu

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

tripu

: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

"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.

Kirby CMS

🔗 A good reminder from @andy why #performance matters: https://andy-bell.co.uk/this-is-why-performance-matters/ #webdev #js

Francis 🚀 Gulotta

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.

Davey

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."

oscarmlage

🔇 [bg] - Work with me

➡️ https://twitch.tv/oscarmlage

#playwright #js #dev #twitch #stream #live

blake shaw

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

And the most random assortment of buttons to summon Satan https://codepen.io/thebabydino/pen/eYYyqZR

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.
https://twitter.com/anatudor/status/1197923211347931138

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.

Plus:

✨ an old download button https://codepen.io/thebabydino/pen/xZxyPb

✨ an animated version https://codepen.io/thebabydino/pen/VwzpMxV (Chromium only) of the candy ghost buttons I wrote about a few years back on CSS-Tricks: https://css-tricks.com/css-ing-candy-ghost-buttons/

#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.

Some XOR effect close buttons for some random quotes https://codepen.io/thebabydino/pen/VwmQQwJ

The basic idea behind is something I recorded myself coding from scratch https://codepen.io/thebabydino/pen/bGBLXEy

The concept behind the XOR is something I explaine in this @css article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

#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.

KubikPixel™

🦀 https://studioterabyte.nl/en/blog/tauri-mobile-app-development

Tauri Mobile - Develop mobile apps with JavaScript and Rust

--
#dev #develop #rust #rustlang #javascript #js #webdev #app #mobile

Maarten Stolte

#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()} />
```

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

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.

--syf: cos(var(--sxa));
transform:
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!!! */

#CodePen #trigonometry #webDev #maths

There's also this square tiling https://codepen.io/thebabydino/pen/JjBEzMQ

This is a pure #CSS version of something I coded with #JS a few years back https://codepen.io/thebabydino/pen/JNZGwE/

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 https://codepen.io/thebabydino/full/JoQRdb means edges along the other axis (y) get longer & we don't have a rhombus (all 4 edges equal) anymore!

Screenshot of linked demo, showing edges of a former square getting longer along its y axis post x axis skew.

KubikPixel™

👉 https://williamkennedy.ninja/javascript/2022/05/03/in-defence-of-the-single-page-application/

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

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;

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

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 TIO.run

// Here is some code I found that doesn't quite work

/*
$(document).ready(function(){
$("textarea").each(function () {
this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function(){
var top = $(window).scrollTop();
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
$(window).scrollTop(top);
});
$(window).resize(function(){
$("textarea").trigger("input");
});
});
*/

<!-- 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>
-->
<!-- WHY CAN'T I HAVE AN ELEMENT CALLED PLACEHOLDER HERE?
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>

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
-->
<script>

/* 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.

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.

THREAD 🧵

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

Thomas Michael Semmler

https://helloyes.dev/blog/2023/craft-vs-industry/

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

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸