PIXELFLOW :: an intergalactic discourse

Pixelflow

An Intergalactic Discourse

Web Design Bemusement

Diving In Head First

Getting into modern CSS can be daunting, but MDN has a really nice CSS Layout Introduction. This is just one page on layouts, but layout/placement is the core fight with CSS. The site has many topics if you go up a navigation level.

A View From The Sky

Lets break web styling concepts down into:

  • Design problems.
  • Techniques for CSS version and browser era to implement a design problem.
  • All of the unavoidable monkey patching to support the edge case bugs.

Thats how you decide how dirty your code is going to be, and why supporting versions below say IE 11 adds lots of compromises and complexity to using the best tools for an era of browsers/CSS.

Its good to know where things were, and where they are now in terms of technique, since the styling of even a few years ago is very different. A good rule is to keep searches to ‘within a year’ for this very reason. Always coupled with checking CanIUse.

A Glimpse Into The Dark Portal

In the pre flexbox world, we still wanted to provide complex design. The most commonly attempted being the Holy Grail. Which allowed for a header and 3 columns of equal length. Looking at how this layout is achieved over time gives a good sense of how CSS has changed.

But before even that can be discussed, knowing how to control the flow is important. The CSS Floatorial is a good segue before understanding how to achieve the Holy Grail.

Another popular common design to measure different css techniques against is the CSS Zen Garden. Without changing any markup, people explore all kinds of css tricks.

Back to The Future

Flexbox is a great solution to many problems solved by earlier techniques, and in the not-so-distant future a proper css Grid system will hopefully put the final nail in the ‘tables as design elements’ coffin. Here flexbox is used for a much simpler Flexbox holy grail layout

Beyond the Grail

Starting with the 960 grid system design language started to evolve and allow complex layout designs that mirrored their print medium (Newspaper, Magazine) counterparts. This is how modern css frameworks like Bootstrap and Zurb Foundation build layouts.

Some great people have written on the subject:

With a grasp of where we came from and where we are now, we can move on to more advanced topics like: Progressive enhancement, mobile first/responsive design, accessibility, local storage and many others

Get Smart

The final leap forward comes from preprocessing. A look at bootstrap’s build system will give a decent understanding of whats involved. With so many browsers, and subtle differences in implementing the css standards having a tool to sort it all out is infinitely useful. In steps PostCSS and its powerful AutoPrefixer, which aids in adding prefixes and transformations to browser specific styles. And Sass which allow one to avoid repeating selectors, and units of measurement by adding: Nesting, Variables, Functions and more!

Get Crazy

Now get inspired by CSS Animation and its Tricks then go make some Weird and Wacky stuff!

Git Svn Branches

Flirtation

gits series of svn commands makes it appealing to use with an svn repository. One can easily make local branches, pull down svn, dcommit back up to svn. Filling in that gap of easily throw away feature branches.

Git + Svn sitting in a tree

You can also work with svn branches (create and push to them) with a few wizard incantations. While reciting these spells be sure to use:

  • git svn info to make sure you are not pointing at TRUNK
  • Doing a dry run with -n or --dry-run to svn dcommit to make sure it will end in up the right place.

Spells

Cast them.

Backbone.js Catch Missing Routes

So Silent

You know the drill. Click button, nothing happens.

  • Is my event firing in the view?
  • Is my route triggering?

Make it so #1

By having * as a route you can catch spelling errors and other mismatched route errors. The catch an asterisk causes a regex error in the router, so we place any alpha characters after it to appease the regex gods. In this case ‘nomatch’

LDAP tears

So its come to that point in your life where a project is using LDAP. In my case, it was a php Laravel app.

What’chu Talkin About

The environment: Mac OSX 10.8.5 with MAMP and openldap. The error? Can’t bind to server.

Sanity Check

Use something like Apache Directory Studio with the same settings as your app is configured to use. If it works, your issue lies in self-signed certificates and connecting over secure ldaps:// protocol.

Amends

On OSX, edit your /etc/openldap/ldap.conf and change TLS_REQCERT from demand to never

Your hazing is now complete.

Arduino Burning Man Goggles

My eyes the goggles do nothing

Ever since Arduino came about and serially addressable RGB LED’s showed up I’ve loved messing around with them. Adafruit came out with these rings that you can string together conveniently to fit in a pair of welders or similar goggles. Pichurs

Burn

Burning Man is an awesome time to relax, think, and invent things. This year there was a steam punk camp and I decided to use some goggles we had and my NeoPixel rings (originally for a clock pendant idea) some pink duct tape and have at it!

See Plus Plus

I want every project to be a new challenge, so this time I decided to take all of the MVC patterns of the web development world and try them on some LED’s. So each pattern is a model that updates its data, and a view renders all of them to the led strip. The plus of this is it would be easy to render to different LED strips using different libraries under the hood. Grab the CODE

Vidya

< Previous 1 3 4