#WebDev
Gah, I have so much good stuff to catch up with from @matuzo's HTMHell advent calendar, I'm a good week behind, oops.
Go look! Now!
https://www.htmhell.dev/adventcalendar/
#webDev #html #css #javaScript #webComponents #adventCalendar
Programiści wiedzą, że debugowanie jest bardziej naturalne w edytorach kodu, a nie w przeglądarkach. Ale to nieprawda, że w tych drugich nie da się tego zrobić. Trzeba po prostu przeczytać ten artykuł i się dowiedzieć. Na tym polega odpowiedzialność.
SvelteKit 2 coming next week?
https://x.com/rich_harris/status/1733593566033613168?s=46
Discussions: https://discu.eu/q/https://x.com/rich_harris/status/1733593566033613168?s=46
I like this docstring from django source code
https://github.com/django/django/blob/main/django/shortcuts.py
Discussions: https://discu.eu/q/https://github.com/django/django/blob/main/django/shortcuts.py
Any #WebDev peeps want a puzzle? I've got a block with a background, and on everything but Firefox the text is centered. On Firefox the text touches the top of the block and leaves a bunch of space underneath. Do you have a fix?
The code: https://codepen.io/AshKyd/pen/JjxVdaO
I was surprised to discover that the DigitalOcean apps platform, through its use of Cloudflare CDN, injects a JavaScript file into my HTML pages. The script is small and hides email addresses from address-scraping bots, so intentions are good, but I find it unacceptable for a hosting provider to modify my content at their discretion. I guess I'm getting old.
#web #webdev #webdevelopment #hosting #webhosting
https://developers.cloudflare.com/waf/tools/scrape-shield/email-address-obfuscation/
#Development #Tools
Wave Terminal · An open-source, cross-platform, and modern terminal https://ilo.im/15xdok
_____
#WebDev #Terminal #CLI #Workflow #Frontend #Backend #WebStandards #OpenSource #Linux #MacOS
... and here's the end result. CMS populated images, reshaped via the code and with no additional work for the content administrator. Don't mind the rectangle - redacted a logo until this site goes live ;)
Know what math concept I never thought I'd use as much as I actually do? Modulos. Glad my degree was good for something.
*Image Description: Code Editor Screenshot. Twig templating code that outputs 3 different styles on rotation, based on the results of a modulo 3 operation on a switch function. The result is alternating image shapes due to applied CSS classes.*
I'm checking out Laravel Herd for managing PHP dev environments on my Mac and the switch from Valet & Homebrew managed PHP was smooth and quick.
Only snag I ran into was the big "Stop Valet" button in the installer didn't work so I had to run valet stop manually in order to get everything working.
Herd offers some advantages over using Valet and Homebrew managed PHP dev environments on a Mac but I don't have enough chars to share.
Why does everyone love tailwind
https://mxstbr.com/thoughts/tailwind/
Discussions: https://discu.eu/q/https://mxstbr.com/thoughts/tailwind/
#Development #Announcements
Saying goodbye to third-party cookies in 2024 · Implications for web developers and website users https://ilo.im/15xd1e
_____
#WebDev #Browser #Website #Blog #Privacy #GDPR #Frontend #ThirdPartyCookie #2024
🦖 MediaTrackConstraints: aspectRatio property 🦖
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/aspectRatio
The MediaTrackConstraints dictionary's aspectRatio property is a ConstrainDouble describing the requested or mandatory constraints placed upon the value of the aspectRatio constrainable property.
The software that is used to record the movement plays it back. It's like the Cinématographe Lumière was both a camera and a projector, but the software can do both at the same time.
#createSsam #creativeCoding #animation #motion #drawing #gestureAnimation #javaScript #webDev
This is the way
#web #webdev #webdevelopment #performance #accessibility #bestpractices #seo
#Development #Explorations
Media queries in HTML video · How CSS media queries can affect HTML videos https://ilo.im/15xdjy
_____
#WebDev #Video #Accessibility #Frontend #HTML #CSS #MediaQuery
You can read more about the project here: https://WebComponent.io 🎉
#sideProjects #WebComponents #webdev #opensource #software #foss #webdevelopment
🎉 New major release #WebComponent v2.0.0!
New Features
- Easily define and initialize `props` that get translated into observed HTML attributes
- A new minimal `html` function for tagged templates powered by preact's tiny (450 Bytes) `htm/mini`
- Attach "side effects" that gets triggered on property value changes with `attachEffect`
- All internals now exposed as utils in `web-component-base/utils`
#WebComponents #sideProjects #webdev #frontend #opensource
https://github.com/ayoayco/web-component-base/releases/tag/v2.0.0
Very fragile (won't scale up unless SO will be so kind and bump my app limits in the future), but here we go: kukei.eu has some basic Stack Overflow integration.
Integration because I'm not crazy enough to crawl SO or build that MS SQL database from their public dumps. In the future maybe, but now it's "just" Search API integration.
https://kukei.eu/?q=how+to+use+P3+colors+css
PS: If I'm abusing webdev tag tell me, I'll stop.
sometimes see otherwise smart devs claim we do not need browser engine choice.
it's understandable as most developers do not remember IE stagnation, which now in hindsight was a great boon teaching the importance of stability, but also enabled Firefox to catch up, exceed IE in courting devs, and open the gates for further diversity.
diversity is good! we want options.
a singular engine, even auto upgrading, would absolutely jeopardize the open web.
#Day47 : continuing Bookshelf project
- Login function : <dialog> element contains the connexion form. username and password are passed to the backend endpoint "/login"
- Authentification : Retrieving username and password. Hashing it through bcrypt. Fastify-secure-session plugin adds a session cookie.
Source Code : https://github.com/teotimepacreau/bookshelf
#WebDev #frontend #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS
"Discovering the Power of JavaScript Proxy After All This Time - DEV Community" https://dev.to/marclipovsky/discovering-the-power-of-javascript-proxy-after-all-this-time-4627 #javascript #proxy #webdev
#Design #Launches
Uiscore Library · A resource hub for designers and developers https://ilo.im/15xcg5
_____
#ProductDesign #UxDesign #UiDesign #WebDesign #Development #WebDev #Frontend #Collection
Had cause to weigh some Google TagManager guff and provisional conclusion is that – leaving aside its panopticon scope – it adds 83 KB compressed to a page: 272 KB uncompressed.
Added to which, it necessitates a dismal cookies optin gateway.
The indexed web is reckoned to be approaching 5 billion pages and it’s estimated that 56% of that is running Google Analytics, so that would be about 232 TB of code to deliver reporting that most people don’t look at or understand
🌟 Day 10 of "Frontend Rewind 2023" is ready for you!
Explore today's highlights: https://tympanus.net/codrops/2023/12/10/frontend-rewind-2023-day-10/
If you are a feline fan, we have a charming fun fact for you 🐱
#frontendrewind2023 #webdesign #frontend #webdev #inspiration
Added Fediverse-commenting to my blog.
Comment to a WordPress blog post via the Fediverse https://rolle.design/comment-to-a-wordpress-blog-post-via-the-fediverse
#Fediverse #Commenting #SocialMedia #Mastodon #MastoAdmin #WebDev #WebDevelopment
Using Prettier for ERB files
https://github.com/adamzapasnik/prettier-plugin-erb
Discussions: https://discu.eu/q/https://github.com/adamzapasnik/prettier-plugin-erb
#Development #Tools
Trippy · A network diagnostic tool (Linux, Windows, MacOS) https://ilo.im/15xdn4
_____
#WebDev #Network #Traceroute #Ping #GeoIP #DNS #CLI #OpenSource
🦖 Animating textures in WebGL 🦖
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
In this demonstration, we build upon the previous example by replacing our static textures with the frames of an mp4 video file that's playing. This is actually pretty easy to do and fun to watch, so let's get started. You can use similar code to use any sort of data (such as a <canvas>) as the source for your textures.
https://www.htmhell.dev/adventcalendar/2023/10/
Today's #HTMHell calendar revealed my article! 😱 Check it out if you're in need of a template of accessibility guidelines for wherever you work.
It's opinionated and supposed to be adjusted, so please do with it whatever you see fit.
Thanks @matuzo @eric @saptaks for providing super valuable feedback 🙌
@eleventy is simpler and less opinionated than Hugo, and once you get the hang of it you can make nice little "data driven" pieces with very little effort. I've also started from scratch with HTML and CSS, keeping everything to a (reasonable) minimum.
#blog #staticsite #staticsitegenerator #blog #web #webdev #webdevelopment #eleventy #11ty
I made a site for traveling cannabis consumers to check legality in your current location
https://www.isweedlegalhere.com/
Discussions: https://discu.eu/q/https://www.isweedlegalhere.com/
Bringing My Old Website Back From The Dead: https://www.julianlopez.net/posts/2023/12/bringing-my-old-website-back-from-the-dead
#webdev #jekyll #blogging
Following along some of my other #webdev buddies, I've added a new notes feature to my website. For those tid-bits that are too small for a blog post.
https://www.michaelgale.dev/notes
Still a work in progress :)
I also removed a library dependency (pico.css) and re-wrote all the left-over styles with vanilla #css layers.
“A lot of people will say they don’t need accessibility functionality or features without realizing they already use them.” — Anna E. Cook
_____
#Business #Design #UiDesign #WebDesign #Development #WebDev #Frontend #Accessibility
🦖 StylePropertyMapReadOnly 🦖
https://developer.mozilla.org/en-US/docs/Web/API/StylePropertyMapReadOnly
The StylePropertyMapReadOnly interface of the CSS Typed Object Model API provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration. Retrieve an instance of this interface using Element.computedStyleMap().
+ Crawler runs periodically, but in a polite way. Will visit a single website maximum once a day, which I'll bump to 3 - 4 days soon, but first want to monitor how it affects my own infra.
+ ensure polite wait between crawling pages is minimum 500, even if robots.txt says lower (for my own good)
+ added new index: magazines with first almost crawled website: @smashingmag (almost because crawler had a bug and died, will resume tomorrow - once a day rule)
https://kukei.eu update:
+ Dark mode
+ <number-format> mini web component in the footer that takes inner htm and formats it to `toLocaleString`. Perfect example of progressive enhancement (website is still 100% functional without JS, had to give up the no-JS rule because it seems CSS cannot format numbers to locales).
Above is inspired by @zachleat mini web components whose blog is also added to the index.
Thing is growing and I'm having more and more fun with it.
/1
Made changes to https://mathcommunications.com
Running a new Theme and updated to Astro 4.0. I am also using a new newsletter service.
If you are interested in putting on a US Math Communications Conference please subscribe for updates.
Introducing Astro 4.0!
https://astro.build/blog/astro-4/
Discussions: https://discu.eu/q/https://astro.build/blog/astro-4/
I'm doing perhaps a deeper dive than is healthy into color on the web. Here's my first of several planned posts on different color spaces and color models:
My website now includes an "Availability" page, describing how to engage me for technical advisory support:
#Design #Collections
Design Systems Database · Search, explore, and compare design systems of known brands https://ilo.im/15xd1y
_____
#UiDesign #WebDesign #DesignSystem #DesignPattern #Development #WebDev #Frontend
Railway hosting have spend limits and app sleeping now, nice
Another nice looking cookie-less analytics service
https://umami.is
#webdev
🦖 ElementInternals: ariaDescription property 🦖
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaDescription
The ariaDescription property of the ElementInternals interface reflects the value of the aria-description attribute, which defines a string value that describes or annotates the current element.
The upcoming features for https://WebComponent.io
✅ `attachEffect`
✅ `props` blueprint
✅ `html` tagged templates
(more coming soon)
Try them now on CodePen: https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1011
#WebComponents #sideProjects #webdev #frontend #opensource #software #foss
„never ship on fridays“ #webdev
that's what I always say https://www.octomind.dev/blog/on-developer-dogma-3-never-ship-on-fridays