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

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,
}
```
This is how you can PBT using `fast-check` and `jest`
(screenshot only since it's over the character limit)

```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;
}
```

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....
Mastodon exclusive! Quirkos is hiring a front-end developer! #frontend #job #development https://www.quirkos.com/jobs.html
#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.
#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.
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/
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!
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/




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
#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
#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/
How useful is automated testing in Chrome Extension development, especially those which mostly run in the background with no UI?
#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

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"
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/
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
#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/
"#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
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.
Image stolen from @northstardoll on Twitter

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

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>
#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
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.
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;
}
![An example to hide a translate link for the languages you understand. A post by Ilkka Tengvall in Finnish and the CSS code beside it:
.status__content__text[lang="de"].translate + .status__content__read-more-button,
.status__content__text[lang="fi"].translate + .status__content__read-more-button {
display: none;
}](https://assets.toot.cafe/cache/media_attachments/files/110/050/910/463/110/798/small/5b52689153040548.png)
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:
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.
@manlycoffee not exactly a "new" pattern
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
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