Masthash

#Frontend

Josh Bruce
2 hours ago

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?

#WebDevelopment
#SoftwareEngineering
#FrontEnd

Inautilo
10 hours 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

Codrops
11 hours ago

🎄 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!

#adventcalendar #webdev #frontend #webdesign

Inautilo
18 hours ago

#Development #Techniques
CSS only Scroll-to-Top · A nifty return-to-top feature that surfaces as you scroll https://ilo.im/15xd6q

_____
#WebDev #Scrolling #ScrollToTop #Frontend #CSS

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

Vera
1 day ago

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

https://imvenx.github.io/multiglancer/

#opensource #tech #software #webdev #frontend #design

Ayo-Ho Ho Ho! 🎄
1 day ago

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

Ayo-Ho Ho Ho! 🎄
1 day ago

🎉 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

David Dorward
2 days ago

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.

Codrops
2 days ago

🚀 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 #webdevelopment #vue #uidesign #inspiration

Habr
2 days ago

Frontend Talks: усиливаем TypeScript с помощью switch + notReachable

Привет, Хабр! Я Илья Белявский — старший Frontend-разработчик Читать дальше

https://habr.com/ru/companies/cloud_ru/articles/778694/

#typescript #frontend #frontendразработка

Steve Frenzel
2 days ago

"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

Inautilo
2 days ago

#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

Inautilo
2 days ago

#Development
CSS wrapped: 2023! · A huge year for CSS summarized in a huge article https://ilo.im/15xcxh

_____
#WebDev #Frontend #CSS #2023

wesruv
2 days ago

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.

👍👍👍👍👍👍👍👍

#frontend #moredepsMorebetter

(Based on a true story)

Inautilo
2 days ago

#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

David Bisset
2 days ago

"#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

David Bisset
2 days ago

A nice looking #SVG Tutorial, learning step by step with a fun interface. #css #frontend

https://svg-tutorial.com/

David Bisset
2 days ago

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/

zeldman
2 days ago

✩ A Complete Guide to CSS Cascade Layers: Gain full design control without specificity hacks or !important. @mia
https://css-tricks.com/css-cascade-layers/

#CSS #frontend #code #design #webdesign #uidesign #layout

Inautilo
2 days ago

#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

Jan Miksovsky
2 days ago

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.

#webdev #frontend #html

Home page of the 1996 Space Jam website, with a large Space Jam logo in the center, surrounded by planets for each of the site's main sections
Inautilo
3 days ago

#Development #Guides
Making SVG loading spinners · An interactive guide showcasing how to craft them https://ilo.im/15xcnu

_____
#WebDev #Spinner #Frontend #SVG #CSS

Inautilo
3 days ago

#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

Codrops
3 days ago

🎁 Unwrap the #inspiration on Day 7 of "Frontend Rewind 2023"!

Have fun exploring today's highlights!

#adventcalendar #frontend #webdesign #webdevelopment #2023 #frontendrewind2023

https://tympanus.net/codrops/?p=74812

tiny_m
3 days ago

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

Inautilo
3 days ago

#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

David Bisset
3 days ago

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

Steve Frenzel
4 days ago

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

#HTML #JavaScript #WebDev #Frontend #ShadowDOM #LightDOM

Rye
4 days ago

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

Steve Frenzel
4 days 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!

#frontend #WebDev #history

Codrops
4 days ago

🌈 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

https://tympanus.net/codrops/?p=74728

Puzzle ITC
4 days ago

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

#Frontend
#LitHTML
#Angular

Habr
4 days ago

Неизвестно полезный CSS

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства. Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию! Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его. Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/775986/

#css #frontend #webразработка #ruvds_статьи

Patrick Prémartin
4 days ago

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

Teritorio
4 days ago

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

#jerecrute #développement #frontend

Inautilo
4 days ago

#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

Inautilo
4 days ago

#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

Inautilo
4 days ago

#Development #Surprises
HTML, the programming language · It is based on HTML, the markup language https://ilo.im/15xbmy

_____
#Programming #WebDev #Frontend #HTML

Vera
5 days ago

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

Codrops
5 days ago

🚀 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

https://tympanus.net/codrops/?p=74760

Pink Whale 💚
5 days ago

Busco mentor frontend :) me estoy frustando mucho.

#dev #frontenddev #frontend

Ervan L.
5 days ago

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 ?

#css #web #frontend

Inautilo
5 days ago

“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

Inautilo
5 days ago

“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

Ayo-Ho Ho Ho! 🎄
5 days ago

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/

#webdev #frontend #webdevelopment #foss #oss #opensource

Steve Frenzel
6 days ago

"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/

#accessibility #a11y #frontend #WebDev #HTMHell

David Bisset
6 days ago

Back to Basics: 5 #HTML attributes for improved #accessibility and user experience

https://www.htmhell.dev/adventcalendar/2023/4/ #development #frontend

Codrops
6 days ago

🚀 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

https://tympanus.net/codrops/?p=74453

Steve Frenzel
6 days ago

"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!

#HTML #HTMHell #WebDev #Frontend #a11y

Inautilo
1 week ago

#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

undefined
1 week ago

“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/

#FrontEnd #WebDev

Michael
1 week ago

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

Ana Tudor 🐯
1 week ago

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

Text cutout with the magenta panel it's cut out of being sliced diagonally and the slices offset along their length in a direction depending on their parity. The panel slices project shadows onto those below them vertically on the page and onto the purple textured background behind.
Ana Tudor 🐯
1 week ago

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

Screenshot of the linked demo with $n being 5, so we have a diagonal 5 rain drips repeating pattern.

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?

#WebComponents #WebDev #FrontEnd

/* Added styles to CSS Cascade Layer to make it easier to override them. */
@layer admin-bar {
  admin-bar {
    /* Hide all slot content until Admin Bar Component is registered via CSS. */
    &:not(:defined) * {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }
  }
}
Ana Tudor 🐯
1 week ago

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

Animated GIF. Shows particles accelerating towards, smashing into and then exploding upon colliding with a button. There's also the option of viewing the animation in slow motion by checking a checkbox.
Inautilo
1 week ago

#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

Carl
1 week ago

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/

jbz
1 week ago

λ 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

#Elm #Haskell #Frontend

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