Things I've Tagged ‘Web Development’

Page 1 of 1

#CSS, #Design, #Web Development

Micro Trend: Non-Rectangular Headers

I love techniques that allow designers and developers to “break” the boxed in nature of web design in a general sense. As a micro trend, non-rectangular headers have become one of my favorite techniques to accomplish this ask.

So, how do I do this?

Per CSS-Tricks, there are several methods available to accomplish this particular task:

  1. Background images, which appears to be one of the weaker methods
  2. Inline svgs, which can be modified pretty well, and reduce the load on the browser
  3. border-radius, which allows for the more convex circular look
  4. clip-path, which appears to have browser compatibility issues
  5. And my favorite, transform: skew
Stripe Home Page
The Stripe home page using transform: skew.

As mentioned above, my preference in this case is transform: skew, although it introduces extraneous elements to the page–a seemingly forgotten rule is to not do so for presentational purposes–but this can certainly be accomplished with pseudo elements.

The article referenced above uses an extra element in the document to create the effect–which is perfectly reasonable–as does the stripe website.

Stripe’s homepage design uses this method, and even more brilliantly, they include a few children spans (each is a block of color) that get skewed with the parent element, creating a more complex and colorful effect.

I don’t entirely know that I like the extra elements, but I come from a slightly different era of development that saw this technique of creating decoration-only elements as heresy, while still using it regularly.

Anyway, I enjoy looking at the sorts of things that front end devs do to accomplish what UX/UI designers come up with.




#minify, #Web Development

Minify on the Fly? Probably Not The Best Idea

In order to serve up better performance on my site I minify my JavaScript and css files using cssmin and jsmin (in spite of the author’s exhortations to do otherwise) respectively, but I don’t do it in the most efficient manner possible. I’m basically serving up those cache files on the fly, making it the old school, non production method for doing this. I’m not actually processing the files on the fly, however, only checking to see if a source file has been modified before rebuilding the cache.

I’m running it all through the WordPress wp_enqueue_script/wp_enqueue_style system in my custom theme, but I need to find a method that would work more efficiently in a high traffic environment–not that I have that problem at the moment–instead of serving up those cache files using php.

I thought about running a cron job that would take care of the minification, then just link the theme to minified css or js files. Any ideas?