#frontEnd

Safari *is* the new IE

> If you want your breakpoints to scale along with the user’s font size, you should favor ems instead — but keep in mind you won’t get this benefit Safari unless the user has their minimum font size setting configured.

Re-evaluating px vs em in Media Queries

https://keithjgrant.com/posts/2023/05/px-vs-em-in-media-queries/#the-takeaway

#responsiveWebDesign #mediaQueries #safari #browser #web #webDev #CSS #FrontEnd #fonts #programming #webDesign #iOS #AAPL #Apple #mac #safariIsTheNewIE

RT Jordan Dey
This week's #CodePenChallenge is all about "Toggles"! 🕹️
I'm excited to share my submission called "Bubble Toggles", a cute and animated input design. 🫧
@CodePen: https://codepen.io/DeyJordan/pen/poQvgaz
#WebDevelopment #FrontEnd #Design #HTML #CSS #JavaScript #100DaysOfCode #CodePen #web #dev https://t.co/XXBZxDlEdi

:sys_twitter: https://twitter.com/DeyJordan/status/1666830312486195200

Hey #FrontEnd #CSS developers: how do we feel about using Container Queries at this point?

#javascript #frontend #auth

@ryanbethel continues his auth series w magic links w https://enhance.dev

https://begin.com/blog/posts/2023-06-08-magic-link-authentication

#Development #Explorations
Re-evaluating px vs em in Media Queries · Is the common recommendation to use ems instead of pxs still valid? https://ilo.im/13esaa

_____
#Browser #BrowserCompatibility #Chrome #Firefox #Safari #WebDevelopment #WebDev #Frontend #CSS #MediaQuery #Zoom #FontSize #CssUnits #px #em #rem

If you're someone who frequently forgets about CSS flex properties like me, you might find this VS Code extension helpful.

Name: CSS Flexbox Cheatsheet
Description: Open a flexbox cheatsheet directly in VS Code.
Version: 3.3.1
Publisher: Dzhavat Ushev
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet

#css #flex #devFront #FrontEnd #devFrontEnd #developper #tech #flexbox #vscode

Love this idea; the switch statement syntax always felt a bit clumsy to me. This technique seems a lot neater and more modern. #javascript #programming #frontend https://www.30secondsofcode.org/js/s/switch-object/

My demo #project with Maolte Technical Solutions Limited is underway with my sample website's build story in progress using #html and #css only. Nice to refresh on the #frontend and catch up with new #html5 attributes. #technology #tech #cloud

#Development #Reviews
Modern CSS in real life · New CSS things that really matter to real-world development https://ilo.im/13f8e7

_____
#WebDevelopment #WebDev #Frontend #CSS #LogicalProperties #CssFlexbox #CssGrid #CssSubgrid #ContainerQueries #CascadeLayers #ColorModel #OKLCH #Gradients #ViewTransitions

Dear frontend community, I’ve created an awesome list for frontend watch and included a CSV file for Mastodon, LinkedIn, and Twitter accounts. If you’d like to have your account added to this list, please respond to this toot. :blobfoxflooftea:

https://github.com/Axolotat/awesome-frontend-watch

Could you please #retoot this post to help me get more visibility?

Have a great day! :revblobfox:

#frontEnd #dev #devCommunity #tech #csv #list

Today, I came across an article that talk about a powerful 'rendering' tool in our developer tools. It's amazing !

It can be found in: Dev tools > Hamburger menu > More tools > Rendering > Paint flashing.

https://dev.to/maxime1992/how-to-detect-unnecessary-renderings-of-dom-elements-in-your-web-app-to-improve-performances-13jd

#devTools #frontend #tech

#Development #Techniques
Replace JS with no-JS (or lo-JS) Options · Situations where HTML/CSS can help to substitute JavaScript https://ilo.im/13ed7e

_____
#WebDevelopment #WebDev #Frontend #Code #HTML #CSS #JavaScript #Substitution #Transitions #Animations #Components #Effects

Buongiorno da Reddit che con una mossa alla Twitter ha deciso di uccidere le app di terze parti, e poi anche da #Astro che con la release 2.6 ci porta in dono i Middleware e altre chicchette.

Cia.

#reddit #api #astro #frontend #javascript

