My Background

From Science to Software

Kenneth D'Aquila photo

It’s 2004 and I’m interested in an area of science called solid state physics. It boils down to understanding the properties of everyday objects in terms of microscopic entities like electrons. For example, the color, strength, magnetism, and conductivity of different materials can all be traced back to the quantum mechanical behavior of the electrons moving inside. Such knowledge is useful for creating new materials with enhanced properties for various industries.

To learn more about that, I attended Northwestern University in Evanston, IL and completed the B.S. degree in Material Science and Engineering. I later completed a Ph.D. in Material Science and Engineering, also at Northwestern, while performing cutting-edge scientific research at Argonne National Laboratory in Darien, IL. This was a crucible experience for me and by the time I completed the project, I had gained many skills. It wasn’t only the technical skills of a research scientist, but also skills in communication, technical writing, and problem solving.

After that, I left the research field and became an adjunct professor of physics at several Chicagoland community colleges, notably Oakton Community College in Des Plaines, IL. I taught lab-based courses in physics and nanotechnology for about seven years and learned to interact with a diverse student body. Life was good, but something was missing.

The truth is, I’ve always had a passion for software development. While doing data analysis as a graduate student, I taught myself several programming languages, and I loved every minute. I think the reason I’m attracted to software development is because I enjoy understanding how things work but I also enjoy the creative process of building things.

I continued to study software development on my own for several years, posting many projects on Github. My most in-depth Java project was a 3D scanner using a principle called ‘structured light’. Eventually, I decided to turn my hobby into a career by completing the M.S. in Computer Science from the University of Illinois at Springfield. I also completed a one-year internship with the Illinois Department of Innovation and Technology (DoIT), creating a website to manage requests for data from the Illinois Longitudinal Data Study (ILDS).

Now, I’m working as a professional software developer, specializing in web development. I’m very thankful that I had the opportunity to discover and pursue my true calling. I look forward to applying my passion for design to your next project.

With Best Regards,

signature

My Toolbox

The latest snapshot.

As a full-stack web developer, I’m constantly exploring web development technologies to find out their strengths and weaknesses as well as establish my own preferences on using them. Offering a wide range of web technologies enables me to find the optimal solution for client projects. Checkout my current status below.

server graphic

Server-Side Tools

JavaScript

  • Node.js
  • Express.js
  • Sails.js
 
 
 
 
 
 
 
 
 

Python

  • Django
  • Flask
 
 
 
 
 
 

Java

  • Spring
  • Spark
 
 
 
 
 
 

C#

  • ASP.NET Core MVC
 
 
 

Ruby

  • Rails
  • Sinatra
 
 
 
 
 
 

PHP

  • Laravel
  • CakePHP
  • WordPress
 
 
 
 
 
 
 
 
 
server graphic

Client-Side Tools

CSS

  • Atomizer
  • Bootstrap
  • Sass
 
 
 
 
 
 
 
 
 

Javascript

  • React.js
  • Vue.js
  • AngularJS
  • jQuery
 
 
 
 
 
 
 
 
 
 
 
 
server graphic

Database Tools

Relational

  • SQL Server
  • MySQL
  • Postgres
  • DB2
 
 
 
 
 
 
 
 
 
 
 
 

NoSQL

  • MongoDB
  • Redis
 
 
 
 
 
 
server graphic

Support Tools

VCS

  • Git
  • Github
 
 
 
 
 
 

Search

  • ElasticStack
 
 
 

Container

  • Docker
 
 
 

Hosting

  • AWS
  • Azure
  • Google Cloud
 
 
 
 
 
 
 
 
 

My Approach

Highlights of my web design and development methods

RenaissanceArtShow_Strong
Strong Visual Hierarchy
RenaissanceArtShow_Weak
Weak Visual Hierarchy

Strong Visual Hierarchy

I think the most important technique for a good user experience is a strong visual hierarchy. In essence, visual hierarchy represents the sequence of page components that a person notices first. The general idea is to control the size and boldness of components to make them noticed in the desired order. It’s a simple idea, but surprisingly easy to overlook.

The adjacent images show examples of strong and weak visual hierarchy. Both images contain the same content. However, with strong visual hierarchy, it’s much easier and faster to understand what the panel is all about. Your eye naturally notices the image and the headline first because of their size and boldness. Then your brain intuitively knows that the smaller text below probably contain details. You can either read it now, or safely skip and and keep scanning the page.

Hybrid CSS Methodology

Writing readable front-end code is important for the maintainability of a website. Cascading style sheets (CSS) is the way that fonts, colors, layout, and more get sent to the client’s browser. However, there are basically two camps for how to write CSS code: Semantic and Utility-First. With Semantic, you name style classes according to the objects they describe. Semantic naming makes reading the HTML/CSS code very easy, however, constantly generating those names can be slow and can lead to naming collisions. With Utility-First, you name the style classes according to the type of style itself. This speeds up development, but can lead to repetition and the need to propagate certain changes to multiple places. See the adjacent example.

My solution is to use the best CSS technique for a given scenario. I have developed the following decision tree. Consider style sets that are non-reusable across the site. If the styles are non-numerical (like display: flex), I use Bootstrap classes. If the styles are numerical (like margin), I use Atomic CSS classes. If the styles are custom (like fonts and colors), I generate classes with Sass. Now consider style sets that are reusable across the site. In this case, I write custom classes with Sass using the block-element-modifier (BEM) system.

Keep in mind that all of the site’s CSS styles are eventually concatenated, minified, and compressed into a single file that the browser can cache after first load. Usage of the utility-first CSS classes significantly reduces the CSS file size for faster page load, while usage of semantic classes is a great way to enable reusable styles.

CanadaAdventure_Photo

The Visual Result

An inspiring landscape for a webpage hero section

CanadaAdventure_SemanticCSS

HTML with Semantic CSS Classes

So clean and readable, but generating names get’s out of control on larger projects.

CanadaAdventure_AtomicCSS

HTML with Atomic CSS Classes

More cryptic, yet easier to maintain. Note that the syntax W(50px) transpiles to width: 50px.

MakeUpApp ChatApp

Multi-Page vs. Single-Page

(Left) An multi-page website for eCommerce.

Users can find the store hours and browse products. The page must reload each time, but all load times are optimized and reasonable.

(Right) A single-page web app for chat.

After a long initial page load, the app can exchanges messages very quickly and can display different windows to the user, all without reloading the page. Also, past messages can be lazy-loaded with an ‘infinity-scroll’ feature.

Selecting Web Technologies

A website’s software architecture influences not only the time and cost of the development, but also the user experience. (See the adjacent examples) The traditional multi-page website architecture can reach the widest range of user devices, can load the first page faster, and can be readily discovered by search engines. However, they have limits when real-time, user-interactions with data are needed. The modern, single-page web application architecture provides the fast interactions, but has its own drawbacks. It’s important to choose what best serves the users and your company’s technology infrastructure.

Another decision is the server-side language and technology stack. Each stack has its own advantages and disadvantages. For example, the JavaScript stack, powered by Node.js, uses an asynchronous execution model that efficient handles I/O tasks and is easily scaleable, but not the best choice CPU intensive tasks. Also its cloud hosting options tend to be more expensive than choices like Python and PHP. Other factors to consider include the familiarity of your IT staff and developers with the technology stack. Also the availablility of on-premise or cloud computing resources can influence the decision.

When making a recommendation for web technology, I weigh a variety of factors. Users will get an app that is fast, reliable, and feature-rich, while keeping development costs at a minimum.

Let’s Get Started