Musings of a .NET Developer, CTO and Tech Enthusiast

a 5 minute guide to css animations

If you are looking to add a splash of design to your existing websites, then CSS animations are a simple and quick way to do so, and they have a few benefits over the traditional use of JavaScript animations. For one, and the most important I think, you don't have to worry about math and geometry as the browser will take care of that for you. Many are put off by adding animations because for sure they are not simple. Even just sliding a text paragraph into focus on page load can be a bit tricky in the traditional JavaScript way. You'll have to worry about managing timers and setting coordinates yourself with plenty more room for error. Whereas with Animations, it is just a few style rules away.

. . .
Read more
a 5 minute guide to css transitions

CSS transitions have been out for a bit now, but many websites still don't make full use of them, unfortunately. And they should, as they provide a clean mechanism for creating smoother animations and better-looking sites. This works in guiding users and giving them subtle queues on how a site works. Fading out an element for example. Or moving an item on a certain action. All important queues. And also, they just look nice. It gives a website a more fluid feel overall.

. . .
Read more
the loading icon

The little guy that helps us decide whether we should click again, or wait it out for another 2 minutes. It's a love hate relationship with me and the loading icon. I love seeing it on a website. But I hate adding it on a website and I'm not sure why. No, scratch that. I know exactly why I hate adding it.

. . .
Read more
a quick 5 minute guide to css media queries

CSS3 Media Queries are one of the best things to happen to front-end development since that terrible blink tag was deprecated eons ago and it stopped working on MySpace backgrounds. Media queries are expressions that limit the scope of styled elements depending on media features like width and height and resolution. In other words depending on the type of output device, screen width, screen height you can render specifically targeted CSS rules to your elements.

. . .
Read more
working with css3 flexbox

FlexBox, or Flexible Box, is a CCS3 layout mode that arranges the elements in a way that they behave predictably when the page changes to accommodate varying screen sizes. With the web going responsive, it's definitely nice to see new standards appearing to aid developers in that. It does not rely on floats and some might find it easier to use than the more traditional display modes. The Flexbox layout can alter it's children's width and/or height to best fill what's on the screen. And I'll mention now, that Bootstraps Grid layout model is probably more versatile in this regard, but this is true CSS way to go about the issue. Also the flex layout is still in the Candidate Recommendation stage, so we'll have to use corresponding browser prefixes in order to be more compliant.

. . .
Read more
"sometimes you have to delete, to find your answer"
Copyright © 2018
Score in the top 10 and leave your Instagram handle.
snake left
snake up
snake down
snake right