“i came to this country with nothing but 10$ in my pocket”
bro, i had to submit 6 months bank statements to show i have sufficient funds for a 2 day visit on tourist visa
wip → ready
Super freaking excited to share the browser devtools built for
@tailwindcss
01 attach on top of your existing workflow
02 understands your theme
03 instant visual feedback
04 saves changes back to your code
✌️
CSS tip!
If you are adding border-radius on a container, don't forget to add overflow: hidden, otherwise content (especially images) can bleed out of the container
I'm working on something that would be a really interesting open source tool
If you use React + Tailwind at work and are up for sponsoring the project (via github sponsors) for early access, DM me!
here's a sneak:
something I learned from
@JoshWComeau
:
be careful how you adopt upcoming css features! even if one selector in a rule isn't supported, the entire rule is ignored!
i picked up a
@github
trick: if you use lists, github will render the title of the issue/ pull request you referenced!
works for external repos as well ✨
🔥 learned about a new css property today! you can 'pause' a css animation
animation-play-state: paused | running
here's a sandbox if you want to play around:
my favorite debugging method is to aggressively delete code till the bug goes away
and then sloooowly add things back to find the culprit
60% of the time, it works every time
🔥 Design tip for developers
- transition duration should be based on how big the change is. smaller changes should be faster (size + distance)
- exit animations should be faster than entry (quickly get out the way when done)
📢 New project alert!
I'm working on a course about making React applications interactive 🌟 with animations, drag and drop, keyboard navigation and more
I hope you all are as excited about it as me!
💌➡️ Learn more + signup:
sound on 🔊
🔥 design tip for developers
how do you signal to the reader there's more stuff they can horizontal scroll to?
create a "scroll hint" by tucking in contents + add a blurred edge (or shadow) to really sell it
🔥 tip: you can set shortcuts right into the URL bar in chrome
Here's a demo
"notes" opens a specific folder in
@notionHQ
for me
Instructions in thread ⬇️
📺Here's the new
@reactjs
lazy API in 60 seconds
This is how you can implement Code-Splitting with Suspense
Turn on audio and open in full screen!
HD version if twitter messes up the resolution:
🔥 Design tip for developers
To create a set of colors for yourself, start with a generative tool like scale by
@hihayk
and decide colors for just 2 components - Button and Alert
example:
🔥 Design for performance
If you have to use a custom webfont, try to use space and color to create hierarchy instead of font weight.
Fewer font weights mean fewer/smaller font files to fetch.
my advice for building complex components is to build it twice
first time is just to find all the composition quirks, awkward API, accessibility story, keyboard navigation, unnecessary rerenders etc.
second time to actually build it well
just set up the first email for my course on Interactive React applications :)
It's a Framer Motion mini-course for free, as an introduction to both framer motion and your instructor :)
.
Super excited to announce the first React conference of 2019: tinyconf!🐣
- small group + meaningful conversations 💁
- 8 short talks + just 25 attendees 🙋♀️🙋♂️
- plenty of time for discussions and follow-up conversations 🙌
Jan 5 in Bangalore 🇮🇳
1/4
It's done!
we've made the
@codesandbox
editor cleaner, sharper, get out of the way so you can work on the code-er
It's a release of about 12948942 tiny things to improve the editor experience 😬
hat tip to
@NikkitaFTW
,
@druchtie
and me!
read more:
Something I learned from
@a_sandrina_p
's workshop last week
Never skip alt text for images. If the image is purely decorative, pass an empty string instead of skipping the tag altogether
I'm working on an online React course, a course y'all!
Learn React while building a game, coz learning theory is booooooring
watch a preview and signup here 👉 …
#learn
#react
#game
#not
-boring
My top three debugging tips:
- Leave your computer and go for a walk
- Ponder about why you are debugging
- Think about all the mistakes you've made in your life to end up here
Well,
@reactjs
hooks didn't launch yet.. but I can't wait to show what I'm working on 😄
🔥 Learn React Hooks while building a game! 🔥
watch preview below and drop your email for a free lesson + discount when it launches
🌐 🌐
Me, when giving advice to others: Don't fall for perfectionism, ship something simple first, get feedback and iterate on it.
Me, for my own projects: This needs to be perfect before a single human sees it otherwise it's not worth doing
in 2019, i visited amsterdam with my partner to give a talk
after the conference, we spent a few days in the city and decided to move here 😇
i was back on the same stage 3 years later as a local! life’s wild y’all!
For folks not at
@ReactAmsterdam
,
I got you fomo fam
I collected all the timestamps for talks so that you don't have to search for them in the livestream ⏪⏩
Link: …
👆
To devs who are feeling they don't know enough
relax, you can't master a technology over the weekend
it takes time and practice
take a small chunk. see how it works, try to use it, then some more
you don't have to rush it, quality trumps quantity every time
🔥 React tip
You can use good old function with a name with useEffect to label what the effect does
especially useful when an effect is not immediately obvious, pair it with a comment explaining why and you're golden
Seems like as good a time as any.
I’ve been rejected from:
- twilio
- twitter
- stripe
- Apollo
- microsoft
- Netflix (didn’t see that one coming, did you)
here are some unedited thoughts on how/why i dont work too many hours anymore
recorded impromptu
@mpjme
style while walking to the coffee house, sorry for the audio and awkwardness!
here’s something i’ve had to unlearn -
when i was junior dev, there was a popular developer/educator who said the role of a senior dev is to prevent complexity in the codebase by simplifying use cases
so i took that to heart when i first transitioned into a senior role...
Our Person of the Week is a front-end developer working on Design Systems at GitHub and building tools to ease the lives of fellow developers. Drumrolls, please, for... Siddharth Kshetrapal!
Thank you for everything you do for the community,
@siddharthkp
!
#smashingcommunity
as a junior, this is what i hope i had heard instead:
the role of a senior dev isn’t to avoid complexity, it’s to absorb complexity with abstractions that keep the codebase readable and maintainable.
“A modular scale, like a musical scale, is a prearranged set of harmonious proportions.”
— Robert Bringhurst, The Elements of Typographic Style
Further reading:
just realised the last time i was promoted was in 2015 😳
i’ve been moving (and growing?) into roles and companies laterally ever since
idk if there’s a lesson here but 7 years without a promotion, you’d think my career is dead 🙃
Whoa! It's an honour just to be nominated for
@ReactAmsterdam
's open source awards
bundlesize is one of the impactful contributions to the community, their words, not mine 😋