https://youtu.be/H2oQ3cK9fwI

#Development #Launches
Meet Safari for spatial computing · Learn how people can experience your web content in a whole new way https://ilo.im/13f9qh

_____
#Apple #WWDC23 #SpatialComputing #visionOS #Safari #WebKit #WebDevelopment #WebDev #Website #Frontend #AR #XR #3D

You may already know that SpeedCurve lets you test URLs across a wide variety of browsers, devices and geolocations. Did you also know you can test complex use cases? These include:

🗺️ User journeys
💳 Checkout processes
ℹ️ Submit login form
📲 SPA & AJAX navigations
🍪 Set cookies

Learn how: https://www.speedcurve.com/blog/speedcurve-recipes-multi-step-test-scripting-made-easy/

#webperf #ux #webperformance #frontend #testing

#Userinterface aus der Hölle: Unsichtbare Bedienelemente an zentraler Stelle um ohne Passwort in die erweiterten Einstellungen zu gelangen 🥳😱🤡🙄

Android app "Cloud Intelligenz" gehört zum #Wechselrichter der #Veska #Solaranlage bzw. #Balkonkraftwerk
von #nettoonline. Den Wechselrichter kann ich nicht empfehlen. Steigt ständig aus und nimmt Mehrleistung über Tag nicht ohne Neustart an.

#ux #ui #uux #userexperience #usability #software #development #frontend #veska #netto #android #app

#Development #Releases
WebKit features in Safari 17 beta · Web apps for Mac, Spatial Web, WebXR, JPEGXL, and much more https://ilo.im/13es5i

_____
#Apple #WWDC23 #Browser #Safari #Mac #iOS #iPadOS #WebDevelopment #WebDev #Frontend #HTML #CSS #JavaScript #RegEx #WebAPI #WebApp #PWA #SpatialWeb #ModelElement #WebXR #WebGL #HEIC #WebDeveloperTools #DevTools #WebInspector #SafariExtensions

#Development #Tools
Colour Contrast Checker · A web tool to check color contrast against WCAG standards https://ilo.im/13d7qi

_____
#WebDevelopment #WebDev #Frontend #Accessibility #A11y #Contrast #Color

#Development #Techniques
Write better code by following these JavaScript best practices · Guidelines that can elevate your JavaScript skills to the next level https://ilo.im/13cu5q

_____
#WebDevelopment #WebDev #Frontend #JavaScript #Guidelines #Debugging #Maintenance

#Development #Techniques
Stop rewriting your CSS! Use ‘:not()’ instead · A guide to :not() pseudo-class, showcasing several practical use-cases https://ilo.im/13cu4v

_____
#WebDevelopment #WebDev #Frontend #CSS #NotPseudoClass #HasPseudoClass #Debugging #CMS

#Development #Launches
HTML & CSS code generators · A fabulous collection of code generators for front-end developers https://ilo.im/13azbo

_____
#WebDevelopment #WebDev #Frontend #Generator #HTML #CSS #Code #Layout #FormElement #TextElement #Formatter #Filter #Separator #Background #Placeholder #Beautifier #RobotsTxt

Continuing our series on how to implement auth @ryanbethel shows how the verification steps for email and phone can be achieved. #JavaScript #frontend #auth

https://begin.com/blog/posts/2023-06-01-email-phone-verify

Cozy reading library released 🎉

✅ Cache API
✅ Client-Side Routing (DOM Swap)
✅ Built with @astro :astro:

Every time you open an article on Cozy, it will be stored on your browser's cache (Cache API).

Clicking a "link" in the Library, will not fetch for it but use the cached article (via DOM swapping).

Demo: https://cozy-reader.netlify.app
Read more about the project: https://ayos.blog/building-a-cozy-web/

#webdev #frontend #opensource #foss

Hier die Slides von meinem Talk zu Vite & TYPO3 auf dem TYPO3 Camp Berlin-Brandenburg: https://speakerdeck.com/s2b/vite-and-typo3 #t3cb #typo3 #vite #frontend

“The ‘H’ in ‘PROGRAMMING’ stands for happiness.” — David Bisset

_____
#Development #DeveloperLife #Development #WebDevelopment #WebDev #Frontend #Backend #Programming #Happiness #Quote

