Author of the CSS Grid in IE series on CSS Tricks. Multi award winning front end web developer. Avid contributor to the open source community.
Australian Capital Territory
Joined November 2010
- Tweets2.4K
- Following94
- Followers264
- Likes1.9K
Pinned Tweet
I wrote a whole series on CSS Tricks explaining exactly how to use CSS Grid in a way that will not break IE, and best of all, NO FALLBACK STYLES!
The modern grid code you write in your source code will work perfectly in IE with the help of @Autoprefixer.
css-tricks.com/css-grid-in-i…
I have been working with #zustand lately and really like the simple global state management that it provides.
At the same time, updating the state required a lot of repetitive boilerplate, so I made this:
dan503.github.io/zustand-cre…
🪩 This utility library deserves highlighting.
📊 Massive performance and file size improvements compared to lodash. You can tell the creators have put a huge amount of effort into creating it.
Less than 5k weekly downloads on npm. Give it some love.
es-toolkit.slash.page/
The bundle size is insanely small.
When importing 2 functions, my import cost plugin is telling me it is only 647 bytes or 385 bytes when G-zipped.
The more functions you import the larger the file size that gets reported.
ALT graph showing that es-toolkit has an extremely smaller file size than lodash-es
I learned something new about TS today:
```ts
enum TypeName {
A,
B,
C,
}
TypeName.A // 0
TypeName.B // 1
TypeName.A // 2
```
TS enum auto increments a numerical value for you by default!
Dan Tonon retweeted
I also need to give a _huge_ shoutout to @Daniel_Tonon !
I asked publicly for feedback on the main draft, and Dan did an _amazing_ job of reviewing the _entire_ tutorial and giving detailed feedback!
The final version is significantly better because of his help.
THANK YOU!
I've begun my delve into learning the mystical arts of back end coding.
I just earned the Foundational C# certification with Microsoft and @freeCodeCamp
freecodecamp.org/certificati…
Such an incredible year for web developers. In this one year, we got access to these amazing features:
- Native CSS nesting
- container queries
- :has() (parent) selector
- subgrid
As well as many more!
developer.chrome.com/blog/cs…
We finally have a way to tell when a scroll event has completed! 🥳
It has pretty good browser support (not Safari ☹️) and it is really robust in it's implementation.
developer.chrome.com/blog/sc…
We finally have a way to tell when a scroll event has completed! 🥳
It has pretty good browser support (not Safari ☹️) and it is really robust in it's implementation.
developer.chrome.com/blog/sc…
There is one extra dark pattern I noticed. Companies intentionally make the buttons they don't want you to click have inaccessible colour contrast while the buttons they do want clicked have great contrast.
pudding.cool/2023/05/dark-pa…
My first ever container query just got merged into the master branch of a client project 🥳
This makes me so happy 😁
I'm a huge Cypress fan but can't stand how it handles promises. Seeing this, I'll give Playwright a try next time 🙂
I’m a big Cypress fan, so I’m shocked to say this: I just switched to @playwrightweb.
Here are 16 reasons I switched:
1. WAY Faster. ~2X faster with 1 core. ~6x faster with multiple cores (uses multiple workers)
2. Tests multiple browsers in parallel.
1/5
Comparison:👇
How to tell that the person you are talking to online is a robot 🤣
ALT The girl asks if there is anything I can't live without. I respond "100101101". She responds "sorry but I'm not ready to give my private info here. I'll give it when I'll know you better"
OMG! Container queries are actually a real thing that exist in a real browser now!!!
This Post is from an account that no longer exists. Learn more
This is a pretty handy little flow chart actually 😄
How to choose between radios, drop-downs, checkboxes or toggles? Runi Goswami has got your back, with a flowchart for better form design decision making.
medium.com/tap-to-dismiss/a-… #ux
Instead of !important, you could use .className.className to increase the specificity without going nuclear.
Or you can use Michaels awesome idea and use .className[class] to get the same level of specificity without the repetition and without it looking like a mistake! 😃
