The Front End Iceberg Explained
Вставка
- Опубліковано 14 жов 2024
- There's so much cursed stuff in this, thank you Lee for making it!
Original Iceberg tweet: / 1707443239630835805
REFERENCES
Event Loop Talk: • What the heck is the e...
JavaScript The Better Parts: • The Better Parts. Doug...
The Problem With Timezones: • The Problem with Time ...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏
Lol, 7 mins in and I’ve realised why zooming is happening in one of my apps. Ffs.
this caused me to almost cry before lol also CORS
Same! Yesterday
I spent a lot of time on figuring this out back in the day! Didn't realise still a problem. I assumed this was in Safari to make old websites more mobile friendly.
As a user, layout shift is the worst. There are few things more annoying than reading an article on mobile and an ad shifts the content and you lose your place. Worst yet is when you wan to click something on the page, then an ad causes a content shift at the precise moment you're clicking/tapping and you accidentally click on the ad. This happens all the time on those stupid click-baity quiz sites you visit whilst on the crapper. I'm convinced this is very much an intentional behaviour.
agree 100%, happens on ebay website when the top ad banner loads. It is at this precise moment that I click somewhere and end up being redirected some place else and have to go back...
Create 100 libraries to make your life easier, then create another 100 libraries to fix the problems those other libraries created and on and on it goes until you've created a whole bunch of technical debt and garbage that's not manageable by anyone except you.
We call that job security 😂
e̶x̶c̶e̶p̶t̶ y̶o̶u̶ *,not even you yourself
If I told you I remember what I wrote yesterday, then I'm lying.
Hear! Hear!
Yup...
This is so good. As a full stack person, I absolutely love the front end. It always feels so odd to me when people (engineers or other) think the back end is where the problem solving lives and front end is just putting a UI together because, down deep, I understand all of this stuff from the iceberg exists and is the way it is. And while my 1s are in the chat with everyone else's for things I've been hurt by, I love the front end for it! Thanks for going through this! There's so much more to the front end than the surface level.
On the server, I work with the complexity I create; most of the time it's just querying databases, sometimes it's cron-jobs, migrations, etc. Integrations with other APIs break this rule. But still, compared to this, client code is wild and unpredictable. I have to deal with browsers, security, cache persistence, navigation state, isomorphic runs, SEO, CORS, and a whole bunch of other things that are more than happy to f*ck my site completely if I don't acknowledge them.
"engineer" lol we just code
I recently discovered ~~ as a form of casting to integer that can coerce undefined to 0. This has the benefit compared to "|| 0" that it doesn't require brackets when used within a more complex expression. Having discovered it, I then didn't use it because I wanted other people to be able to understand my code.
xD
Goog video! Makes me feel much better as a complete beginner to see that most of the stuff i struggle with is actually not that easy even for seasoned frontend programmers. Gotta keep learning! :D
I’m kinda relieved to see calendars, dates, and time zones are hard for many. I built my own calendly functionality for my web app this weekend, and it was HARD. But I was happy when it would work well even considering the upcoming DST here in Europe next week 🎉
any resources that you would like to share? I'm in a great need
@@kdot78 I think it would depend on specifically what kind of need you have (and I’m by no means an expert).
With that said I now work a lot with dayjs (not using JavaScript dates at all), and with dayjs you have modules like timezone, utc, etc. that help you to manage the different times.
One thing that is especially tricky is when you work on local dev and then deploy your app… I saw that while working on localhost the “server side” time seems to be on my local computer timezone, versus real server side time once you deploy your app is in UTC, so keep that in mind if you see that somehow when you deploy you have some unexpected behavior…
Does this help? What kind of issues are you facing?
feels like a therapy session seeing all the 1's in chat
Mobile full height has been fixed and it's not related to min-content or fill-available. It's 100svh, 100dvh and 100lvh
Right? I'm assuming there's a nuanced reason he didn't mention these as they're pretty well known, but was basically yelling that at my phone lol
Props to @Kevin Powell for introducing me to them.
17:41 Jake Archibald's 2018 «The Event Loop» talks are more up to date and include promise coverage.
dates/timezone is nightmare, especially if you are working on logistic bussiness
OMFG i have been spending 5 days on responsiveness and I want to hug you so hard for saying this. I legit have been crying, not understanding what I am doing wrong. Thank you for helping me not feel like a failure.
the problem with stuff like localization and websockets is that if you didn't include them in the original designing then you pretty much have to touch *everything* in your project to accomodate for them
I didn't even notice that the video was 52 minutes long. Excellent video!
Regarding time zones, I had a job in Australia that involved dispatching people to locations at certain times. The service was based in Gold Coast in the south of Queensland on the border with New South Wales. These two states have different times zones at different times of year (QLD doesn't use daylight savings, but NSW does). The issue was dispatching someone in Gold Coast (QLD) to Tweed Heads (NSW) and figuring out when to send a 30-minute reminder notification - are they in Queensland, or already in New South Wales? The Google location information had the zone for the destination, which helped, but man - nightmare city. Not fun. I had it all figured out, then as the launch approached, Covid hit and made the business no longer viable and the project was never launched. Man, nothing more demoralizing than that.
There is a distinct pleasure when someone shares your pain. Ahhh...so good. Thank you, Theo.
I don't want my 52 minutes back. Worth every second.
I feel like CORS is more trouble than it’s worth. I understand if you want to use it to block other sites from using your services (without a proxy) or mitigate with CSRF that’s good, but if you trick a user into going to a website you control CORS isn’t going to help with much.
I dread the day when some random state in the USA decides to abolish or change their daylight saving rules because it could break a lot of our apps at my job and updating them is nearly impossible as most of them are running on old version of php and updating the timezones database for it seems impossible for older versions of php unless you literally compile php yourself which I have no idea how to do lmao.
upgrading php is impossible as php is not backward compatible.
No, the font-size issue is you should not be using pixels, because then only zooming the page will change the font size.
For the "0 results found" I once got just one result, which was source code from Firefox where the error was thrown 😄
thank god I mainly do backend. I have no idea why frontend is considered 'easier'.
Might be easier for very simple web pages but that's about it. And it definitely isn't easy to make performant while also handling all the weird edge-cases and compatibilities between standards and implementations.
The biggest pain my existence right now is.
- No service-worker tests or even using the clients crypo lib without a "valid", "signed" SSL - Certificate. Good luck getting this to run on a local dev-server.
Seriously who thought that binding the generation of a simple SHA256 Hash to having a valid none self signed SSL-Cert was a good idea.
I had to setup separate print media queries once for a work project, and yes, it was a pain. I ended up having to not only make the separate print media query because they used SCSS files, but also had to make some script to make it all work. The script wasn’t crazy complicated, but it was weird to figure out. I ended up getting it to work, but it sometimes had to be updated when another dev made updates and didn’t think to check the print media version… it was a nightmare.
Idk if this helps at all but what I do to deal with time zones is the no matter what project I’m working on all dates are to be set in UTC. And then on the front end I send the ISO date time string with the UTC format and let the device handle translating the time to its timezone. This method probably has issues with a lot of use cases but it’s served me well for the kind of front end work I do. Also setting dates is the same if I’m collecting dates: collect in user’s timezone, ask JS to give me the UTC time and send that to the backend. And do a check if the timezone is included with forcing ISO format.
I always think that I am a avg developer but as a backend dev I touched almost all of these items one way or another.
Some other things for the bottom of the iceberg: Unity support in Safari, Blurry images because of css transform
Give it a couple years, they'll add antialiasing and sharpen/blur to CSS, then you can fix those problems.
As a mostly backend dev, I've never thought frontend was easy. I have thought that frontend was annoying and complex (for the wrong reasons) because the languages and tools were either poorly constrained (looking at you JS), or offered very leaky abstractions (all the web frameworks). Instead of just getting work done, you negotiate idiosyncrasies and permanent browser bugs, write shims and work-arounds, deal with an unending stream of edge cases, while maintaining deep knowledge of how combinations of technical decisions create esoteric yet catastrophic vulnerabilities that expose your users to malicious actors.
I'll escape my SQL strings and stick to the database and networking stuff where the list of apocalyptic shit you might accidentally step in is much smaller.
Debugging a Tesseract error that only occurred when deployed to Lambda function has been my only "No Results Found" issue so far. Praying it stays that way 🤞
Tomorrow imma need to write an app using SSR for the first time, and i can already see hydration will be a problem...
I'm currently on "rewrite it in rust" stage. Feelin' pretty good rn.
Dealing with numbers in JS is hellish too, because of the lack of proper decimal types
1, CORS has definitely hurt me, especially when I was first learning about it.
The problem here is that you've described a million (ok not quite) issues a front-end dev must think about, whilst in the your previous video (re: htmx) you were bemoaning about having (server) walls impeding developer speed. Yes a dev can do and think about all, but there's trade-offs.
i ain't watching all that
i'm happy for u tho
or i'm sorry that happened
(joke ofc, also this is a reference)
I'll never forget the time a bug appeared out of nowhere in March, and after hours of debugging, the cause was Daylight Savings Time. Fuck dates.
Huawei Mobile Service support deserves a spot in the bottom rows, I dealt with it a couple of years ago and it was such a pain
I can't tell if it's a good or bad thing that I knew about almost everything on the iceberg.
Literally less than a minute in and I learn that the `` tag is for italics, not icons. This does not bode well.
As a noob , this was like watching lion attach videos before starting a job a game ranger 😅it's good to know the risks right guys?
lion attach videos
MJML was workable solve for email layout. React Email looks very cool.
Awesome video. I remember when I worked at Tesla they had the some localization kind of thing where everything had to be done with a localization team.
as a european, i apologize for cookie banners... we hate them too.
I just realized. Chrome has built-in Google Translate for every page. Why didn't they already push the built-in localication API? Like, imagine if browser helped you with changing strings depending on localization, and then Google could use that exact API to also add their translation in case the desired language is missing. As a person that has to deal with content from different languages and seen a lot of UIs that got broken because of Google Translate trying to inject their text, and suffering from websites' own implementation of language picker that doesn't work or changes language from English to my PC's language automatically without me wanting it, that would've been lifechanging.
line wrapping exists in css, you have to clamp precising the number of line and you have to play with the length of the line too, its not that hard but you have to look for it.
Did a half-measure WYSIWYG a bit back exactly becasue of how ridiculous back and forth is; markdown will show the ligatures but also be wrapped in the styling it represents so back and forth isnt overly complicated from being abel to just strip it and then a second pass for final render when that's needed. The real problem is how insanely ridiculous working with editable html is XD
editable HTML sucks and I just gave up with trying to create my own WYSIWYG editor.
For my personal use, I just have split editor, left side being the raw editor, and right side being preview.
@@muhwyndham Definitely a far easier way of doing it for sure! Especially if you allow a simple text area then it's pretty much free haha
oh god writing a website in rust sucks SO MUCH! im talking about web frameworks in rust. They barely work half the time. I cant even “cargo new” a project that will use a web framework without it breaking. THE COMPILE TIME ERRORS OF THESE “FRAMEWORKS” ARE SO INSANELY STUPID-
floats should have been put in the right column because it never ends up where you want it to.
The more I learn about the JavaScript front end world, the more I feel like sticking to python + htmx.
Bruh, I feel the same 😂😂
htmx is hype stack.
Ye, I feel like this stack is very nice.
The only thing I would change is python by golang if I need performance improvements
Better to code a front end in c++
Contentful makes localization pretty simple IMO
Well, the backend is hard because there are real technological issues to be handled. The frontend is hard mostly because of broken standards.
I was required to figure out and fix an issue that revolved around @media print. The overtime for a week straight was ridiculous. I hope I never have to touch this sh!t again...
Anyone putting unit tests at the same level as responsive is either a backend doing frontend or a full stack struggling with a design.
Crying about new features without recommending an alternative has a name which I will not say.
Yeah, it's called "protesting the system," and it's a damn important job. "This tool sucks, but it's also the best we have" is an entirely valid take. Regex is pretty bad, but what's your alternative? Hand-roll a search function in JS that splits an entire file into an array of characters, searches through that array for a match, append/prepend/replace that match with your substitution, then join the entire thing back together? That's going to be worse in every way: it's going to be slower to write, be worse DX, and have hilariously bad performance. Or are you going to hand-roll the search function in WASM? At least you'd fix the perf, but now it's unreadable and it took you three weeks to do. Or you could compile the awk source to WASM via emscripten, but now you're loading literal megabytes of pure code along with your website and you're _still_ stuck with regex, now flavored in red, blue, _and_ green!
Cookie banners are actually tracking banners, but everyone calls them cookie banners.
Hey, even native mobile apps still has problem with 100% height. Last year I still has to calculate my own viewport by getting the screen size, getting the size of the navigation, bar, getting the size of status bar, getting the size of parent's element like bottom sheet, and only then I can calculate the size of viewable height I can work with.
Web Dev were not the only ones lol
Isn't there a unit called svh that does that work for u?
@@AbiShrestha its a lie
You'd hate my phone, then. Motorola does this great thing where you can replace the nav bar with gesture controls performed in the area the nav bar _was_ in, so I have no nav bar right now. As a user, I love it; as a developer, I'd probably hate it SO much. Mostly because I'd have to support both ways, and the nav bar isn't _gone,_ it's just much thinner and invisible now (except for the 12 pixel bar that exists there to prove that the nav bar still exists, because as a user I demand that everything that does exist be visible on my screen).
@@mage3690 it's the very reason that I always have to calculate my available viewport on the fly.
No one knows whether the navbar would actually there or not so I better just find the edges of UI element and find my way around it.
And Theo still believes that work as a Fullstack is possible.
I've just build a few web apps for my portfolio and have already encountered 80% of mentioned problems...
You can't convince me that Theo isn't saying "Peace, nerds!" at the end.
closures are not the behaviour of most languages, in fact it's the other way round.
"I don't want to think about what happens when I press Command P" - simple, switch away from the horrors of MacOS.
Why does Twitch login not support a hardened Firefox browser with DRM enabled
and session cookie transfer is needed to login?
I have to do IE support because of a large target organization has tons of old hard/software in use and also because of a major target segment of older people with their trusty machines. Not their fault, no-one's fault really. Just a thing.
What this iceberg neglected was , which if thought of as an actual supported thing in relation to a client being able to do business with their customers... Well.
Dates are even worse than they look. It goes all the way down to ntpd. Google ntp leap smearing if you want to go down a rabbit hole you didn't know existed.
Lol, wait till you see the size of the backend iceberg!
Blazor - uses wasm, as an alternative to react
I'm starting to think I've spent my career running before I learnt to walk, as I feel far more comfortable with the deeper topics than many of those in the first few layers 😂
9:45 I personally dont think this is hard. NaN - not a number, undefined - doesnt exist, null - exists but has no value
omg i also watched the the eu conf event loop video so many times and made all my friends watch it.
I would say that responsive will get a bit easier with container queries and @scope, you won't have a reason to create a breakpoints with repeating code
I find it interesting that some of the things you're complaining about (like OAuth) are one of the easier things in my experience. Maybe using heavy frameworks and abstractions isn't the way?
Had to laugh when I saw regex down near the bottom. It's not that I disagree, more like that nerve is dead. Great episode!
imma cry, oauth2 was soooo high up. it took me so long to do that in unity using a weird janky hackaround. guess it really is hard, i thought i was just stupid. turns out its both!
I love Next, but its Image component is a nightmare to use.
the silence-trimming cuts are so abrupt and jittery
I hate dates and calendars. I ended up using input of type date (I did not know it existed). I wish they would have created it in the same way as tables, where you could use (or not use) and style different elements like thead trow the way you want.
Moral of the story: use input of type date and for dates always use the ISO standard.
26:30 The memory leak was fixed in nightly.
You know whats fun? typeof null... we're not safe...
Very fun! Looking forward to the backend iceberg
[2,12,11].sort() = [11, 12, 2]
My least favorite "feature" of JS is that the default sort is lexicographical order. Whyyyy?
iirc it’s because you can’t know if the array will only contain numbers (mixed arrays exist), so sorting as if everything is strings is more reasonable??? idk
Drink a shot everytime Theo says ruff.
iceberg memes don't work that way
Yeah they’re about obscurity, not complexity
@@filemot25 exactly and also about eroding the confidence of the viewer making him question his own knowledge of the field
First of all, no, it's a meme, it can literally be whatever you want it to be within the bounds of "I effectively communicated my point." Second of all, I have literally never before seen an iceberg meme where I _didn't_ know a term that was listed in the meme. Heck, I knew half of the bottom row on _this_ meme, and I'm brand new to webdev!
@@mage3690 that's exactly my point. If you know all of the terms it's failed its purpose
Hey. I've been teaching myself the MERN stack for 2 yrs now. The rules I set was a minimum of studying 4hrs a day. I can make basic apps from start to finish.... but being JavaScript is such a high level language I've been debating on learning a lower level language. Am I going out of bounds? I want to be a web dev, but also a general programmer, so I feel I need a low level language in my tool belt. (I want to build tools to help other developers also)
I'm an enthusasist, but money would be nice bonus.
I'm thinking either C, or C++... I know rust is whats hot now, but idk.. I just want to understand it all........ which I think is impossible, but oh well.
any advice would be helpful.
From a learning perspective, you can’t go wrong with C. There’s a reason why so many schools teach C as an introduction to computers + programming, it’s because it’s the most fundamental low level language there is. every other language builds on top of C.
I think rust is something you would learn after C, unless you urgently need to start using rust for a project
Isn't i18n the de facto translation library for JS/TS?
This iceberg makes me feel heard.
Not new but haven’t had to deal with front end much. Just had to setup a proxy for CORS request swapping out headers.
Lost like a week to just deep diving CORS to try to really understand it and where it’s gonna shoot me in the foot.
So imma press a big OL’ 1 for CORS issues.
The deeper we got the more Theo would just skip topics all together 🤣
Why am I not surprised that Accessibility is not mentioned? 🤔😥♿
What do I drop if I don't even know what you're talking about?
it all went to hell when the term "front-end stack" became a thing.
The best thing to come out of AI is "write me some regex".
Responsive layouts are extremely easy nowadays.
Most of your issues with CSS Cascade is because you *also* don't use Web Components and the Shadow DOM. The CSS Cascade works very well with Modular.
31:39 I am excited for that video
Tbh websockets are very low in this iceberg lol, I guess not many people did simple TCP sockets in their networking class because the concept is pretty similar
You forgot CSP! That drives me crazy with JavaScript.
email css is an absolute nightmare but you can make your template in a drag and drop creator joink the code and then dynimcally yeet tge content in... but if you want to change the template its pain once again. Ane i am again at this point and i fucking suffer. What is equally worse if not even more is generating pdfs
Only half way through the video and I'm beginning to get severely nauseous...
9:30 the first bug i ever had to deal with in code - literally the first in my entire career - was a @media print issue.
best date time picker is to just have 3 selects nicely styled for date and 1 input type time
I would like to see Theos opinion on Laravel, especially with and without inertiaJS
may i know how do you see so many funny tweets on twitter? my timeline is kind of boring . could you suggest some similar authors?