As I continue to discover the world of accessible interfaces, I read an article about the optimal size of a clickable element on mobile devices.

I don't agree with some places in the article. However, the recommendation for a 30x30 to 48x48 pixel clickable icon size range seems very reasonable.

https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/

#accessibility #frontend

What happens when tech companies make bad design decisions? Join @CynthiaSavard to find out and dive into ways to advocate for user benefit. This is where design meets Technology. Get to know this year's speakers by heading to our website ➡ https://lnkd.in/1tsncyym #userexperience #design #technology #frontend #hybrid #remote #onsite

Верстаю диплом ЯП.
Начинаю сомневаться, что я правильно выбрал направление фронтендера.
#frontend

SMH every time I read about #JavaScript #frontend development:

“Thoughts On React Vs Vue Vs Everything Else In 2023”, Charles Chen (https://chrlschn.medium.com/thoughts-on-react-vs-vue-vs-everything-else-in-2023-e4e50e526049).

Via HN: https://news.ycombinator.com/item?id=36168354

#React #Vue #NextJS #Svelte #TypeScript #StaticSiteGenerators #ServerSideRendering #SSG

#Kindle Paperwhite web browser defeated me.

It supports only a subset of CSS and JS (I guess it's ES5 and and 2010-ish CSS3?). I can't figure out which modern features of my site make it freak out.

No remote debugging via USB.

JavaScript user agent doesn't identify it as a Kindle browser at all, just regular unusable gibberish (it says 'Kindle' in server headers but these I can't access in my setup).

So much for researching problems nobody except me cares about heh.

#webdev #frontend

RT Jordan Dey
My "Solar System Menu" has been updated with a lot of mesmerizing transitions 👇
Everything, always 100% in #CSS and without #JavaScript 😎
@CodePen : https://codepen.io/DeyJordan/pen/NWOoEOg
#SolarSystem #Transitions #animation #WebDesign #FrontEnd #CodePen #HTML #web #design #100DaysOfCode https://t.co/6oljd8ZdIW

:sys_twitter: https://twitter.com/DeyJordan/status/1664641294843498510

#Development #Explorations
Future CSS: wishes granted by scroll-driven animations · Some experiments with a new CSS feature https://ilo.im/13aqs0

_____
#Specs #ScrollDrivenAnimations #WebDevelopment #WebDev #Frontend #CSS #Scrolling #Animations

Tras una larga temporada de reflexión, tengo claro que voy a tomar un nuevo camino: Me voy de cabeza con el #gamedev. Esto significa que, aunque me cueste mucho tomar la decisión, voy a ir matando todos mis side projects de #frontend y #web de manera progresiva. El objetivo es que en 2024 tenga la cabeza metida al 100% en el tema, y he decidido de ahora en adelante llevar las redes como una herramienta mas para soltar mis tonterías y darme a conocer. Espero no dar mucho la turra 😅

#Development #Techniques
Shipping resilient CSS components · Container queries empower us to build reusable components https://ilo.im/13az2f

_____
#CSS #Component #Reusability #Resiliency #WebDevelopment #WebDev #Frontend #ContainerQuery #Layout #Style

#Development #Changes
Chrome disables modifying ‘document.domain’ · If your website relies on setting it, it’s crucial to take action https://ilo.im/13aekm

_____
#Chrome #Browser #Security #WebDevelopment #WebDev #Frontend #DevTools #JavaScript

#Business #Releases
Blacklight updated with new tracker lists · The popular website privacy inspector now detects even more trackers https://ilo.im/13a0tv

_____
#Privacy #Scanner #Advertising #Website #Blog #Development #WebDevelopment #WebDev #Frontend #Tracker

Herrlich, nach sehr langer Zeit mal wieder über den passenden Schatten für eine Überschrift diskutiert! #frontend

#Development #Overviews
Is there a viable animated GIF alternative yet or what? · A comparison of some options with decent browser support https://ilo.im/13a4m5

_____
#AnimatedGIF #ImageFormat #Content #WebDesign #WebDevelopment #WebDev #Frontend #Browser #HTML #AVIF #WebM #WebP #MP4 #Video

Right click aaaaaand no "open in a new tab"?

Oh, it must be a case of "div is not a button"!

cc: @matuzo

#frontend #webdev

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day20 : Bookmark reader using only Raindrop.io API

Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks

Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode

Project goals ↓

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

#Design #Collections
Make-It-Accessible · A valuable resource for creating accessible web experiences https://ilo.im/139b8p

_____
#Accessibility #A11y #Inclusion #UxDesign #UiDesign #WebDesign #Development #WebDevelopment #WebDev #Website #Blog #Frontend #Content

I just did a test to apply as a front end developer – and things aren’t going well: "This was nothing short of a mess. This was a #frontend role. Why would Kubernetes and Docker be in there? …There was no question about HTML, structure of documents, semantics or interactivity of elements. There was nothing about performance, nothing about security, nothing about the DOM, nothing about CSS other than a hack we should not be using any longer." https://christianheilmann.com/2023/05/16/i-just-did-a-test-to-apply-as-a-front-end-developer-and-things-arent-going-well/

📣 Hello there!

It's my last day with my current client, and I'm ready for my next freelance adventure.

I am a Design Systems consultant and a "front of the front" front-end developer,

I specialise in Design Systems, Design Tokens, component libraries and font-end tooling.

If you need help with your project, let's chat: hire@sturobson.com.

Seeking short/mid-term remote work.

Let's create amazing Design Systems together!

🙏🖤

#WebDev #WebDesign #DesignSystems #FrontEnd

https://dev.to/emphie/programmers-beware-designers-attack-33oa

I wrote an article about common problems when developing some design elements. I may have been a bit too sarcastic because my editor made me add a disclaimer at the beginning 😅 Enjoy!

#Programming #Design #Designers #WebDev #Frontend #Development

#Development #Reviews
Why we’re bad at CSS · Despite CSS’s latest advancements, its challenges continue https://ilo.im/1369cj

_____
#CSS #Frontend #WebDevelopment #WebDev #DesignSystem #CssMethodology #CssFramework #Bootstrap #Tailwind #CoolCss #BEM

📢 Not a #frontend guy but check out the <dialog> element now available in all modern web browsers, no more shenanigans for a modal window 👉 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 🚀
#HTML #WebDevelopment #DialogElement #WebDesign

Snippets of modern CSS to do useful tasks. A lot has changed in CSS, and there are some really neat ideas here:
https://smolcss.dev/

#web #dev #frontend #css

#Design #Concepts
4 levels of grids for web designers · How structure brings stability, clarity, and consistency to a layout https://ilo.im/1380h9

_____
#Layout #Grids #IxDesign #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #Columns #Alignment #Spaces #VerticalSpacing

@kentparkstreet

YES!!!

You bring up an excellent point.

Authoring Tool accessibility is a critical and often ignored issue.

Responsive design needs to be about more than break points for different sized rectangles.

Interfaces that respond to user needs and harmonize with other settings - such as large print!

Also, sometimes advocating for a good cause can turn into zealotry, your point also illustrates the need for humility and compassion in our assessment of other's behavior.

Sometimes a lack of accessibility might be a case of bad interface, and not bad human.

Thank you for helping to raise awareness!

#a11y #compassion #UX #UI #frontEnd #ATAG

#Development #Explorations
First experiments with view transitions for multi-page apps · Let’s discover the potential of the new View Transitions API https://ilo.im/1392an

“This is a great dive on view transitions.” — @jimniels

_____
#Browser #ViewTransitionsAPI #WebDevelopment #WebDev #Frontend #HTML #CSS #Animation #ProgressiveEnhancement

#introduction

Hi everyone! I'm a French frontend developer. I'm a beginner Linux user on Manjaro i3.

When I'm not coding, I enjoy diving into the world of science, art, and music. Speaking of music, I've been practicing it since I was a kid and still love playing from time to time. I love learning new things.

I split my time between Switzerland and France.

I am excited to share and connect with this amazing community!

#Developer #FrontEnd #Manjaro #Linux #Science #Art #Music

Excelente app #opensource y #frontend alternativo para ver #youtube en Android @libretube

Es justo la alternativa que estaba buscando en android para @FreeTube en el escritorio.

Encontrada en esta lista interminable de frontends alternativos

https://github.com/mendel5/alternative-front-ends#youtube

Reading up on `content-visibility` https://web.dev/content-visibility/

Have you used it yet? If yes, what's your experience with it? Yay? Nay?

#css #webdev #frontend #webDevelopment

“To replace programmers with AI, clients will need to accurately describe what they want. We’re safe.” — Milan Milanović

_____
#Development #AI #Chatbots #Business #Client #Programing #WebDevelopment #WebDev #Frontend #Backend #Code #Quote

Question for the @frontend community:

What benefits would you say Web Components have over a framework's components, *besides* not being tied to a framework?

#WebComponents #frontend #webdev #html #javascript

#Development #Reviews
‘display: contents’ considered harmful · What you risk when you rely on the CSS declaration ‘display: contents.’ https://ilo.im/135nkr

_____
#AssistiveTechnology #Accessibility #A11y #WebDevelopment #WebDev #Frontend #HTML #SemanticHTML #CSS #DisplayContents

#Development #Checklists
HTML best practices for login and sign-up forms · These forms are simple, but many websites still have mistakes https://ilo.im/134snf

_____
#Login #Signup #WebDevelopment #WebDev #Frontend #HTML #JavaScript #Form #Password

Playing around with VanJS, which is a reactive UI framework for #frontend developers using #JavaScript and #TypeScript.

It’s pretty neat.

As a bonus. Modules are great and it’s nice to see folks moving in that direction.

Metto fra le #cosebelle il modo in cui su mastodon tutti si prodigano ad usare #invidious invece che #youtube, è un grande atto di solidarietà per non lasciare che questa oasi sia invasa dalle big tech!

Per chi trova macchinoso usare invidious consiglio 2 estensioni per browser su cui impostare il #redirect automatico a https://i.devol.it al posto di youtube:

🔐 Privacy Redirect: https://gitea.it/devol/privacy-redirect

🔐 Libredirect: https://gitea.it/devol/libredirect

#privacyredirect #frontend

Choosing a JavaScript Framework for your personal projects.

https://ghost.org

Discussions: https://discu.eu/q/https://ghost.org

#css #frontend #javascript #opensource #programming #selfhosted #webdev

I’ve amazed myself with the two little JavaScript tools I’ve written in the last couple of weeks.

1: using plop to create a component scaffolding tool to make sure new components have the correct set of files and folder structure

2: a bespoke little thing that looks at an existing Sass file and generates a design tokens json file to help with retrofitting.

🙏🖤

#FrontEnd #Sass #DesignSystems #DesignTokens #WebDev

Is it important for a Senior #WebDeveloper to be able to craft a form that writes to a #database without resorting to #browser client #JavaScript?

#webDev #web #programming #html #js #software #engineering #frontEnd

Interesting: tiny #frontend framework called "Strawberry" 🍓that has zero-dependencies, without a build step, and it fits in less than 3KB when gzipped.

https://strawberry.quest

#opensource

999? what is this? amateur hour?

#css #frontend #web #webdev

I built an API for my mail hosting platform, and now I need a fancy web interface. Lots of listing and editing accounts, mailboxes, aliases, passwords and such. It's been decades since I've done #frontend - last time was Angular I believe, but I'd like to keep it as simple and with as little boiler plating as possible. Preferably a standalone #SPA of some kind. What are the cool kids using using these days?

Whoa! Finally! The Web is getting an API for popovers that you don't have to z-index or register click-out events for!! 🤯

Introducing the popover API - Chrome Developers https://developer.chrome.com/blog/introducing-popover-api/

#webDev #frontEnd #javaScript #web #chrome #browser

Things that make me sad: Firefox DevTools being unable to show me computed values for custom properties 😿 #CSS #DevTools #coding #webDev #frontend #webDevelopment

How would you pure CSS this split angled scroll reveal? #cssChallenge2023 #CSS #coding #webDev #webDevelopment #noJS #frontend #scrollAnimation

The first content update of the year is here! Here’s what’s new on JetBrains Academy:

🆕 #Python projects
🆕 #Frontend projects
🆕 Kotlin project
🆕 Android project
🆕 Java project

Plus 37 educational topics 👇
https://jb.gg/academy/content-updates-january-2023