In February, Nick Taylor and I kicked off another great month of Twitch streams. This is a round up of all the wonderful guests who joined us.
Pair Programming with Dann Ott
Dann Ott joined us to work on an open front-end issue.
`gap` doesn't work with `flex` on Safari
#12452
Describe the bug
I've been living thinking that gap (as well as grid-gap) works perfectly fine with flex elements. Today I learned it's not supported in Safari which means there's a missing whitespace in Safari which I have already confirmed testing few views.
That means we have to fix all instances of a combination of two utility classes flex with gap-* in our views (.html.erb, .js, .jsx) AND also all instances of similar situation but in our SCSS files...
Yes, gap does work with grid but we should not simply replace every flex instance with grid because grid is for layout and flex is for components.
So in most cases we will have to remove gap property and replace it with additional margin on child elements...
To Reproduce
Test our site in Safari.
Desktop (please complete the following information):
- Browser: Safari.
Smartphone (please complete the following information):
- Browser: Safari
This bug occurred in Safari whenever we used the gap property on DEV.
We also talked about when to use CSS Grid, Flex-box and other alternatives.
Places to Follow Dan
Personal website:
https://www.dtott.com/
Twitter:
https://twitter.com/danieltott
Virtual Coffee:
https://virtualcoffee.io/
Cleveland React:
https://clereact.dev/
Introducing Suzanne and Katie
We introduced and talked to our coworkers Katie Davis and Suzanne Aitchison.
We discussed a11y, JavaScript, developer tooling, working at Forem and more.
Places to follow Suzanne
Twitter:
https://twitter.com/s_aitchison
DEV:
https://dev.to/s_aitchison
Up Your A11y:
https://www.upyoura11y.com/
Pair Programming with Jono Yeong
We were joined by Jono Yeong to work on a markdown bug that appears in article titles.
Certain characters, like angle brackets, show up incorrectly in some article previews
#2204
Describe the bug
When viewing the /comments view of an article, the first line and a half or so of the article is displayed. If that first bit contains inline code with angle brackets, e.g. if you wrote:
this is an article about `<span>` tags
this appears in the article preview as: "this is an article about <span> tags".
To Reproduce Steps to reproduce the behavior:
- Go to 'https://dev.to/new'.
- Enter minimal front matter, set `published: true, and enter:
this is an article about `<span>` tags
- Save the article.
- Navigate to {article URL}/comments.
- Observe the
<span>in the preview text.
Expected behavior
I expect the preview to say "This is an article about <span> tags"
Screenshots
Example from: https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i/comments
Desktop (please complete the following information):
- OS: macOS Mojave 10.14.3
- Browser: Chrome 72.0.3626.121, Opera 58.0.3135.107
Places to Follow Jono
Twitter:
https://twitter.com/JonoYeong
Jonathan Yeong's Blog:
https://www.jonathanyeong.com/
DEV profile:
https://dev.to/jonoyeong
Youtube Channel:
https://www.youtube.com/channel/UClb6km0HLkGUOEjHlp5WdPA
Newsletter:
https://newsletter.jonathanyeong.com/
Walkthrough Wednesday with Todd Libby🦞
We were joined by Todd Libby to talk about a11y, web standards, lobster rolls 🦞 and more.
Place to Follow Todd
Personal Site:
https://toddl.dev/
Twitter:
https://twitter.com/toddlibby
Twitch:
https://twitch.tv/toddlibby
Front End Nerdery Podcast:
https://anchor.fm/frontendnerdery
Front End Nerdery Podcast channel: https://www.youtube.com/channel/UCng3HUrp-Dzu92iA_Zbhh3Q
Newsletter:
https://buttondown.email/colabottles
LinkedIn:
https://linkedin.com/in/todd-libby
Thanks to all our viewers who joined the streams and chatted with us this month!
Be sure to follow the ThePracticalDev Twitch channel to check out all the great guests we have joining us every Wednesday this month.
Top comments (3)
Just followed! I didn't know DEV had a Twitch channel 😊
Noice!