Today is a big day for Webstudio! We are excited to unveil what we have been working on for the last year!
Webstudio CMS is live on ProductHunt:
We took an unusual approach to CMS because we wanted to prioritize maximum scalability, performance, and
Please DO totally overengineer your side projects with the coolest tech you can probably find.
Maybe this way we will be able to not overengineer real apps and learn when to use the cool tech.
I spent 15 years building web apps and I honestly hate the web as a user today 🤯
- 10 clicks before I can see any content
- ads everywhere
- random UI elements everywhere
- awful log in experience which requires a second device
We fucked up.
Two month ago I joined Tesla as a sr staff front end engineer to build the next generation of the ui used for the cars manufacturing process.
I love the team and I love the fact that I am part of the solution to the environment crisis.
🛠🏎🍀
JSS made it into the
@MicrosoftEdge
. I mean a browser vendor uses it to build it's UI: favorites, history etc. what else?
I mean how cool is that, something I built with JS made it into the browser 😀
Also, a browser vendor uses CSS-in-JS, isn't that ironic?
VirtualDOM is a confusing term. It just means in React a data structure in plain JS objects, which is used to compare with a new data and find the changes.
It sounds though like it is an actual DOM implementation in JS, like JSDOM library does, but it isn't.
The reason developer tools need to be fast in one sentence:
If I have to wait more than 5 seconds for something, I am going to switch my tab to something else and will come back in half an hour and that's how I am going to spend my day.
@scaredmonad
I think we should be more ambitioned:
<button
onClick={() => {
// Literally launches a physical rocket into space.
launchRocket();
}}
>
Click me
</button>
I never published this info, but I built a profitable business on the side long time ago that still runs smoothly:
It makes $15 per month.
Of which $7 goes to Heroku (yes that's when I built it)
That makes $8 net win per month.
No, numbers are not in thousands 🤣
Web UI Engineering has so many areas, its not even funny to assume one person can be real good at all of them:
- Layouts
- Animations
- Js architecture
- CSS architecture
- JS performance
- SVG
- Testing
- Browser APIs
🧵 It's time for our industry to realize the title "frontend developer" is obsolete. The vast majority of these profiles are actually "JS engineers", and they're usually quite good at it, but they're not as good at all the other things contributing to great frontend experiences.
Did you also notice that people who have some experience inthe backend a quite arrogant when they learn frontend? In the sense expecting everything to be simpler than it is and assuming you just can't explain?
I feel deeply ashamed of our community. We let people who deeply care about open source and invest their private time for years to go out unpaid.
Every one of you depends on core-js.
Interesting issue. Core-js is the main polyfill library, used in Babel (the main consumer), angular-cli and other 2.5 million places. However, nobody donates to it, since almost nobody even knows about it.
Today we run into a fun case with concurrent React 18.
We had a useEffect that was sometimes not running.
Turned out by throttling CPU it can be made reliably reproducible.
Turns out you can't rely on useEffect dependencies to run something.
🙃
Ok guys, I am no longer working for Ebay Classifieds, starting from today, it was an interesting experience.
The good news is - I am ready to accept a new challenge 😀
Hit me up if you want me in your team, my DMs are open!
CSS is a programming language. CSS is a programming language. CSS is a programming language. CSS is a programming language. CSS is a programming language. CSS is a programming language. CSS is a programming language. CSS is a programming language. CSS is a programming language.
Damn, we just found a solution to a really hard accessibility problem, I don't think this has been done before:
How do you make this component fully keyboard accessible if both icon and px are buttons and this component is part of a list, so I don't want to tab through each 3x?
Build for the web and stay free of vendor lock-in.
Full power of CSS, ludicrously fast on the Edge.
Launching Beta in a few weeks, follow for updates
@webstudiois
Yesterday I learned that QWERTY was designed to avoid jamming of keys on a TYPEWRITER.
And we still use it today as the modern input device
🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯
@HenrikJoreteg
In my reality, those 3 people can build a lot of stuff but it is unlikely to be well-written code nor well tested.
After 6-12 months they will have to face the debt they made and start refactoring and will get slow.
The same thing happens to a larger eng org, just much sooner.
In year 3000 JavaScript:
We are happy to introduce a new primitive value: "empty".
Now you can stop using null and undefined. Also it is iterable and has array methods built-in.
My attempt to explain CSSinJS from a higher level perspective, based on core problems. I couldn't fit all aspects into one article, but I hope this helps many people to understand main problems and ideas.
My wife sometimes asks me what I am doing right now and when it's Open Source stuff I don't know how to answer that.
It's not work since it's not paying. It's not fun side projects since it's not not that fun and also it would mean I would have to stop and go help.
Unit testing a react component is a waste of time in 99%
and here is why:
React components are useless without React or a compatible runtime. You can see components also as "plugins" which together with the runtime make a framework and then an application.
1/
React vs. Svelte vs Vue:
Any small app is likely fast enough, faster bootstrap (less JS or less comp upfront) will be minimally better.
Any large app will be potentially slow because slow code will be user code and can only be optimized using a different lang and compiled.
@dan_abramov
I haven't learned a single "best practice" I haven't found wrong in certain situation, so in the end, it's all about knowing them all and using them where they fit. The problem though is how do I know what fits if I am a beginner. You don't. That's why one needs a decade.
The answer to use SSR or not is quite simple:
1. Does your site needs to be frequently visited by google bots? -> SSR
2. Do you need to optimize for first meaningful paint? -> SSR
There are many many cases where you don't need SSR though.
@dan_abramov
I would start with DRY, which is the most controversial. Naturally, we try to reuse all the code, but once we learn how app needs to be structured, we may find that many things should not be reused.
I made i18n strictly typed and every time I render a string that is not translated yet - typescript shows an error, so I can't forget it.
Enjoying this quite a bit.
People: we want you to stop tracking us!
Sites implementing GDPR: click here to agree that we are tracking you or otherwise GTFO.
🤷♂️
🤷♂️
🤷♂️
🤷♂️
🤷♂️
🤷♂️
🤷♂️
🤷♂️
🤷♂️
I was building something over the weekend using
@radix_ui
I gotta say, using it feels like stealing. Its what web components should have been out of the box.
Whats interesting in Open Source is that there is no titles.
Your seniority is strictly defined by the type and quality of changes you are introducing as well communicating.
Q (0 followers): hey, I have a problem
A: that's unfortunate
Q (100000 followers): hey, I have a problem
A: so glad you reached out, so happy to help, can I call you or your family and send you whatever you need every day for the next 50 years?
Writing good docs is damn hard. It requires lots of empathy. Without empathy you won't remember what you struggled with, so that you can explain it later to others.
Over the last years, 2 big things happened to the web platform, I just hope everyone has noticed:
1. CSS Grid
2. Design Systems awareness
We are gonna see a much better web over the next decade because of those two.
@dannymoerkerke
If anything, it tells us that there is a lot of sites nobody touches for 10 years or there are tools generating those sites and use jQuery and co to do so.
It sounds you are implying that a lot of new stuff is getting built with jQuery today, which is unlikely the case
Sorry for not being too active in open source this year.
1. I got married and changed my name. Now I am Oleg Isonen 🤔
2. I am joining eBay Classifieds Group, MoVe team next month 🔥
@AdamRackis
Hey, the joke seems like fun to you but it's not to yarn maintainers. If you really want to learn what is going on between the versions - talk to them. This take is definitely harmful to people who gave us these tools for free.
I have just been reflecting on what we have achieved so far in ~6 Months as a team
@webstudiois
Honestly, I can't believe we are this close to the Private Beta launch.
Things we have already built 🧵
CSS-in-JS is an experiment that teaches us things like:
💪🏼API is better than conventions
🚀Automation is better than hard work
🛠 Tools are important
😂 We can put ANYTHING into JavaScript, if you make us to!
I regret having written integration tests and not written unit tests every time I come back and try to understand that code later.
Every Single time.
Unit tests are tedious and annoying to write, but they are the only thing that truly explains what the code was supposed to do.
We released JSS v10.
- A new hooks-based API.
- Keyframe IDs are now scoped by default.
- Function values and observables apply plugins by default now.
- Houdini Typed CSSOM Values.
- Each package supports ESM modules import
- Added TypeScript type definitions to this repository
Unpopular opinion: eslint shouldn't have warnings, just errors.
The intent was to let some things be optional, but the reality is that as soon as you let warnings be committed, they will start pile up.
If you don't let them get committed - they are factually errors.
@filrakowski
@reactjs
@vuejs
At the same time, shopify decided to create a React storefront, so now VueStorefront team is working for shopify and rewriting it in React 🙃
Unpopular opinion: open source is not that much about getting people to help you write code. It is much more about getting all the diverse input and use cases, so that it can be built in a better way and ultimately save you a lot of time later, as your requirements change.
Yesterday I managed to slow down TypeScript by 10x when I typed some generics.
It's yet to be determined what caused it, but seriously, I should not be able to do that.
I just want to say that
@dan_abramov
is a genius. He says "we made this experimental, unstable hooks feature, that you shouldn't use in production yet and not rewrite classes" and all we hear is: "this is soo good, I am going to rewrite everything with hooks starting right now".
My team at Tesla is hiring QA Engineer. We started building E2E Test suite using
@playwrightweb
and there is so much work ahead.
You will have a direct impact on stability of manufacturing.
Location is limited to Fremont.
My DMs are open for questions.
My learnings about making a presentation:
1. Define your objectives (not more more than 1-2)
2. Don't start with slides, start with a story.
3. Fit your story into a structure. Intro->Plan->Body->Conclusion
4. Make the slides, which add value, don't repeat what you are saying.
The best thing I ever learned from other people is not information. It is their way of thinking, their perception of reality, their relation with the outside world. I think my world has improved a lot over the years thanks to
@dan_abramov
@markdalgleish
@ken_wheeler
@kentcdodds