Examples of original link effects 👍
Two circular navigation demos
A demo of 3 types of navigation menu with sublebels:
- Overlapping levels
- Covering levels
- Overlapping levels with backlinks
Improved list designs. It's refreshing.
It's hard to debate about the best technologies. So here are a summary of the arguments of the author.
Main Argument: React isn't great at anything except being popular.
- React is good.
- React laid down the groundwork for other web frameworks. Vue 3 and React hooks, Svelte's conventions from React, Nuxt from Next, ... The component based-model owes much to React-
- React’s greatness is more in what it meant at the time than what it currently is today, absent that context
- React has aged. And I don't think most people—particularly those using it regularly—realize how much or how poorly. → when you live in the React world, you only see improvements. It shields you from React's velocity compared to other frameworks.
- React doesn’t do anything better than other frameworks.
On a greenfield project, how do you make the call on the front-end framework you'll use for the next several years? Things to consider:
- Performance → Vue, Svelte, Solid, Inferno and a host of others generally provide markedly better performance than React.
- Learning curve → JSX allows HTML into a JS function. The only thing worse than using JSX with React is not using JSX with React. Many things other front-end frameworks handle for you or make trivially easy require manual intervention or significant boilerplate. React is built for Facebook, others frameworks for the world.
- Bundle size: not the smallest
- Scalability: React doesn’t have anything special here; it just has the most examples.
- Community and support: does not mean a better choice. A big community can be a downside, too, especially in the case of a so-called “unopinionated” framework such as React. It can mean too many packages to choose from, and too many different, competing opinions that you’ll have to decide between and take a stance on.
- Financial backing: Vue is one of the most successful and well-funded open-source projects in history. [Through examples] backing is not an issue among major front-end frameworks
- Developer experience: React placed behind both Solid and Svelte in terms of satisfaction in this year’s State of JS Survey results. React also placed behind Svelte, Solid and Vue in terms of interest React's satisfaction and interest have been declining steadily for years, while its usage has flatlined.
- Hireability: This is the one area where React definitively comes out ahead. If you need to hire a dev who knows your thing already, React is clearly the choice.
- vs Competitors: But bear in mind that choice also gives you absolutely no tech advantage over your competitors. They’re all (mostly) using React, too.
Why react stays on top?
Because we don’t always value the strongest choice as much as we value consensus.
One other thought here: it’s possible we’re already moving past React, but we just can’t see it at a high level yet.
- Versatile: we use the web for many things
- Decentralized: there is no one single arbiter
- Resilient: the development is hostile as there is a lot to consider such as multiple browsers, network condition, input modes, and third-party scripts,...
- Responsive: there is a responsive design on the web
- Adaptable: range of form factors, device capabilities, and specialized browsing modes.
- Accessible or at least can be accessible: It represents a rare space where a disabled individual may operate free from the immense amount of bias, misunderstanding, and outright hate that is pervasive throughout much of society.
- Inexpensive: the fact remains that you can achieve an incredible amount of functionality with a small amount of code. There is ~$40 for internet-ready smartphones.
- Diverse: the list of browsers is huge. This diversity encourages innovation.
- Standardized: with the w3c. It is well documented with the Mozilla Developer Network, StackOverflow, and blogs, ... Plus 20 years old web pages are still usable today.
- Open: the standardization and consensus are transparent. it helps to disincentive more abstract threats like adversarial interoperability. OSS FTW.
Create Beautiful Fullscreen Scrolling Websites
fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.
The project is useful websites similar to slides or demos.
Avoiding media queries is possible but unreadable.
Some SCSS mixins make it more readable though: https://github.com/ryevych/adaptiveValueFunction/blob/main/scss/adaptiveValueFunction.scss
Extending the atomic design with applications and principles:
Applications provide a place to document overall product and business information to give context about how and why the pages within an application are organized. Principles were added below the Atoms as a repository for our generalized interaction patterns; patterns such as how and why to use animations or the proper way to truncate text.
An example of style guide for content
From Tim Berners-Lee
Date: 1998, last change: 2013-03-04 22:56:21
When you design a system or a language, if the features can be broken into relatively loosely bound groups of relatively closely bound features, then that division is a good thing to be part of the design. This is just good engineering. It means that when you want to change the system, you can with luck in the future change only one part, which will only require you to understand (and test) that part. This will allow other people to independently change other parts at the same time. This is just classic good software design and books have been written about it. The corollary, the TOII is less frequently met.
Feature available or not in your current browser
Web Content Accessibility Guidelines Success Criterion 2.4.4: Link Purpose (In Context) instructs us to ensure that a link’s accessible name makes sense when separated from its surrounding context. It’s why “learn more about elephants” is a far more effective link name than “click here.”
Cool to know.
This is all about maintaining an equivalent experience by not over-describing something for only a certain subset of people. Here, the goal is to preserve the author’s intentional act of creating a sense of curiosity, regardless of the way someone interacts with technology.
User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.
It is also worth noting that on the web, the majority of user-facing state can be communicated programatically. This means that there is an HTML attribute or ARIA declaration that can ensure people who can’t see the content can understand the state something has been set to.
It is different from the application state.
The states:
- resting: the status of something before someone has interacted with it, or other content affects it. Oftentimes referred to as “Base” or “Default.”
- hovered
- active
- focused
- visited
- loading / loaded
- disabled
- hidden
- readonly
- enabled
- checked: marked for sending as data to another internal or external resource. Can be focused, but keeps it's selected state after focus is moved
- unchecked
- undeterminate
- selected / deselected
- dragged / dropped
- collapsed / expanded
- resizing
- dirty: an editable element that has been manipulated on one or more occurences
- pristine: editable element has yet to be manipulated by someone
- saving
- overflowing
- scrolling
- playing / paused / stopped
- sticky
- unstuck: sticky element removed from a side of the viewport back it its original position
Research shows that the more different a new view is visually, the more likely it is to be perceived as a separate page by users. With it comes the expectation that the “Back” button will bring a user to the previous “page,” even though, technically, it might not really be a separate page.
That's why it's good to adjust the URL as much as possible :)
Moreover it allows to share this "state" of the page
Nice project
Un dashboard d'accessibilité reprenant un bon paquet d'outils. C'est bien fait, complet, et ça rend la démarche d'accessibilité approchable
Ahaha the catchphrase
In short, the information age needs an information super-highway and not just a big pipe for interactive documents.
About academia and industry:
Academia is structured in a way that there is very little incentive for anyone to build usable software. Instead you are elevated for rapidly throwing together an idea, a tiny proof of concept, and to iterate on microscopic variations of this thing to produce as many papers as possible.
In engineering the devil is in the detail. You really need to get into the weeds before you can know what the right thing to do is. This is simultaneously a devastating situation for industry and academia. Nobody is going to wait around for a team of engineers to finish building a system to write about it in Academia. You'll be passed immediately by legions of paper pushers. And in industry, you can't just be mucking about with a system that you might have to throw away.
And Semantic Web seems to be something to learn about: https://en.wikipedia.org/wiki/Semantic_Web
Segmented Rendering is just a smarter way to do static rendering. Once you understand that it’s all about caching renders and then getting the right cached render for each request, everything will click into place.
To implement segmented rendering:
- Define your “segments” for a page.
Example: paid users versus free users, users from company A versus users from company B or C, etc. - Render as many static variations of a page you need, with one URL per segment.
Example: /with-jokes/my-article, /bland/my-article. Each variation matches a segment, for instance, paid or free users. - Setup a very small redirection server, that checks the HTTP request content and redirects the user to the right variation, depending on their segment. Example: paid users are redirected to /with-jokes/my-article. We can tell if a user is paid or not by checking their request cookies.
More performance?
Render the site on demand with Incremental Static Regeneration