Masthash

#Frontend

Inautilo
1 hour ago

#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

Chad Oakenfold
9 hours ago

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

#frontend #softwareengineering

Chad Oakenfold
9 hours ago

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

Chad Oakenfold
9 hours ago

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

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

#frontend #softwareengineering

Chad Oakenfold
9 hours ago

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

Chad Oakenfold
9 hours ago

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

Daniel Turner
14 hours ago

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

Joe Lanman
14 hours ago

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

Inautilo
23 hours ago

#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

Chad Oakenfold
1 day ago

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

Inautilo
1 day ago

#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

mfjurbala
1 day ago

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

Hilko Holweg
2 days ago

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/

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

Peter Goes
2 days ago

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

Ayo Ayco
3 days ago

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

Ted Ward
3 days ago

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

Version 1 of the website.
Redesigned Version.

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

Inautilo
3 days ago

#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

James Royal-Lawson
4 days ago

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

Wu Yuansheng
4 days ago

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

Jez McKean
4 days ago

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

5 days ago

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

Inautilo
5 days ago

#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

Inautilo
6 days ago

#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

C:\KKJ\>:idle:
6 days ago

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

#GPT #ChatGPT #Frontend

Oliver Schafeld
6 days ago

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

Inautilo
6 days ago

#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

CodePen.IO :verify:
1 week ago

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

David Bisset
1 week ago

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

Morten Bech
1 week ago

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

Front Conference Zurich
1 week ago

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

Jason
1 week ago

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

Inautilo
1 week ago

#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

Daniel
1 week ago
Ayo Ayco
1 week ago

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

Wojtek Brejnak :verified:
1 week ago

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

SoftwareMill
1 week ago

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/

Fynn Becker
1 week ago

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/

Stuart Robson
1 week ago

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

Sidney Alcantara
1 week ago

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/

1 week ago

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

A famous meme of two people sitting on opposite sides of a bus, one looking gloomy in shadow: 'there is so much to learn'; the other smiling in sunshine: 'there is so much to learn'.

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

#frontEnd #dev #tech

Ayo Ayco
1 week ago

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

djsacrilicious
1 week ago

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

manlycoffee
1 week ago

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

Stuart Robson
1 week ago
Pete
1 week ago

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

Inautilo
1 week ago

#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

Christian Alder 🌱
1 week ago

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

Roni Laukkarinen
1 week ago

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

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;
}
manlycoffee
2 weeks ago

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

Nick
2 weeks ago

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

2 weeks ago

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
2 weeks ago

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

manlycoffee
2 weeks ago

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

views, hooks, and signals

#reactjs #react #programming #frontend

raimoncoding
2 weeks ago

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