Search
Items tagged with: webdev
What are deceptive design patterns and how can you spot them?
Websites sometimes use deceptive design patterns, sometimes called dark patterns, to influence your behavior. Here's what to watch out for.M.J. Kelly (The Mozilla Blog)
Eric Portis (@eeeps@front-end.social)
Attached: 1 video h/t @Meyerweb@mastodon.socialFront-End Social
Building a Live Search Feature with HTMX and PostgreSQL FTS
#django #htmx #javascript #programming #python #webdev
Build a Live Search Feature with Django using HTMX and PostgreSQL FTS (in 10 minutes)
We'll build an advanced search feature that automatically updates its results. No JavaScript required!circumeo.io
Git Fresh – Tyler Sticka
I don’t know if this is a personal quirk or a side effect of my role (designer first, developer second), but my Git branchs rarely stray far…tylersticka.com
Enhancing pagination with a page selector // Cory Dransfeldt
I've made a change to my site's pagination wherein I've enhanced the page count displayed at the bottom of my home and links pages to display the page count in a select element.Cory Dransfeldt
Hey, all! On stream today we'll be making more updates to the Andromeda website, making use of Eleventy - check them out at @eleventy, and come hang out with us in chat!
https://www.twitch.tv/martine_dowden
#webdev #Eleventy #11ty #HTML #CSS #JavaScript
Martine_Dowden - Twitch
Award winning CTO, UX / UI designer & developer / international speaker and author focusing on web interfaces that are beautiful, functional, accessible, and usable.Twitch
@adactio highlights an interesting gotcha of the new `hanging-punctuation` CSS property, in that it also applies to some form inputs.
https://adactio.com/journal/21027
#typography #css #webdev
Building a scrobbler using Plex webhooks, edge functions and blob storage // Cory Dransfeldt
I've written before about embedding music into my site and I've largely used Last.fm to do so. Their API is rather extensive, though it is showing its age — the default response format is XML, they've dropped artist images and have intermittently fai…Cory Dransfeldt
Here's a little something: flicker effect!
(if you're a patron on Patreon, you may have seen I've gone down the rabbithole of text effects for the past few months)
No text/ letter duplication whatsoever. No wrapping individual letters in their own elements. Just a single contenteditable element + some SVG filter & CSS gradient & variable magic 🪄✨🎩🐇
Idea from https://nitter.privacytools.io/Mandy_Kerr/status/1772850250950316258
*needs monospaced font to work
#CSS #SVG #filter #svgFilter #textEffect #code #coding #webDev #frontend
(Nitter addon enabled: Twitter links via https://nitter.privacytools.io)
Just published a blog post on why I migrated my personal website from Next.js to Eleventy.
https://www.mattknight.io/blog/migrating-from-nextjs-to-eleventy
It's fairly high-level, but I'll be following up on some deep dives into some of the more nuanced parts of my new setup - like the distroless nginx container and the VPN setup letting me host the website from my office.
#blog #website #nextjs #eleventy #selfhosting #selfhosted #vpn #wireguard #distroless #docker #nginx #webdesign #webdev
Why I migrated my website from Next.js to Eleventy | Matt Knight
Here's why I switched from Next.js to Eleventy, opting for a lightweight static site approach for my blog site. I describe the benefits, deployment strategies, and the performance results in this blog post.Matt Knight
@adactio reveals the real reason why Google is replacing FID with INP in its core web vitals—indeed, why FID existed in the first place. 😁
I keep turning this one from @aral over and over in my head:
“Where ‘free’ is the lie told to users, ‘Open API’ is the lie told to developers.”
Issue 37 of the 11ty Bundle is out: Get your 11ty conference merch bundle...Shaving build time...This blog is now available as a newsletter...And 5 posts, and 5 sites to see.
@chrisburnell #11ty #eleventy @eleventy #webdev
WireQuery is a full-stack session replay tool. Using WireQuery, you can "see how a user experiences an issue through a video-like frontend recording".
Free and #opensource
https://www.wirequery.io/
https://github.com/wirequery/wirequery
GitHub - wirequery/wirequery: WireQuery is a full-stack session replay tool. Using WireQuery, you can see how a user experiences an issue through a video-like frontend recording. Combined with an overview of the network calls to the backend (including net
WireQuery is a full-stack session replay tool. Using WireQuery, you can see how a user experiences an issue through a video-like frontend recording. Combined with an overview of the network calls t...GitHub
Mastodon Bird UI is now in version 2.0.0rc30. To this version I've been experimenting with the new 2024-03 v4.3.0-alpha.3 UI and @nileane Tangerine UI's compact header on mobile, thanks for the inspiration and shortcuts code-wise! 
This version also includes some slight fixes, icons and other improvements.
The release v2.0.0 will be massive, but we're not there yet with Mastodon v4.3.0 and because I'm following the Mastodon mainline and there is no ETA, I'm taking it easy as well.
Available on the nightly branch: https://github.com/ronilaukkarinen/mastodon-bird-ui/tree/nightly
Live demo (single column layout only): https://mementomori.social
#MastodonBirdUI #BirdUI #CSS #UI #WebDev #OpenSource #Mastodon #MastoAdmin
GitHub - ronilaukkarinen/mastodon-bird-ui at nightly
🐘🐦 Mastodon web UI, but strongly inspired by Twitter. - GitHub - ronilaukkarinen/mastodon-bird-ui at nightlyGitHub
OK, web performance people, my website has always scored a perfect 100 in Lighthouse, so I was surprised to see a measly 96 for performance in the Eleventy leaderboards speedlify listing. The problem seems to be a low speed index. This is all just for fun and out of curiosity, but what can I do to increase it? The site is a very basic static one hosted on Netlify: https://www.11ty.dev/speedlify/martingunnarsson-com/
#eleventy #11ty #speedlify #web #webdev #webdevelopment #webperf #webperformance #webperformanceoptimization
SteveSounds - An Accessible Steve Faulkner Soundboard by @lloydi
#accessibility #webDev #HTML #CSUNatc2024
https://a11y-tools.com/steve/v3-fully-accessible.html
SteveSounds - An Accessible Steve Faulkner Soundboard
A soundboard put together as part of an accessibility presentation. This is the 'after' example, where it is fully accessible due to having real buttons and a description of each sound.a11y-tools.com
I miss those days too. Being able to copy and paste files and code and maybe spend 10 getting something up and running. Again, things are more complex these things but often - especially for simpler things - they don’t have to be. #JavaScript #webdev https://fedi.simonwillison.net/@simon/112129522544448906
I miss the days when JavaScript libraries were distributed as one or more scripts that you could simply download and add to your static/ directoryI've republished the static file bundle I built of quickjs-emscripten as a downloadable Gist here: https://gist.github.com/simonw/36506994222a56d1556b3452ca663dbe
QuickJS bundle ready to use: til.simonwillison.net/npm/self-hosted-quickjs
QuickJS bundle ready to use: https://til.simonwillison.net/npm/self-hosted-quickjs - 338.quickjs.jsGist
I added a reading list to my website earlier this week. It's built from data stored in @omnivore, using @eleventy's fetch plugin, and it updates automatically.
I'm quite happy with the result and ended up writing a little guide about how I got this done: https://ttntm.me/blog/creating-a-reading-list-with-eleventy-and-omnivore/
Creating a Reading List with Eleventy and Omnivore
This website includes my personal reading list now. It was built using Eleventy and Omnivore, an approach described in this article.Tom's Homepage
