During a recent project I came upon an interesting CSS problem. I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size.
The Elm architecture is a simple and straight-forward alternative to the common model-view-controller architecture, and it’s well suited to functional programming.
In brief, the Elm architecture uses a data structure to render a UI, the UI fires actions, and actions are used to update the data structure. This is the same sort of uni-directional flow that React.js uses and the one that Ember.js has been gravitating toward in place of two-way data bindings.
Having fast tests is important. Slow running tests slow down development, especially if you’re practicing TDD. If tests are too slow to run, some developers may avoid running them altogether. Slow tests will also slow down CI builds, increasing the length of your feedback loop.
For my upcoming wedding reception, I built an application that lets a guest view the table and chair they have been assigned. I’m using D3.js to draw the tables and chairs. Our particular layout required both round and rectangle tables. Drawing chairs around the rectangle tables was fairly easy. The real challenge was drawing chairs around a circle table. Here is the solution I came up with:
In 2012, I wrote about handling IE8’s limit of 4096 selectors in any single CSS file. It’s been several years since then… and this is still a problem.
Using SCSS and frameworks makes it distressingly easy to hit these limits. In a perfect world, we’d be able to avoid them altogether, as the bloat is not really a positive thing. However, until I’m able to refactor things to fit under such limits (or until such limits are lifted and IE9 is firmly behind us), here’s another solution.
Last fall Atomic Object launched a redesigned website with lots of great new visuals and content. One of my favorite features of the redesign is the “slide-in reveal” homepage animation that slides images and text in from the sides of the screen as you scroll down the page.
I’ve found that trying to write semantic markup has helped me write cleaner HTML. It’s been a useful guideline, but it hasn’t been perfect, and I’ve sometimes struggled with how to model things well. Recently at the March SoftwareGR event, I heard Jonathan Snook relay an example that I found very insightful. Read more on What “Semantic” Markup Really Means…
At the last SoftwareGR event, Jonathan Snook gave a great talk titled “CSS is a Mess.” I was particularly interested because, while I’ve always tried to organize my CSS thoughtfully, I’ve often found that the end result isn’t as clean as I’d hoped.
In part 2 of this series, I focused on the basics of back end development. Here, I’m going to talk about developing client-side code.
The front end of a Single Page Application (SPA) is composed of three major things: