Masthash

#WebDev

Sara Joy to the World ✨
1 hour ago

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

Wilda Software
1 hour ago

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ść.

#debugging #WebDev #browser

https://alan.norbauer.com/articles/browser-debugging-tricks

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

Showing the described behaviour in Chrome and Firefox.
Gunnarsson
4 hours ago

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/

Inautilo
4 hours ago

#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

Shawna
6 hours ago

... 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 ;)

#webdev #craftcms #sneakpeek

Animated GIF of a website menu, the cursor hovers over the top level nav items, revealing subnavigation and large images. The image shapes change between an archway, an upside down archway, and a circle. These are the shapes defined in the previous posts' code example.
Shawna
7 hours ago

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

#webdev #math #html #craftcms

Jimmy Smutek
8 hours ago

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.

#WebDev #PHP #Laravel #WordPress

https://herd.laravel.com

Inautilo
9 hours ago

#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

randomMDN
10 hours ago

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

#webdev

Daeinc
11 hours ago

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

Frozen Canuck
12 hours ago

Anyone actively using Astro (@astro) to create and manage a personal blog? If so, what has your day-to-day developer experience been like?

#dev #webdev

Inautilo
13 hours ago

#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

🎉 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

How cool your new feature in v4 !! @astro@m.webtoo.ls

#webdev

screenshot of a webpage made  with astro where you can see the client components highlighted with usefully information like the props
Szymon Nowicki
15 hours ago

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

#kukei #webdev

PS: If I'm abusing webdev tag tell me, I'll stop.

Brian LeRoux 💚
16 hours ago

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.

#webdev

Téotime Pacreau
17 hours ago

#100DaysOfCode

#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

@fastify

#WebDev #frontend #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS

showcasing a bookshelf website. demonstrating the login form, when authenticating it allow to add books through a button that open a form accordingly.
RJ
17 hours ago

"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

Inautilo
18 hours ago
Jonathan Schofield
20 hours ago

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.

#webDev

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

Codrops
21 hours ago

🌟 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

Roni Laukkarinen
21 hours ago
Inautilo
21 hours ago

#Development #Tools
Trippy · A network diagnostic tool (Linux, Windows, MacOS) https://ilo.im/15xdn4

_____
#WebDev #Network #Traceroute #Ping #GeoIP #DNS #CLI #OpenSource

thudfactor
21 hours ago

Just took a look at my own site through my RSS reader and realized that (of course) a lot of my examples don't make it through the reader because instead of pictures I am using real HTML and CSS to demonstrate real HTML and CSS.

#webdev #blog #rss

randomMDN
22 hours ago

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

#webdev

CodeMacLife
23 hours ago

Time for a bit of web development learning. CSS has always been the sticking point for me. It puts me off when I have to remember all the sectors and when to use them.

#webdev #css #udemy

Steve Frenzel
23 hours ago

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 🙌

#HTML #accessibility #a11y #design #WebDev #frontend

Gunnarsson
1 day ago

@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

Webdev Weekly
1 day ago

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/

#webdev

Michael Gale
1 day ago

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.

Inautilo
1 day ago

“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

randomMDN
1 day ago

🦖 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().

#webdev

Szymon Nowicki
1 day ago

+ 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/?q=smashing

#webdev

Szymon Nowicki
1 day ago

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

#webdev

Suzza
2 days ago

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.

#Science #SciComm #WebDev

thudfactor
2 days ago

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:

https://thudfactor.com/posts/2023/12/exploring-rgb/

#css #webdev #blog

Don McCurdy
2 days ago

My website now includes an "Availability" page, describing how to engage me for technical advisory support:

https://www.donmccurdy.com/availability/

#opensource #webdev #threejs #gamedev #gltf #b3d

Inautilo
2 days ago

#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

Joe Lanman
2 days ago

Railway hosting have spend limits and app sleeping now, nice

https://docs.railway.app/guides/optimize-usage

#webdev

Eystein
2 days ago

Thought I’d check out the new website for the #chamonix busses. Took forever to load. The homepage is 30mb!! It has a search form and a couple call to actions. #webdev

Joe Lanman
2 days ago

Another nice looking cookie-less analytics service
https://umami.is
#webdev

randomMDN
2 days ago

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

#webdev

Ayo-Ho Ho Ho! 🎄
2 days ago

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

ralf g.
2 days ago

„never ship on fridays“ #webdev

that's what I always say https://www.octomind.dev/blog/on-developer-dogma-3-never-ship-on-fridays