To play around with the art generator hop over to: http://jsartgenerator.herokuapp.com/ to view the art that has been created check out: http://imgur.com/a/ufQyj

Like many people in the industry I suffer from what is referred to as only being able to create “Programmer Art.” Programmer Art has been talked about ad nauseam with many people offering different solutions as shown below:

Usually programmer art is discussed in the context of game development, where the artistic direction is a critical step in the development process.


So in an effort to become more organized I have begun work on a cross platform “to-do/calendar” web application. The end goal is to have a functional, fast, and easy to use app that is inspired by the impeccably designed Clear app for iOS:

Unfortunately, as an Android user I cannot use this app…but as a Software Engineer I can certainly make my own!

So two days ago I got to work, and messed around with jQuery libraries and web components to try and get the list functionality I was looking for.

Unfortunately, that proved difficult. Both jQueryUI’s and…


I was refactoring some of my HTML code a while ago and realized that at some point, even though I had done seemingly everything I could, my code still looked like a mess.

Problem

The mess of course, had to do with an excess of div elements:

<!-- CONTENT -->
<div ...>
<!-- TITLE -->
<div ...>
</div>
<div ...>
<!-- SUB TITLE -->
<div ...>
</div>
<!-- AUTHOR -->
<div ...>
</div>
<!-- TAGS -->
<div ...>
</div>
</div>
<!-- BODY -->
<div ...>
<div ...>
</div>
</div>
</div>

This is not limited to just my code. Inspect the HTML…


Accordion Menu’s as they were before the Web

Recently, as I was working on my personal website, I came across an interesting problem. I wished to have a responsive website that when resized to a certain width the nav bar would change to an accordion style menu, as illustrated below.


The next version of Rails is around the corner, and with it comes support for WebSockets via ActionCable, something that has been described as “the highlight of Rails 5.” But how powerful is ActionCable? And what is it exactly?

WebSockets

For an indepth description of what WebSockets are, and how to properly set up a Rails 5 app with basic chat room functionality, I highly recommend my instructor Sophie’s blogpost on the subject. It got featured on Heroku’s blog and can be found here:

To summarize, WebSockets function differently from the normal HTTP web protocol (where a client makes a request…


DISCLAIMER: I’m currently in the midst of a big project, this is the result of realizing I need to write a blog post and quickly drumming up a program in 2 days.

After last blog posts Game of Life program, I decided to try my hand at building another grid based web “game.” Unfortunately the game requires a server to run and I have yet to deploy it to one, however the source can be found here:

I made a basic Othello (Reversi) clone!

Go to the route /new to make a new game (8 by 8), /new?x=30&y=30 to make…


A large grid with the cells set to form an interesting, fractal-like pattern.

On a basic level, 2D cellular automata is simple. There is a grid, the grid has cells, the cells have states. As time goes, the states of the individual cells change. That’s it.

Fortunately, I don’t believe on just learning stuff on a basic level, because cellular automata is so much more fascinating than just grids and cells. While it has its roots in mathematic academia, it has now influenced everything from computer science to philosophy.

Rules

As stated above, 2D cellular automaton is based upon a grid, which houses cells. This grid can be any size, and for the sake…


This is a followup to my previous blogpost, found here.

Media queries!

Media queries allow us execute certain CSS statements when a specific condition is met. This is incredibly powerful for us because it allows us to change the way our page will look depending on what query we set!

Some media query parameters are:

min-width
max-width
min-height
max-height
orientation=portrait
orientation=landscape

And here is an example of one in use:

@media (max-width: 360px) {
.subtitle {
display:none;
}
}

Lets break it down

@media (max-width: 360px) {

This line begins with @media, telling the css that the following code will…


This is a followup to my previous blogpost, found here.

So we need to design a website that not only looks good on multiple screen sizes, but dynamically responds to the screen size of the device accessing it.

…that sounds hard. Just look think about all the screen sizes/types we need to account for! Not to worry, Google has laid out a great tutorial for setting up responsive webpages, and I’m going to walkthrough their steps explaining things in depth along the way.

Setting The Viewport

Before anything, we need to set our sites viewport. By default, no matter the device, a browser…


In 1996 the tides began to change in internet access. The first “mobile” internet browser was created for a PDA called the Apple Newton. It was barebones, only black and white, but it gave people access to the internet from the palm of their hands.

Image from: http://www.teco.edu/pocketweb/

As mobile devices became more and more prevalent in todays world, the internet began to change with it. Webpages that look great on the PC could look terrible on these new devices. On top of that, “heavy” websites (ones with lots of images/other data) could take forever to load on the slow 1x/2g speeds the…

Dean Watts

Software Developer in Manhattan. Passion to learn and teach about the power of programming.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store