Moonsault Blog

Responsive by Default Layouts

by John Phillips on

Media queries? We don't need no stinking media queries.

I was learning more about flex box, when I came across an interesting article on Smashing Magazine, Using Media Queries For Responsive Design In 2018 by the brilliant Rachel Andrew. In it, she explains the “responsive by default” properties that flex and grid layouts can have.

I’m gonna focus on flex layouts, rather than grid. I know grid is the new hotness, but for now, I’m sticking with flex because the browser support for it is better than for grid.

A Working Example

Have a look at this sample page. If the window...

Continue reading “Responsive by Default Layouts”

Recent Posts:

The Problem with ‘Gathering Requirements’

As I was reading this post by UX Legend, Jared Spool, I found myself nodding in agreement hard enough that neck injury seemed like a real possibility. Seriously, the article is a gem. You should go read it now. The article highlights a problem I see again and again in... more

Using AWS Rekognition to Search Instagram Posts by Photo

Goal: To search my Instagram feed by my (beautiful) face. Technology used: AWS Rekognition, AWS SNS, AWS Lambda, Serverless, Express, Heroku Questions: If you have any, [email protected] You can search your Instagram account by your (beautiful) face at faces.moonsault.co. Check out the code on github The problem is pretty straight... more

Deleting Github History

I recently wanted to take a project from private to public, but I wasn’t real sure what was in the history. I think I committed a few sensitive keys during development. So, I looked up how to nuke your github history and ran across this stackoverflow post that I thought... more

Backing a static webpage with AWS Lambda

I wanted to illustrate how to use AWS Lambda on a single page “app” with no backend server. To illustrate this point I came up with a contrived example that would send instagram photos to a phone number. Demo Code THIS IS OUT OF DATE, DON’T USE The Idea Single... more

UX Work: Navigation Redesign

The image above shows the results of some UX work we recently completed for AscentCRM, a redesign of the navigation of their application. The goals of the project were to simplify the navigation and future proof it a bit. This should lower their support costs and make it easier for... more

Integrating AWS Lambda into a static site

I took some time this last weekend to dig into AWS Lambda. Simply put, Lambda is a way to run code in the AWS cloud without knowing/caring about a server. Lambda is responsive to events in the AWS ecosystem (S3 uploads, SQS messages, ad-hoc execution, etc.). I focused looking at... more

Save time and money building your app

I have a 3 year old son and we play blocks together. We build firehouses that dinosaurs live in. We build the tallest towers we can, just so a flying truck can knock it over. He likes spending time building and seeing his ideas come to life. I know something... more

Lorem Ipsum is the work of the Devil

If you have worked with any kind of designer, chances are you have seen you fair share of “Lorem ipsum.” This bit of latin text is the go to when you need to mock up a design. It is used when the design work is being done before the “content”... more

Testing with Cucumber and PhantomJS

If you do automated testing “right” it’s a game to make the test go from green to red in as few steps as possible. If you do automated testing “wrong”, then you aren’t doing it at all. If you are doing automated testing like me, your doing a little TDD,... more

Masking images with SVG

I went through a bunch of trouble trying to figure out how to create a crossbrowser solution to making images with SVG. Initially I looked into css3 clipping and masking properties which are beautify and modern solutions. The catchall solution is actually embedding the image and a clip path in... more

Leveraging Mongo to distribute socket.io

Clustering socket.io can be a bit of a mess. Each server (and in node’s case each process on the server) has it’s own pool of socket.io connections that are connected to clients. Keeping two processes in sync to keep everything real-time can be a bit of a scaling headache. This... more

Build vs. Buy

TL;DR; If you are really wrestling with a build/buy decision then you should probably buy. If there is a decent option out there, go out and use it until either one of two things will happen. One, you love it and you never have to build that thing and you... more