#Frontend
Your front-end web tech. stack has 5 components. None of which are HTML, CSS, or straight JavaScript.
I have so many questions.
What does your front-end tech. stack look like?
#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
🎄 Day 9 of "Frontend Rewind 2023" is live!
Explore today's highlights from 2023 and join the fun: https://tympanus.net/codrops/2023/12/09/frontend-rewind-2023-day-09/
Plus, enjoy a generous discount for the absolutely stunning Arrow Dynamics Component library!
#Development #Techniques
CSS only Scroll-to-Top · A nifty return-to-top feature that surfaces as you scroll https://ilo.im/15xd6q
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
Made this post on HN about #MultiGlancer my #responsive #web #development #tool
Added close and full screen buttons to each view component, and other enhancements
https://news.ycombinator.com/item?id=38575326
Changed my mind about using the `on:` prefix... I realized it's much simpler if we stick to the standard HTML behavior.
On v2.0.0-beta.14 I made it so the behavior is the same as standard conversion from HTML attr to DOM properties, where `.toLowerCase()` is called for on-event props.
For example, using `onClick` is the same as using `onclick`
Updated CodePen 👉 https://codepen.io/ayoayco-the-styleful/pen/jOdJyNV?editors=1010
#WebComponents #sideProjects #webdev #frontend #opensource #software #foss
🎉 Simple templating using an `html` tagged template literal function on https://WebComponent.io v2.0.0-beta.7 🫣
No dom diffing yet (working on it!) but this provides a way to declaratively attach event listeners via `on:` prefix
Here's a CodePen 👉 https://codepen.io/ayoayco-the-styleful/pen/jOdJyNV?editors=1010
#WebComponents #sideProjects #webdev #frontend #opensource #software #foss
I’ve just been debugging some #frontend code where there was an issue with the styling of some content which is removed from the DOM when the focus leaves an element.
Problem: putting the focus on the element inspector triggers the removal of the element I want to inspect.
Solution: setTimeout(function () { debugger; }), 5000) gives me five seconds to make the element display, then pauses #JavaScript so the code to remove it won’t run and I can inspect it.
🚀 Day 8 in "Frontend Rewind 2023" has landed!
If learning Vue has been on your radar, we've got a little something special just for you!
Check out today's featured content: https://tympanus.net/codrops/2023/12/08/frontend-rewind-2023-day-08/
Frontend Talks: усиливаем TypeScript с помощью switch + notReachable
Привет, Хабр! Я Илья Белявский — старший Frontend-разработчик Читать дальше
"Designing and developing forms that work for all users is hard. The <input> element has many options that you can choose to use to make your forms more usable and accessible."
https://www.htmhell.dev/adventcalendar/2023/8/
My mind was blown! 🤯 I knew you could do many things with this element, but Phil showed me even more of it's capabilities.
#HTML #HTMHell #accessibility #a11y #WebDev #Frontend #Advent2023
#Development #Courses
SVG tutorial · Learn SVG step by step, from basic to advanced concepts https://ilo.im/15xcxv
_____
#Design #WebDesign #SVG #Animation #Interactivity #WebDev #Frontend #CSS #JavaScript
#Development
CSS wrapped: 2023! · A huge year for CSS summarized in a huge article https://ilo.im/15xcxh
I made a template for all of our projects. Included 2 package managers, 3 transpilers, 3 component libraries, 2 testing suites, and some packages that will add accessibility and performance.
👍👍👍👍👍👍👍👍
(Based on a true story)
#Development #Pitfalls
sizes="auto" pretty much requires width and height attributes · What’s odd about the new auto-sizes for lazy-loaded images https://ilo.im/15xc2y
_____
#WebDev #ResponsiveImage #LazyLoading #CLS #Frontend #HTML
"#CSS Wrapped: 2023"
Summary of what got introduced, what got popular enough to use, and the big shifts.
https://developer.chrome.com/blog/css-wrapped-2023
"Now, every modern browser supports container queries, subgrid, the :has() selector, and a whole plethora of new color spaces and functions." #frontend
Making "noisy" #SVG or adding noise texture with only code. #frontend #css
https://daniel.do/article/making-noisy-svgs/
Pretty cool. Expecting @chriscoyier to mention this in a future Shoptalk Show. 😉
See also: https://css-tricks.com/grainy-gradients/
✩ A Complete Guide to CSS Cascade Layers: Gain full design control without specificity hacks or !important. @mia
https://css-tricks.com/css-cascade-layers/
#Design #Guides
User Interface Typography · Theory and praxis of UI typography, with many illustrations https://ilo.im/15xcoc
_____
#ProductDesign #UxDesign #UiDesign #DigitalDesign #WebDesign #Development #WebDev #Frontend #Typography
To test a site-crawling feature for Web Origami, I thought I'd crawl the original 1996 Space Jam site at https://www.spacejam.com/1996. Having seen the site's famous “solar system” home page, I'd assumed the site was tiny — maybe a dozen pages?
I was wrong. The site is freaking MASSIVE.
#Development #Guides
Making SVG loading spinners · An interactive guide showcasing how to craft them https://ilo.im/15xcnu
#Development #Techniques
Security headers using the HTML ‘meta’ tag · Benefits and limits of declarative HTML security headers https://ilo.im/15xcnn
_____
#WebDev #Security #Privacy #Website #Server #HTTP #HttpHeader #Frontend #HTML
🎁 Unwrap the #inspiration on Day 7 of "Frontend Rewind 2023"!
Have fun exploring today's highlights!
#adventcalendar #frontend #webdesign #webdevelopment #2023 #frontendrewind2023
I have another #mastodon question. Can you find another server like frontend.social that you aren't on and follow everyone on that server? There are some work related servers which are closed to new applicants because they got too big too quick but I am still interested in following those people. Can you see all the people who belong to a server and choose who to follow that way? #frontend #webdev
#Business #Techniques
Preparing for a live demo · Live demos needn’t be as scary as they seem https://ilo.im/15xa9h
_____
#Presentation #Design #UxDesign #UiDesign #WebDesign #Development #WebDev #Frontend #Backend
Hide and Debug Empty Elements with #CSS via @michelle.
https://css-irl.info/hide-and-debug-empty-elements-with-css/
"use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content)." #frontend
"With a traditional HTML component, any developer who uses it will need to update their HTML, JavaScript, and CSS files to include the fix. With web components, they only have to update the JavaScript file."
https://www.htmhell.dev/adventcalendar/2023/6/
Very straightforward #WebComponents example by @cferdinandi by showing how to create the (classic?) counter button.
#frontend components fucking matter. and the quality of software that's created today is objectively worse in every way than software from 5 10 or 15 years ago.
"A gold rush began, with start-up companies springing up like weeds. This period was known as the Dot-Com Boom. [...] Jobs quickly flourished for Information Architects, Visual Designers, and Programmers. The good times of free gourmet meals at work, video arcade break rooms, and corporate parties on cruise lines seemed like it would never end."
https://www.htmhell.dev/adventcalendar/2023/5/
The history of #HTML by @Jason is a super interesting and entertaining read!
🌈 Join us for Day 6 of "Frontend Rewind 2023"!
Explore the top resources that made waves in frontend this year.
#frontendrewind2023 #inspiration #webdevelopment #frontend #webdesign #learning
Ho. ho, ho - der 🎅 hat zum heutigen Tag den vierten Teil unserer Blogpostserie rund um Web Components mitgebracht! 🚀
Nachdem wir im vorderen Artikel den Projektsetup mit Lit angeschaut haben, tauchen wir nun tiefer in Lit 🔥 ein und vergleichen seine Konzepte und Features mit Angular. Du wirst sehen, dass Lit deine Aufmerksamkeit verdient hat und durchaus eine solide und schlanke Alternative zu den populären JavaScript Frameworks sein kann.
https://www.puzzle.ch/de/blog/articles/2023/12/06/web-components-part-4-lit-for-angular-developers
Неизвестно полезный CSS
CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства. Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию! Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его. Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Vous connaissiez "Emprunte mon toutou" vous ? Moi pas et c'est bien dommage. Ca semble être une très bonne idée.
Ils recherchent un développeur web front end pour poursuivre les évolutions de l'application web actuelle et faire de nouveaux sites.
C'est du télétravail ou sur place sur Toulouse, au choix.
Infos sur https://www.linkedin.com/jobs/view/634860114
#Emploi #Job #France #DevWeb #FrontEnd #NextJS #React #Tailwind
Nous recrutons une développeuse ou un développeur front-end web cartographie. Pour plus d’informations l’offre est ici https://www.teritorio.fr/blogs/recrutement-developpeuse-ou-developpeur-front-end-web-cartographie/.
#Development #Announcements
Baseline’s evolution on MDN · MDN has enhanced its browser support widget https://ilo.im/15xby0
_____
#WebDev #WebStandards #Browser #Frontend #HTML #CSS #JavaScript #API #MDN
#Development #Explorations
Let’s learn how modern JavaScript frameworks work · Building one is the path to comprehension https://ilo.im/15xb25
_____
#WebDev #Framework #Frontend #JavaScript #DOM #API #React
#Firefox on the brink?
1. Once Firefox slips below 2% threshold in government's visitor analytics, #USWDS tells gov #web devs they don't have to support Firefox
2. When word gets out, it spreads quickly to not only the #frontend dev community but also corporate #IT, whatever government does from an IT standpoint is going to influence what corps do
3. Corporations see this change as an opportunity to lower dev costs and delivery times
https://www.brycewray.com/ https://www.brycewray.com/posts/2023/11/firefox-brink/ #webbrowser
#Development #Surprises
HTML, the programming language · It is based on HTML, the markup language https://ilo.im/15xbmy
For the #web #developers out there who want to make responsive designs. I decided to revive this project. I haven't seen any free and open source tool like this. I hope is useful for you aswell!
https://imvenx.github.io/multiglancer/#/
#design #webdev #javascript #tool #frontend #opensource #softwaredevelopment
🚀 Day 5 of "Frontend Rewind 2023" is here!
Browse through today's featured content and snag a special discount code for Sara's accessibility course!
#frontend #webdevelopment #uidesign #inspiration #animation #adventcalendar
Busco mentor frontend :) me estoy frustando mucho.
Hello fellow CSS enthusiasts !
We tried PicoCSS because it is lightweight and functional but our CSS needs seem to explode and it does not fulfil its tasks.
My client does not like Tailwind because it generates html tags with tons of classes that "could be placed in a style tag and it wouldn't be any different"
I'll keep insisting on tailwind, but what CSS framework are you fond of that is ideally lightweight, but has grid/flex/spacing/typo utilities ?
A web component to make your text sparkle
https://www.stefanjudis.com/blog/a-web-component-to-make-your-text-sparkle/
“I’ve only been in the EU for a week, and those ‘Are you sure you don’t mind cookies?’ web prompts are driving me bananas! I’ve heard about this, but to experience it firsthand is… eye-opening.” — Scott Jensen
_____
#Business #Design #Development #WebDesign #WebDev #Frontend #EU #CookieBanner #Quote
“Sometimes, you don’t realize you made things easier for yourself, but not so much for your users.” — Artem Kulitski
_____
#Design #Development #ProductDesign #UxDesign #UiDesign #WebDesign #WebDev #Frontend #Backend #Quote
Remember Google AMP? 🤔
I realized Cozy is also putting articles behind an intermediary system but instead of Google's servers, they are stored directly into your device.
The result is instant loads for articles you already viewed. 🤩
Try it here 👉 https://cozy-reader.vercel.app/
"In the fast-paced world of web development, it's easy to get caught up in the latest frameworks, libraries and cutting-edge technologies. But sometimes, the most impactful improvements come from revisiting the fundamentals."
https://www.htmhell.dev/adventcalendar/2023/4/
@dnikub showing how to properly use hreflang, translate, reversed, controls & Auto complete attributes in #HTML. Also check out her project https://a11yphant.com/
Back to Basics: 5 #HTML attributes for improved #accessibility and user experience
https://www.htmhell.dev/adventcalendar/2023/4/ #development #frontend
🚀 Learn how to unlock success as a #webdeveloper with these 5 game-changing strategies! Level up your skills & attract more clients (sponsored)
Check it out: https://tympanus.net/codrops/?p=74453
#webdeveloper #frontend #freelance #freelancelife #devcommunity
"With the form attribute you are no longer restricted to position your inputs and buttons inside the form element boundaries. This approach enriches the potential for more flexibility and creative form designs."
https://www.htmhell.dev/adventcalendar/2023/3/
The more you know! Alexander Muzenhardt shows us how to associate a button outside of its respective form. 🤯 Be aware of potential #accessibility implications, though!
#Design #Launches
Animotion · A no-code tool to craft polished CSS animations visually https://ilo.im/15x6xw
_____
#Development #Animation #KeyframeEditor #UxDesign #UiDesign #WebDesign #WebDev #Frontend #CSS
“Front-end development is not a problem to be solved”
“We should see front-end development as a unique skillset that is critical to the success of any project.”
https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/
This is an excellent article by @Kilian
I’m not a big fan of summary/details generally because it’s just too inconsistent, but dialogs are great. And I didn’t actually know about input type="color" yet.
Well worth a read.
https://www.htmhell.dev/adventcalendar/2023/2/
#css #js #JavaScript #html #Frontend #Webdev #Webdevelopment
I'd love to use SVG, there's cool stuff you could do with it...
But it's so fucking broken and heaven forbid you comment on a 15+ year old bug with your use case because you get hit with a big fat dismissive attitude.
Anyway, this text effect could have been done without duplication & the text could have been selectable.
IF SVG worked.
That's not the case, so a non-selectable duplicated text is all you get https://codepen.io/thebabydino/pen/ZEwjvvx
#svg #rant #coding #css #textEffect #frontend #webDev #filter
Came across this cool #CSS pattern https://codepen.io/josetxu/pen/mdvzaQZ?editors=0100 - uses 35 gradients, so I instantly knew I could simplify it and make it easily customisable.
So here it is my version on #CodePen https://codepen.io/thebabydino/pen/WNPamBB?editors=0100 - 9 gradients with n set to 4. Because yes, you can change n! 😎
#coding #pattern #cssPattern #cssGradient #frontend #code #maths #blending #blendMode #xor #logic #trigonometry #geometry #webDev #webDevelopment
Working on this (Shadow DOM-based) web component last night I noticed in the time between the page loading and loading the JS file that registers the component, the slot content was popping in unstyled.
I found that doing something like `.sr-only` on `:not(:defined)` seemed to do the trick. When the component is registered and ready to render it will get the `:defined` pseudo-class and these styles will be removed.
Is there a down side to this approach?
So this pure #CSS gravity button has been my most popular demo in November.
You can check out the live demo on #CodePen:
https://codepen.io/thebabydino/pen/bGzeQrv
#codevember #coding #frontend #gravity #webDev #webDevelopment #particles #physics #CSSphysics
#Business #Trends
Firefox on the brink? · The big three may effectively and quickly be down to a big two https://ilo.im/15xa7y
_____
#Development #Browser #MarketShare #Chrome #Firefox #Safari #WebDev #Frontend
🎉 https://WebComponent.io "attachEffect" now published as beta on v2.0.0-beta
Here's a code pen: https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1111
#WebComponents #webdev #frontend #sideProjects #software #opensource #foss
Meet SQLSync: Application development is a lot easier when you're building on top of a frontend-optimized database stack. Say goodbye to accidental database programming! #sqlite #offlinefirst #localfirst #FrontEnd #SoftwareEngineering
https://sqlsync.dev/posts/stop-building-databases/
λ Haskell for Elm developers: giving names to stuff (Part 1 - Functors) | Flavio Corpa
https://dev.to/flaviocorpa/haskell-for-elm-developers-giving-names-to-stuff-part-1-functors-36n3
Notwithstanding my previous post about #htmx spelling errors, I'm now looking at the triggers (and modifiers, and filters, and so on), and going, "Hey, this looks kind of cool and possibly very powerful." #webdev #learning #FrontEnd #WebDevelopment