#Frontend

#Design #Development #Evolutions
2023 state of design systems and where we take them next · How far design systems have come and where they are heading https://ilo.im/11x65a

“Design systems continue to stick around and will likely stick around until there is a new buzzword for them.” — Ian Frost

_____
#DesignSystem #UiDesign #DigitalDesign #WebDesign #WebDevelopment #WebDev #AI #WebComponents #Frontend #HTML #CSS #JavaScript

And here's a screenshot of the above posts showing the interface, dummy test, and `fast-check` generated data in one spot...

#frontend #softwareengineering

And here are some sample objects created by `fast-check`...

```
{
user: 'V["5z9%q$C',
sortCondition: "price",
sortDirection: "ascending",
perPage: 1438596629,
page: 8,
}
```

```
{
user: "",
sortCondition: "price",
sortDirection: "ascending",
perPage: 497222065,
page: 5,
}
```

```
{
user: ">7opOxtacJ",
sortCondition: "year",
sortDirection: "descending",
perPage: 825212700,
page: 28,
}
```

#frontend #softwareengineering

This is how you can PBT using `fast-check` and `jest`

(screenshot only since it's over the character limit)

#frontend #softwareengineering

```typescript
// ! NOTE: This is the shape of data that we want to generate
export interface InterfaceUpdatingUrlSearchParams {
user: string;
sortCondition: "price" | "year";
sortDirection: "ascending" | "descending";
perPage: number;
page: number;
}
```

#frontend #softwareengineering

Property based testing involves a library that can generate inputs for functions. Then the generated inputs are passed into whatever function you would like to test. It's a different model than describing all the ways an app should work.

Here's a rough & incomplete example on how to do it using the `fast-check` library....


#frontend #softwareengineering

Mastodon exclusive! Quirkos is hiring a front-end developer! #frontend #job #development https://www.quirkos.com/jobs.html

Are there any SVG compressors that will compress embedded bitmaps? None of the ones I've tried so far can
#frontend #svg

#Development #Evolutions
Push notifications are now supported cross-browser · Finally, you can deliver timely and valuable notifications to your web users https://ilo.im/11z54f · by @tomayac

_____
#Browser #Chrome #Edge #Firefox #Safari #BrowserEngine #WebDevelopment #WebDev #Frontend #PWA #WebApp #PushNotifications

This video stretched my brain a bit. Covers property based testing and bugs arising from promises resolving in a random order (ie: multiple api calls initiated by a user). They also describe the #frontend as a domain of race conditions.

https://www.youtube.com/watch?v=GIPbY75-lEo

#Development #Techniques
Fighting inter-component HTML bloat · Ways to deal with an unwanted byproduct in design systems https://ilo.im/11xzob · by @elise

_____
#DesignSystem #Webperformance #WebPerf #WebDevelopment #WebDev #Frontend #HTML #Markup #Accessibility #A11y

Would a reasonable #webdev project for an intermediate person be to scrape a few sites for a headline, pull some data from the story, and send an automated email using that data?

Wanted to do this for a while and never got to it. Looking for a challenge, not a nightmare.

#development #learning #frontend #backend

Zeit für ein paar #Frontend Links:

- Tooltip: Kleines Web-Tool um Bookmarlets zu bauen.
https://make-bookmarklets.com/

- CSS: Natives CSS Nesting (Chrome 112 & Safari TP 162)
https://developer.chrome.com/articles/css-nesting/

- CSS: Relative rounded borders:
https://set.studio/relative-rounded-corners/

- CSS: Mit `:has()` einen Selektor auf vorige Elemente bauen:
https://tobiasahlin.com/blog/previous-sibling-css-has/

Push notifications are now supported cross-browser https://web.dev/push-notifications-in-all-modern-browsers/ by @tomayac #webdev #web #frontend #css #html #programming #coding #code

#Development #Releases
WebKit features in Safari 16.4 · Apple’s most gigantic WebKit release yet, including PWA features! https://ilo.im/11yb28

_____
#Browser #Safari #WebKit #WebDevelopment #WebDev #Frontend #PWA #WebApp #WebPush #AppBadges #WebComponents #ShadowDOM #CSS #HTML #JavaScript #WebAssembly #WebAPI #DeveloperTooling #WebInspector #SafariWebExtensions #SafariContentBlockers #Image #Audio #Video

WebKit Features in Safari 16.4

https://webkit.org/blog/13966/webkit-features-in-safari-16-4/

Discussions: https://discu.eu/q/https://webkit.org/blog/13966/webkit-features-in-safari-16-4/

#apple #frontend #technology #webdev

You don't need #ReactJS until your webpage changes. That's why it's called "React", it makes the #DOM *react* to changes in application state. If the state never changes, #React is unnecessary. #webDev #frameworks #web #dev #programming #frontend #JavaScript

Ik ben opzoek naar een collega! Heb jij passie voor het web, wordt je graag betaald door lezers ipv advertenties en wil je bijdragen aan onze missie? Kom werken bij De Correspondent!

https://decorrespondent.homerun.co/front-end-developer-2/nl

#webdev #frontend #vacature #amsterdam

Web Frameworks meetup this 19th of April. Some cozy time with snacks and talks about the new-ish Frameworks.

I'm going to talk about @astro -- If you're around Amsterdam, come join!

👉 Meetup link: https://www.meetup.com/coven-of-wisdom-amsterdam/events/292064053/

#webdev #frontend #frameworks #withAstro #meetup #amsterdam

Currently working on a redesign for a website. The job isn't complete yet as some work needs to be done for the "login" but the main redesign is complete.

Here is an image of the previous version and the updated redesign made with #React #frontend #ReactJs #frontenddeveloper

#Design #Development #Techniques
Affordances · How we can offer diverse ways of consuming regular content https://ilo.im/11weln

_____
#Concept #Affordance #UiDesign #DigitalDesign #ResponsiveDesign #WebDesign #WebDevelopment #WebDev #Frontend #HTML #JavaScript #TabSet #DisclosureMenu

I'm struggling with TypeScript generics (again) : How pass an Interface to a method using generics ?

https://stackoverflow.com/questions/75853970/how-pass-dynamically-interface-to-a-method

#Dev #Reactjs #Nextjs #frontend #Help #TypeScript #Generics

#Development #Pitfalls
CSS-only widgets are inaccessible · The problem with most interactive widgets powered exclusively with CSS https://ilo.im/11x926

_____
#Widget #Usability #Accessibility #A11y #WebDesign #WebDevelopment #WebDev #Frontend #CSS

It worries me that ChatGPT and similar tools when used to create frontend code will result in worse accessibility given that they effectively mimic the "average" and the average website is full of accessibility issues.

#a11y #chatgpt #frontend

#100DaysOfCode : #HTML #CSS

#Day11 : View Transitions API for MPA

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode

Project goals :
- HTML meta tags on both pages to unlock transitions API without JS
- Transition composed by opacity, left and transform scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily #ViewTransitions

RT codrops: Time flies! ⌛ One year ago, we shared Creating a Risograph Grain Light Effect in Three.js. Take a look back: https://tympanus.net/codrops/2022/03/07/creating-a-risograph-grain-light-effect-in-three-js/ #webdev #webdesign #webgl #threejs #javascript #tutorial #3d #coding #frontend #codropsarchives

How to build a standards-inspired Web Component

https://junaid.dev/how-to-build-a-standards-inspired-web-component/

#FrontEnd #HTML #JavaScript

How useful is automated testing in Chrome Extension development, especially those which mostly run in the background with no UI?

#frontenddev #frontend #dev #webdev #askFedi

I used #CSS `clamp` for text sizing in production for the first time yesterday. For advertising, no less. That’s given me confidence to use it on my next launch. It’s the maths of applying it to a complete system (i.e. not just one limited advert view) that’s most intimidating #FrontEnd

#Development #Introductions
The search element · What to expect from HTML’s new grouping content element https://ilo.im/11wb00

“This is not the most important element that’s ever been added to the HTML specification. It is however a nice little accessibility win.” — Scott O'Hara

_____
#HtmlSpecification #SearchElement #WebDevelopment #WebDev #Frontend #HTML #ARIA #Accessibility #A11y

Follow Me! #introduction

#oregon #pdx #pnw #portland #sanFrancisco #sf #arkansas #cannabis #coffee #cycling #bike #eBike #fungi #mushrooms #unreal #videoGames #gaming #vr #retroGaming #rg35xx #sega #web #css #developer #frontEnd #fullStack #html #javaScript #js #webApps #webDev #aws #customElements #cypress #devops #graphql #lit #pwa #react #reactjs #serverless #shadowDom #webComponents #web3 #activityPub #bitcoin #blockchain #btc #crypto #cryptocurrency #filecoin #helium #hnt #icp #ipfs

#Development #Proposals
Preventing too-short final lines of text blocks · A CSS proposal to get direct control over widows in text blocks https://ilo.im/11t33q · by @Richr

_____
#WebTypography #WebDevelopment #WebDev #Frontend #CSS #CSSWG #Widows

Yes, ChatGPT can center HTML elements. This is GPT3.5.

#GPT #ChatGPT #Frontend

Here's a question to the #web #developers out there:

How many jobs were cut at your company due to the fact that all the solutions for building a website #frontend can be found on StackOverflow or at w3schools.com/howto ?

Did any developer lose their job, when non-technical people started publishing web pages via CMS?

So, I'd basically agree with this article: https://www.joshwcomeau.com/blog/the-end-of-frontend-development/

If anything, #AI is just the next step in this tech "arms race".

#Development #CheatSheets
When is :focus-visible visible? · How browsers determine when a focus outline is necessary https://ilo.im/11u4aj · by @ire

_____
#FocusVisible #WebDevelopment #WebDev #Frontend #CSS #WebForm #Keyboard #FocusOutline #UserAgent

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day10 : View Transitions API

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-Day10-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-Day10-Of-100DaysOfCode

Project goal :
- View Transitions API experimentation : understanding principle of implementation with VanillaJS .startViewTransition and DOMChanges activator

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily

RT simey
the @CodePen #codepen #challenge is about Expanding Buttons ... Well here's the Expanding Brain meme (Galaxy Brain) in button format.
The code is a mess, don't look.
https://codepen.io/simeydotme/pen/jOveeBg
#webdev #css #js #frontend #FrontEndDeveloper

:sys_twitter: https://twitter.com/simeydotme/status/1638858415895109634

Not a big fan of lists just for the sake, but this was useful:

"The most popular build tools for #frontend developers in 2023"

https://stackdiary.com/build-tools-for-web-development

Do you really need that custom web font? Do users actually care?
There are many benefits from using system fonts, among which

👉 Nothing to load. System fonts are already available
👉 Reducing page weight and load times
👉 Preventing layout shifts and flash of unstyled text

If you want to give your web design that special treat, there are a lot of nice font stacks already available:
https://modernfontstacks.com/

#webdev #webdesign #webfonts #fonts #typography #frontend

Are frontend development and UX design facing their final act? So, we are curious - what goes on in your mind? https://www.linkedin.com/posts/frontzurich_the-end-of-front-end-development-activity-7044585948910608384--PDW #frontend #ux #ui #design #community #conference #switzerland #frontzurich #ai

good #frontend #css folk on the fediverse, what is the property to tighten up the spacing between lines? methinks my lines look too loosey-goosey and i want them a bit closer togethher. thank you!

Je viens de découvrir la fonction clamp() en CSS et c'est incroyable ??

Ça permet de faire du responsive pour le texte en définissant une valeur max/min et la valeur...
#css #frontEnd #dev

#Development #Introductions
Open UI and the Popover API · It’s time to handle our basic popovers without the explicit need of JavaScript https://ilo.im/11tic2

_____
#W3C #OpenUI #PopoverAPI #Popover #Popup #Tooltip #WebDevelopment #WebDev #Frontend #HTML #CSS #Accessibility #A11y

Great article from Josh W. Comeau about if AI will replace developers:

https://www.joshwcomeau.com/blog/the-end-of-frontend-development/

#AI #ChatGPT #MachineLearning #development #web #frontend

I think if your site only has markdown posts, #Jekyll is still a very very good option. The time to build is very fast.

It’s the ruby package management that is mostly hard to manage for newbies in this ecosystem (like me)

#webdev #frontend

"#HTML is the skeleton
#CSS is the skin
#javascript is the brain

Without skeleton, you can do nothing.
Without skin, you'll look ugly.
Without brain, your body won't function."

Great comparison, worth sharing, I think.

credit: user Darren Mistry on Quora
#programming #FrontEnd

Although Node.js is the de facto standard for running JavaScript on the server, not everyone is ecstatic with it. In this post we explore two alternative JavaScript runtimes: Deno and Bun. Will they eventually replace Node.js? Should you try them in your next project? Read this article by Mieszko Sabo and find out!

#javascript #frontend #frontendeveloper #FullStack

https://softwaremill.com/choosing-a-javascript-runtime-for-2023-node-vs-bun-vs-deno/

Josh W. Comeau with a nuanced take on what the #AI situation could mean for the future of #frontend development:

https://www.joshwcomeau.com/blog/the-end-of-frontend-development/

Visually hidden content is a hack that needs to be resolved, not enshrined from @scottohara

https://www.scottohara.me//blog/2023/03/21/visually-hidden-hack.html

#WebDev #A11y #FrontEnd

Anyone who thinks #AI will replace #FrontEnd devs either doesn’t understand or has no respect for the craft of front-end engineering.

I’ve used plenty of poorly-made apps and sites—let alone inaccessible ones—and I don’t think any AI will be able to replicate the care and human touch we put into our work.

@JoshWComeau@twitter.com’s post again hits the nail on the head

https://www.joshwcomeau.com/blog/the-end-of-frontend-development/

Life as a FrontEnd dev in 2023. Which side of the bus I'm sat on depends on the day.

#frontend #JavaScript

Image stolen from @northstardoll on Twitter

Les dev front ici, vous avez des flux RSS sympa pour faire de la veille tech ?

#frontEnd #dev #tech

Wrote a blog! After more than a year of not writing anything there 😄

Notes on using web workers in Angular

#webdevelopment #webdev #frontend #angular #webworkers #tech #blog

https://blog.ayco.io/web-workers-in-angular/#ng

I'm giving a lunch talk presentation to my old code bootcamp tomorrow and my theme/title is "Applications, Interviews, and Early Career Challenges". Any insights or advice you'd want to share with your past self?

#frontend #developer #software #code #development #web #webdev #javascript #programming

An old meme that I found on my desktop #frontend #javascript #css #react #solidjs #preact

When is :focus-visible visible? from @ire

https://bitsofco.de/when-is-focus-visible-visible/

#FrontEnd #WebDev #CSS #A11y

There's rarely a page I mark up that doesn't have me wishing that the long-since proposed <lt>/<lc>/<lh> tag were adopted. The …

<p>In the Power of Love, FGTH sang about:</p>
<ul>
<li>flowers</li>
<li>pearls</li>
<li>pretty girls</li>
</ul>

… pattern is ubiquitous yet has always felt awkward compared to:

<ul>
<lt>Frankie says:</lt>
<li>live those dreams</li>
<li>scheme those schemes</li>
<li>hit me with those laser beams</li>
<li>relax</li>
</ul>

#html #webdev #frontend #w3c

#Development #Outlooks
The end of front-end development · Things are going to change, but not in the scary way people are saying https://ilo.im/11t8v2

_____
#Job #AI #GPT4 #ChatGPT #ChatBot #WebDevelopment #WebDev #Code #Frontend #HTML #CSS #JavaScript #Skills #Productivity

#Signals are just the reactivity model from #Solid, #MobX, #Ember, #Knockout, et al. It pushes a notification with an #observable-like mechanism that something has changed, there’s a dependency graph (implicit or explicit) that is notified. Then, it schedules a pull to calculate values. #ReactJS #Preact #javaScript #webDev #frontend

backend dev & frontend dev

#webdev #programming #frontend #backend #css #html #javascript #code #ui #ux #apple #ios #macos #memes #joke #php #python #java #sql #database #coder #coding #vim

This talk on keeping the eleventy config file organised by @lene is great!

https://www.youtube.com/watch?v=nlaN-mifrWk

Highly recommended to any #11ty folk on here, who, like me, might have been dealing with an increasingly cluttered config (and not doing anything to remedy it 😅)

Lene even shares some neat tips on simplifying the addPassthroughCopy method which passes through static files to the output folder.

#WebDev #Frontend #Eleventy

A #CSS tip for Mastdon admins. If you're a polyglot like me and have "Translate" link enabled for DeepL or LibreTranslate, you can hide the "Translate" link for the languages you understand.

This example is for people who undesrstand German and Finnish. Add the snippet for Stylus, etc. or if you are on a single user instance, you can add it to your Custom CSS section:

.status__content__text[lang="de"].translate ~ .status__content__read-more-button,
.status__content__text[lang="fi"].translate ~ .status__content__read-more-button {
display: none;
}

#MastoAdmin #WebDev #FrontEnd

University and bootcamp instructors may dock marks off for improper componentization, but these people are really behind on what people in the Industry do.

Don't listen to them.

If you want to componentize, because it is easier for you, then do it.

If it doesn't bother you to *not* componentize, then don't bother #reactjs #react #frontend

I'm looking for a Senior Frontend Developer / UX Engineer role somewhere people are put first.

I have over 7 years of experience working in the public and private sector.

Specialisms include accessibility and design system architecture (of note I helped ship the GOV.UK Design System).

I'm passionate about building interfaces that work for real people.

I'm at my best when I'm able to influence design and solve problems.

I am London based but looking for remote friendly or hybrid working, so anywhere works!

Please boost for reach :) :boost_ok:

#jobs #frontend #accessibility #remote

it's interesting that the most popular #react wrapper for an actual lisp (clojurescript) uses #signals in place of useState(). you'd think truly functional languages would try to avoid that piece of mutable state.

https://reagent-project.github.io

#frontend #webdev

@manlycoffee not exactly a "new" pattern

#frontend #programming #react #reactjs

Componentization on React (and other frameworks like it) is just generally an antipattern #react #reactjs #programming #frontend

New pattern when using React (and other frameworks like it):

views, hooks, and signals

#reactjs #react #programming #frontend

Did you know that the first website ever created is still live today? It was created by Tim Berners-Lee in 1991 and was dedicated to information about the World Wide Web. 🌐💻

http://info.cern.ch/hypertext/WWW/TheProject.html

#webdevelopment #funfact #webhistory #timbernerslee #worldwideweb #internet #webdesign #webtech #webdev #programming #coding #html #css #javascript #frontend #backend #webdeveloper #webprogramming #webapp #tech