TIL
Till I learned compilation
I love tweets, posts and messages starting with «TIL». Mostly because I didn’t know about it myself. I then always bookmark these posts, and thought I could actually make a small overview on Medium of them. :)
Enjoy.
Copy SVG to Figma Tip
A quick Figma tip. If you need an svg logo, just inspect the svg in the inspector, copy the HTML, and past into figma.
Multiple windows in figma
Did you know you can open multiple windows in the desktop client? ⇧ + ⌘ + N (Mac) or ⇧ + Ctrl + N (Win). Handy for working in the same file at different zoom levels or pixel preview settings at the same time.
Smooth scrolling with CSS
Smooth scrolling with zero JavaScript, with just one line of CSS.
Hold down the space bar to move the cursor
How old were you when you discovered the space bar on your phone isn’t just for spaces?!
Autocomplete: one-time-code
When dealing with SMS validation code form, don’t forget to add the autocomplete attribute with the value “one-time-code”. It allows iOS to autofill the input with the incoming SMS
Discover “inputmode”
Now we can “hint” the browser what virtual keyboard we want to show on mobile devices without forcing the browser to change the visuals of the input. (unlike with input=”number” for example)
Node screenshot
In Chrome Dev Tools you can right-click any element to take a screenshot of that element!
Force the download of a file
Want to force the download of a file? Now it’s easy with just HTML ! 💪🏻
:focus-within pseudoclass
`:focus-within` pseudoclass allows to style element that contains a focused element. You can use it to e.g. put more emphasis on a fieldset the user is filling at a certain moment.
Filter: drop-shadow
`box-shadow` doesn’t work well with transparent images. `filter: drop-shadow` does what you’d expect, adding a shadow to the image’s contents.
Lint HTML with CSS
Headers out of order (i.e. h2 before h1, etc.) Result: dotted blue outline
this selector hunts for links that have: — no href — an empty href — a “#” href (button perhaps?)
:empty {} Selector to hide empty paragraphs
Hide empty paragraphs (often created by users within content management systems)
New text-decoration properties
New text-decoration properties you should know about!
- text-decoration-color (with support for reduced opacity)
- text-decoration-style
Scroll-margin-top
TIL scroll-margin-top can be used to prevent anchors from being covered a sticky header
Mobile viewport bug with 100vh
TIL a #CSS trick to handle that annoying mobile viewport bug with `100vh` in WebKit (iOS Safari)!
Safari now supports “enterkeyhint”
I always like it when the enter key gives me more context.
Emoji Favicon
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg. Useful for quick apps when you can’t be bothered to design a favicon!
Emoji Cursor
You can set your cursor to an emoji using an inline SVG in CSS.
Record a video with Shift+Cmd+5
You can record a video with Shift+Cmd+5. I’ve been recording all this time with quicktime.
Move a screenshot area
Today I learned you can move a screenshot area by holding the spacebar.
HTML <mark> tag
Need to emphasize some text by making it appear highlighted? Use the <mark> tag! I’ve always just styled a <span> tag, not realizing this more semantic option existed. HTML5 is filled with all sort of goodies
Copy pathname of files in finder
«I’ve been a macOS user for a very long time and I see myself as someone who knows a lot of the little “hidden” features spread across the system. But I was surprised to learn about this today that I for some reason haven’t seen before. Very useful!»
End.
If you would like to read more from Hinderling Volkart and our team, give us some claps & follow our publication:
https://medium.com/hinderlingvolkart & 👏🏻
