[{"article":"When you need text to stay inside its container, use this. A fantastic explanation of this is on CSS Tricks.","code":"\n\n

\n areallylongunbrokenpiceoftextthathasnobusinessbeingonthewebinthefirstplace\n

","cover":"https://datadatadata.online/file/codebites/cBSWINfaekc2OvEUhB9X","id":"dont-break","tags":["CSS"],"title":"Don't Break"},{"article":"So you want to scrub a CSS @keyframes animation back and forth but there's no CSS property to set the current time.

Breath. Don't try to change the current time, change the animation. Imagine a timeline Daniel San. An animation floats on this timeline. The current time is paused and rests on the timeline. If you change the animation-delay property, the animation moves back and forth but the current time still does not move.

Here's some code:

","code":"\n\n\n

\n\n\n\n","cover":"https://datadatadata.online/file/codebites/XKLEVjs60nDaS6GDJ2xD","id":"scrub-css-keyframes","tags":["CSS"],"title":"Scrub CSS @keyframes"},{"article":"So you want a circular progress bar? You can do it with an SVG <path/>. The trick is getting the path to draw a perfect semicircle from one angle to another. Here's some code:","code":"\n\n\n\n","cover":"https://datadatadata.online/file/codebites/M85tEBT2m3UP8SgNj0RP","id":"circular-progress-bar","tags":["Javascript"],"title":"Circle Progress Bar"}]