TIL #1
I redesigned my blog. Again.
I’ve been blogging for 8 years so far and boy, this blog has travelled.
- Simple HTML files hosted in a French server (Free) 👵🏼
- Wordpress hosted by 1&1
- Jekyll hosted on Github Pages
- Gatsby hosted on Github Pages
Today, this blog is powered by Hugo and hosted by Netlify. And, of course, even though I played with plenty of cool tools, I didn’t write articles.
Inspired by a popular series of articles in my previous company trouvailles de madmoiZelle, I decided to write an article every month, listing all the discoveries I made. And also some random stuff that makes me laugh online.
Why ?
- Easier to find links on my blog than on my twitter feed
- Keeps me motivated to write
- Helps me improve my english
TIL stands for Things I’ve Learned by the way.
Let’s go !
Front
During the coronavirus confinement, I decided to help the nonprofil Descodeuses as a mentor. I helped women who want to become web developers and it made me do more frontend development than usual, and discover stuff I didn’t know.
IntersectionObserver API provides a way to detect collision of two DOM elements. Its performance is better than having to play with scroll / onResize. Here’s a codepen I played with: https://codepen.io/leiluspocus/pen/oNjExNg.
This demo with Rachelle McAndrews helped me preparing my livecoding about CSS Grids with the members of Descodeuses.
This CSS library can make your HTML document look like a beautiful LateX file https://latex.now.sh/
Some “no-class” CSS frameworks like Water are appearing. Can be useful for MVPs ?
David Walsh made me discover AbortController
Interface to cancel fetch requests in Javascript.
Hugo
As I said earlier, I redesigned my blog using Hugo and I love it. The things I enjoy the most:
- How fast is the local environement !
- Shortcodes you can use in Markdown to integrate tweets, gits, youtube videos…
- How easy you can override the theme
DevTools
I feel like I’m always discovering cool stuff on the Chrome Devtools.
Copy/Paste CSS from the DOM element (Elements panel).
#DevTools Tip ⚡️ Copy and extract all the CSS for an element on the page
— Umar Hansa (@umaar) May 21, 2020
Right click element > Copy > Copy Styles
Useful as styles can often be scattered across many selectors! ⭐️ pic.twitter.com/YHmdxoj9fhView dependencies between requests on Network panel
Tip: In @ChromeDevTools, hold shift while hovering over a request and it will highlight the initiator in green and dependencies in red. pic.twitter.com/Xd9l2BCoC9
— Addy Osmani (@addyosmani) May 13, 2020
Community
Paola made me discover Streamyard, an web app to create livestreams. You can see the result on a meetup with Ladies of Code.
Autres
Yoga With Adrienne Do I really have to introduce her ? I did the “Home” challenge, it helped me get through quarantine. I hope keeping the Yoga pace after confinement.
FlightRadar24 A flight tracker. Pretty impressive during quarantine !
Meanwhile at London Heathrow Airport... pic.twitter.com/yNFtksYEJg
— Flightradar24 (@flightradar24) May 29, 2020
That’s it for May ! Thank you for reading me so far, feel free to share with me your discoveries 🙏