Profile picture
Mariko Kosaka @kosamari
, 3 tweets, 2 min read Read on Twitter
I'm writing a 4 part drawsplainer on how browser works🎉

No CompSci degree necessary, if you've written HTML/CSS/JS, that's all you need✨ (the post starts w/ what is CPU💁‍♀️)

📣Part 1 is about hardware, multi-process architecture, and Site Isolation!
developers.google.com/web/updates/20… hand drawn CPUbrowser architecture
Part 2 is out✨
This one is about navigation, little bit about how service worker plays in and why `Navigation Preload` is !important🚨

(Next week I got a post on rendering and a post handling input that DEEPLY related to our frontend code stay tuned🎸)
Huge thanks to @slightlylate for (really all of posts I'm writing but especially) this one 🙏

"should I draw main thread in front or worker thread, who talk to them and how?" is the kind of nonsense question he has been subjected to.
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Mariko Kosaka
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

More from @kosamari see all

Profile picture
Things I recommend for submitting talk idea:

0️⃣You should tell people that you are "interested in speaking about [fill in your interest] " this can be friends, coworkers, person who sit next to at meetup etc. Can not stress how many opportunity came up because I stated interest
1️⃣(w/ people who are in your field, like JavaScript or WebDev) bounce ideas like... "I was thinking of doing X"

Those conversation usually yield to "would be cool if you can~" or "I wanted to know~" now you have more things to address in proposal other than "I really like X"
2️⃣Now you found a topic that seems other people would be interested in. Often scope is larger than what can fit in 30min talk, think about which one you want to spend more time.

Then write proposal. Check what info they ask you & if there is word limit on submission form.
Read 11 tweets

Related threads

Profile picture
I've been learning Vue.js lately, in an attempt to find out what advantages the React/Vue/Elm style of JS frameworks have. From an end user perspective it's minimal advantage at all, and even some disadvantages. Where I see the benefits is in developer productivity.
I've become completely against the previous generation of web frameworks I'm calling "Yet Another Fucking File Framework", where to get anything done you have to keep open sometimes 4-10 different files. There's no reason for this, but it became the style as a reaction to PHP.
For example, if I want to create a new part of a django application, I'm consistently opening about 6 .py files, 2-3 .html files, multiple .js files, and probably modifying a couple .css files. Then, on every change I have to do an onerous reload/refresh/test cycle.
Read 18 tweets
Profile picture
One of the best gift I have ever had on my birthday. This is really nice when you get a gift from your mentee, the gift explaining the topic on which you mentored on.
Explaining the box model (the most important topics on HTML, CSS) just by wrapping the gift in different layers.
Thank you so much @kml_1326. Here chocolate box is the real content. The immediate yellow box before the chocolate box contains the padding area and the border. The blue box represents the margin outside border. The big yellow box is the bigger area in which the box is placed.
#altcampus #HTML #CSS #180daystojob
Read 3 tweets
Profile picture
Here is my lovely website! csclub.co #madewithbulma
My needs are simple while choosing #CSS framework:
No #JavaSript because I don't mind writing in #JS for the things I need.
I came across Skeleton (getskeleton.com) when I was looking for CSS #Framework, which was not included JS.
I used to like #Skeleton by @dhg, it's true that it is dead simple #responsive #boilerplate. Skeleton is truly #mobile-first. Not only in terms of mobile web experience but also the code is written in CSS.
Read 5 tweets
Profile picture
I unfortunately have some @GCPcloud NEXT prep to do, so I need to duck out halfway through the next block of talks :/ livetweets will cut out halfway but I want to signal-boost as much of @eanakashima and @rachelmyers's talk on accidental distributed systems as I can. #QConNYC
@GCPcloud @eanakashima @rachelmyers They used to work together at GitHub and ModCloth. "So a cloud vendor and tool vendor walk onto a stage..." but they're not selling anything, they're talking about their worst work problems. #QConNYC
Turn the clocks back to 2012 at ModCloth. They were running a rails app with a mysql backend. More engineers writing more code, but deploying only once a week on Friday... more code going out every week and deployers less familiar with the code. #QConNYC
Read 31 tweets
Profile picture
Separating concerns by files is as effective as separating school friendships by desks. Concerns are “separated” when there is no coupling: changing A wouldn’t break B. Increasing the distance without addressing the coupling only makes it easier to add bugs.
That’s not to say that separating things into files isn’t helpful. It lets you choose an appropriate balance between the granularity of navigation and the frequency of context switching. But your file structure has nothing to do with decreasing coupling, or separating concerns.
A rigid file structure may help introduce some desired inertia to prevent stronger coupling. If there’s a distance between A and B, it’s harder to couple them clearly. However, a future problem *might* require more coupling! Since it’s made difficult, it’s just done poorly.
Read 14 tweets
Profile picture
R3D001: Statrted @udacity Front End NanoDegree (FEND) yesterday. #100DaysOfCode #GrowWithGoogle #udacity
R3D002: Cruising through HTML and CSS, filling in gaps. #100DaysOfCode #GrowWithGoogle
R3D003: Re-doing Animal Trading Card (HTML/CSS) in @udacity Front End Nanodegree #100DaysofCode #GrowWithGoogle
Read 123 tweets

Trending hashtags

#FrontEndNanodegree #TFX #ClintonEmails #5MSuppressedVoters #GiveAShytParty #TheCitizenMajority #TrustNoGOP #GOPutridity #MurderPlot #WhiteSheetsAndHoods #WordPress #IGDAwritingsig #GreedyOppressivePhucquerz #MSDProud #RecencyEffect #MediaPolitics #DemocracyDies4Ever #KKKorruptKKKompromisedKKKriminal #Cheat2Win #KavaNO #GrabbersOf #GOPWmPutinCoupGovt45 #VBScript #Russia #Tensor2Tensor

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member and get exclusive features!

Premium member ($3.00/month or $30.00/year)

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!