A Little Loopy - Arrays, Loops, forEach, some, for...of, for - FrontEnd Engineering Explained #js
A Little Loopy - Arrays, Loops, forEach, some, for...of, for - FrontEnd Engineering Explained #js
Parallax layers
A subtle shift across 13 layers kept within a frame on the page.
Flip card on hover, flip back on hover out...
... but on touchscreens, flip it on click and then flip it back on second click!
A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.
Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/
Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer
Se ois kuulkaas rekryhommat auki Fennoalla.
Etsin softatiimiini kahta hyvää tyyppiä, 1x mid- ja 1x senior-devaajaa. Perustaitoina tulisi olla PHP ja JS, mutta erityisesti sennun kohdalla kaipaan taitoja myös siitä koodin yläpuolelta. Sisartiimiin etsitään myös yhtä senior-devaajaa.
1/4
(Kaikki buustaukset tervetulleita!)
So I should re #introduce myself; used to host my own instance at artemai when that was a thing; decided to get back on Mastodon again because the rest of social is a dumpsterfire.
I'm a #UNIX sysadm originally (from the late 90s) but started using #Linux in 91, bringing early
dialup internet to #Newcastle with community group hunter #apana.
I'm a #coder, #python is the go-to language these days, some #js but plenty of #C and some #golang too.
Ten years ago I landed in #liveevents and #visionswitch / #camera #direct #sports presentation in major
#stadiums along with building software for data-driven #content for use in those environments.
I'm a #ham radio operator. Callsign VK2WAY. I'm mostly interested in signals processing and digital communications.
I used to officiate #RollerDerby but have streamed it since 2014 as Downunder Derby TV. I still manage socials for and help co-ordinate Queer Roller Derby - @queerderby.
I'm #queer #pansexual
#poly
#nonbinary
and use they/them pronouns.
New Kitten release
• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.
(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)
Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.
Enjoy!
¹ https://kitten.small-web.org/tutorials/streaming-html/
² https://kitten.small-web.org/tutorials/components-and-fragments/
New Kitten release
• Socket routes now have precendence in the router.
This stops wildcard page routes from capturing the default socket routes that Kitten creates to enable the Streaming HTML workflow.
e.g., Previously, the following route:
/videos/index_[slug].page.js
Could not connect to its default socket (/videos/default.socket) because default.socket would be captured by the [slug] parameter.
Now, it will work as intended as the /videos/default.socket (a socket route) has precendence over index_[slug].page.js (a page route).
Learn more about Kitten’s Streaming HTML workflow here:
https://kitten.small-web.org/tutorials/streaming-html/
Enjoy!
this is it, folks! we are in the final week before submissions are due for GOOD INTERNET, a new print periodical magazine about all the things that make the #web fun: things like the #smallweb, the fediverse, the #indieweb, and efforts to actively fight #enshittification. submissions are open until MARCH 15.
check the submission guidelines or sign up for email alerts to be notified when we publish in may!
https://goodinternetmagazine.com
if this is your first time hearing about this, you still have enough time to come up with and write an article or complete a digital #art piece, if you're passionate about the #internet and want to write about it! :) bloggers, it's your time to shine!~
i can't wait to show y'all the incredible stories that have been submitted from all over the 'net, and some of the coolest art i've seen about the web!
thank you to everyone who's been so supportive of this project already. this is why this side of the internet is amazing. please boost, if you can; i want to make sure i did everything i could to include as many diverse voices as i can.
thank you!
original post: https://tilde.zone/@xandra/113913277766098384
Still on the look out for work, contract or full time. Must be remote unless you have offices in Spain.
Over 20 years of experience doing: #UX/UI, design (web, product, service), front-end (#CSS, #HTML, #JS), #PHP (#kirby, #craftcms) and more recently #React, #NextJS.
My last project was NextJS with React - I did most of the things listed above. A design engineer or front-end designer role would be right up my street.
Would be nice if you do work that gives good belly feels.
10 Cool CodePen Demos from February 2025
https://alvaromontoro.com/10-cool-codepen-demos/2025/02/
An homage to Studio Ghibli, custom ranges, web components, web games, CSS art, mix blend modes showcases... and more!
As you see there is plurality, but there is nothing easy about building a web engine.
Rendering HTML via DOM, implementing JS parsing, all the modern #JS standards, the #HTTPS protocol, every #W3C standard that hasn't been deprecated. It's a big, big task to build something like this.
Shout outs to #Ladybird. That slipped my mind completely, a bottom up rewrite - which is insane.
In any case, there are engines a plenty...
So why not build a browser?
The more I see Rust, Go, PHP and JavaScript, the more I wonder if I could make my own programming language with the best of each world.
Of course, not in this lifetime, but may be I could start making a wishlist.
Temporal is now enabled by default in @firefoxnightly!
Little sketch using #p5js with the brush library
https://gitea.com/Qaqelol/JS_Sketches/src/branch/main/MagicRitual
PEANUTS FOR EVERYONE
If you've ever tried to copy anything from my site, you'll have only found peanuts. But now I've decided to share the peanuts.
This code snippet will allow you to interrupt the standard right click and copy reaction and insert your own witty text, that'll then be copied to the copycat's clipboard.
Full snippet here, no attribution required.
https://codewordcreative.com/human-copycats-will-only-collect-peanuts-code-snippet/
Are there any good custom css and custom javascript extension for firefox ?
WTF after several hours interacting with ChatGPT to help me with my JS, the thing started ghosting me?!? Several requests did not result in any output
I had to start a new conversation, and then it opened canvas. At last! D'oh
All languages have life cycles. Hell, some even go dormant and become popular — or unexpectedly critical – again.
What would qualities would a language need to have to eventually threaten Python's dominance? My fear is any innovative ideas will just get absorbed. Yes, I realize much of #Python's muscle is marketing by big industry players.
Am I crazy for pushing back on "#JS #SPA frontend by default"?
For 2 years I have been working for the French public service on a business logic app, mostly lists and forms with neat UX.
The tech is boring. PHP, Symfony, Twig templates. Treat: Turbo, Stimulus, custom elements, for those required bits of interactivity.
Hell it works. It's fast. It doesn't break. Been updating deps monthly a/o breaking changes. Never had to rewrite!
Am I crazy, or are we fooled by the JS industrial complex?
It's really a fun project.
So far:
- web server up and running
- unit test suite with some basic tests up and running
- filesystem access (list/read files)
- typescript code only
and all of that out of the box with both engines, zero dependency!
This is SOOO huge, in the past you needed like hundrets of packages (cascaded) for that! Insane!