The window.history object can be used to manipulate a browser’s session history. Session history is localized to each specific browser tab. This means that we can also traverse between pages stored in a tab’s window.history object. To go back one page: history.back(); Or: history.go(-1); Both methods navigate to the previous page stored in the session history, but history.go() can be…
The currentColor value in CSS allows us to style more concisely by leveraging color as a variable. In the following examples, you’ll see how we use currentColor to avoid repeating code when dealing with color values. What is currentColor? Simply put, currentColor represents the value of an element’s color property. If color: #333333 then currentColor is #333333. How is it used? To make…
Summary Cason Lane needed a revamped digital calling card for his business communications consultancy. Main client concerns included site rendering speed, search engine optimization, security, and a new design that maintained the recognizable brand image. A transition was made from a slow-loading and clunky Wordpress theme to a modern and clean custom site design that was developed with Hugo, a…
Summary Lincoln Property Company is the second largest property management company in the US with over 184,000 units under management. In late 2018, I developed an interactive infographic that presents the current state of consumer trends and behaviors in an easily digestible manner. The infographic displays digital marketing statistics about sourced from a variety of sources. The information is…
Working in a large code base with many other developers can lead to instances of merge conflicts. Merge conflicts happen when two branches modify the same lines of code and git can’t resolve which changes to keep. Typically, git is pretty good with merging distinctly separate work together up to this point, when merge conflicts arise and require human intervention. When that happens, git…
Summary One of my largest projects came in the fall of 2018 with AMP Residential, a property management company whose goal was to launch an entire suite of websites for a portfolio of 30+ multifamily properties. A theme requiring extensive customization capabilities to fit the different needs of all properties and their websites was needed. The design was challenging because of several offset…
Summary Morada Plano is a luxury apartment complex located in the Plano Arts District and Historic Downtown Plano. In the summer of 2018, I developed another custom property site for Southern Land Company. For this build, I implemented new UX features requested by the client and designer like parallax scrolling, SVG animations, counter animations, and an Instagram feed. Tools Foundation jQuery…
Summary Avenue5 Residential is a multifamily property management company with 40,000 units and 200 properties across the United States. Although they sustained a large online presence, a number of their properties websites were in need of fresh, updated design and functionality. In early 2018, I developed a custom site theme that was applied to a number of websites under their portfolio of…
Since they’re not part of the DOM, CSS pseudo-elements can’t be selected and edited with JavaScript the same way as traditional elements on a page. I ended up going a different route by selecting the regular elements, creating CSS rules for their pseudo elements, and injecting those them into the page. The Design One of my recent projects involved creating 10 sections that follow a…
If you’re like me, on more than one occasion you’ve typed out your commit message and noticed a nasty typo after the fact. Here’s a quick way to amend your last commit message if you have already entered your commit message in the terminal but have not yet pushed your local branch to the remote branch. $ git commit --amend This will open up your editor to edit your commit…
Untracked files are files in the git repository’s working tree that are not present in the git index. These are new files that were not present in the previous snapshot of the repository. When you don’t want to stage and commit these files, git clean is a useful way to permanently remove all or a selection of your untracked files in git. This is what untracked files look like when…
One of my recent site builds came back from a round of QA with a bug present only on mobile iOS devices. It was a set of tab links that required two clicks to function on iPhones and iPads. The Bug The buggy tab links had an effect that added a pseudo element to the right of each link indicating when a link was hovered over, in focus, or active.
Around the time I graduated from my programming bootcamp in March 2017, I started listening to programming podcasts to scratch the itch of continuous learning and to keep myself engaged with the world of web development. Although I started with just a handful, almost a third of my Podcast Addict app is now filled with them. Some are more specific to a programming niche, tech stack, languages, or…
Summary Vertis Green Hills is a Southern Land Company residential community made up of luxury apartments with onsite dining and shopping in Nashville, TN. I developed the site in late 2017 while the property was finishing construction and anticipated for opening in 2018. Tools Foundation jQuery Ruby on Rails
A little while ago, I spent some time researching which frontend JavaScript framework or library I would learn next. The primary criteria was ease of learning, ease of use, and popularity (community support and career usefulness). I chose to start with Vue.js. My method of learning was by reading the Vue.js documentation and following Ayo Isaiah’s tutorial for developing a to-do list…
One of the very first things I noticed when I took up JavaScript ECMAScript 2015, or more commonly known as ES6, were the new types of variable declarations. Whereas I had previously only used var to declare a variable, I could now declare variables using let and const. But how are let and const different from var? And in what situations are they each appropriate to use? Scope Each of the the…
This is the easiest way to install Google’s GoLang (Go programming language) on a Linux machine and then perform an update when a new Go version is released. Install Go Installing Go is as simple as downloading a binary archive file and extracting the contents in the right location on your machine. 1. Download Go First, visit the Go downloads page and download the binary suitable for your…
Lately, I’ve been a little indecisive on which JavaScript framework or library to dive into next. Based on all of the job descriptions I’ve been plowing through, any front-end and even most full-stack web development roles require proficiency with a number of different JavaScript frameworks. Vanilla JavaScript is Not Enough A lot of advice directed at junior web developers that…
Summary Miniflix is an experiment in building a React app with Create React App and Auth0. I built a single-page app with a user login system that serves videos through Cloudinary. Tools Auth0 Bootstrap Cloudinary Create React App React
A web developer in San Diego, California. let languages = ['javascript', 'ruby'], frameworks = ['ruby on rails', 'vuejs'], tools = ['hugo', 'gulp', 'nodejs', 'webpack'], skillset = languages.concat(frameworks, tools) View my code on GitHub, connect with me on LinkedIn, follow me on Twitter, and check out my work below.
Static assets like CSS, JavaScript, and image files are normally cached for long periods of time with expiry periods of a few weeks or months after being served to a user’s web browser. Caching is used to speed up a website or application by once downloading a file and storing a cached version of it in the browser. When a user moves from page to page on a website or revisits the same site in…
Summary Osprey is an open source Hugo theme that I designed and developed to use for my own portfolio site. I have been maintaining and improving it with the support of the Hugo community on GitHub since 2017. Tools Basin Disqus Formspree FlexBox Grid Gulp.js Hugo
Summary Rhino Linings Spray Foam Insulation, newly formed division of Rhino Linings Corporation, required a corporate website that could reach both consumers and clients. Using Wordpress, I built a site that served as a valuable marking asset. Tools Wordpress
Summary Rugged Fellows Guide is a lifestyle blog created as a personal project to experiment with the Wordpress platform, web design, digital marketing, and SEO fundamentals. Within the first 6 months, the site generated as many as 30,000 sessions per day. Tools Wordpress
Summary LEARN academy is a full-stack web development bootcamp in San Diego, CA. The website required optimization in terms of speed and organic search engine rankings. Assets were optimized, page loading speed improved, and pages were restructured according to modern SEO standards so that content could be properly crawled by search engines. Tools Google PageSpeed Insights Google Search Console…
Summary VolunteerUp is a Ruby on Rails app that connects volunteers with non-profit organizations. It was built in a 2-week sprint on a team of 7 developers as a final project during the LEARN Academy full-stack Ruby on Rails course. My primary involvement was developing the component for searching and filtering organizations and events within the application as well as some UI/UX guidance. Tools…
This is a big list of free JavaScript books and resources that can all be found online. The list is categorized by different JavaScript frameworks and ordered alphabetically. Some of the reading materials require registration or your email but are otherwise still free for consumption. If you have a resource to add to this list, please let me know! * Registration required JavaScript Basic…
CloudFlare is a free content delivery network (CDN) that helps deliver static content quickly and efficiently throughout the world. Caching and serving static content through dependable CDNs like CloudFlare, MaxCDN, or AWS CloudFront can help speed up your website drastically. A CDN is essentially a network of geographically dispersed servers. Each CDN node (also called Edge Servers) caches the…
The Hugo workflow is fairly simple and straightforward. This is the workflow I use to update and operate this blog and portfolio. Inside of your Hugo project folder, the public/ folder is generated with all of your static site files once hugo is run in the terminal. Purge and Serve To generate a new public/ folder, just remove the existing one and run the server. All updates you have made to your…
My new portfolio has officially been launched! This is my first static website built using Hugo. In my previous post, I mapped out a few broad objectives for this project. Let’s take a look at the completed goals from a short while ago and review. Objectives Create portfolio to display work Create blog to jot down my progress and help others along the way Implement design with SCSS Design…
I’m finally ditching Wordpress and testing out new waters with Hugo, the static site generator written in Go. Go is a speedy programming language developed by Google. During this new chapter of my career as a web developer, I’ll be moving away from dynamically generated site builders and constructing my new portfolio from the ground up in order to practice and refine my web developing…