Watch me create web apps
on my new youtube channel!

Watch Now

Watch my latest episodes on web apps


Where I document my day as a developer


Where I document my day as Adrian :D


Discussing and connecting with devs


The code for all my web apps

  • I Created A Messenger Bot

    This is my process of creating a facebook messenger bot. I live streamed the entire process on Twitch and Youtube.

  • I'm Going To Make Video Games

    I am going to start making video games. It will be journey and a half but I hope you join me on my journey.

  • How To Start Using NPM

    Npm is a node package manager. Lets dissect these words first. Node.js is a javascript runtime for executing javascript code. Package manager is a resource that helps to distribute packages of code as easily as possible. NPM is the industry leader in package managing for javascript.

  • Get tips and tricks straight to your email


    Lets set the scene. You are starting on your new path called web developer and you know HTML and CSS. You have heard of this thing called React that every developer and their mother is using. But what is it and how do you start using it today?

  • I Survived a Week of DevOps Hell 🔥

    If you don't know yet by the title I am not a DevOps engineer, a sysadmin or someone even fairly familiar with AWS. I am a front end developer dammit. Why is the world so cruel?

  • Be a developer... IT'S EASY!

    In this dark and twisted place we call life, you would be suprised how easy it is to start a new career of happiness just through the internet. So why are you waiting?

  • Get Some SVG In Your Life

    Are you tired of blurring images and the large file sizes that come with assets delivered in JPEG and PNG. Well if your asset is a vector asset you should use the latest and greatest of what the web has to offer, SVG!

  • The Internets

    If we really take a step back and understand what the Internet is. It begins to boggle the mind of how something has been able to enhance our current life as much as the Internet has.

  • Up & Going with Jekyll

    Jekyll provides you with the tools to create a full fledged blog thats static. Its a more simple retro way of making a blog but its great because it really strips out the unnecessary code and the reliance on a database is dissolved.

  • Loading Content In With Ajax

    When a page initially loads, many requests are made to the browser. Content, Images, and JavaScript Files are just some of the types of requests made to the browser. For websites that require lots of content and images, it is best to delay the requests for these assets until they need to be displayed. Ajax gives developers the tools to do just that.

  • Creating Modular Article Elements

    Creating a modular code base is key to the extensibility of any web app. Using the BEM inspired methodology it is a breeze to create modularized components. Today I will show you how to create a modular HTML and CSS component that is seen throughout the web.

  • SVG Circle Line Animation

    SVG is an incredibly useful web element that can take many forms and sizes. Whether you want to create a complex chart or a simple shape. SVG can also be animated! Today I will show you how to do exactly that by drawing a circle using a little CSS and some JavaScript to help us out.

  • Deliver Your Site Faster With Critical CSS

    CSS files are getting larger and for good reason. Our web projects are larger and more robust than ever but but do we need an entire CSS file to create the user interface. Critical is a npm package that scans a page of your website and returns an output of the necessary CSS for the page.

  • Caching With Expires Headers

    Caching is the process of storing data for future use in the cache's memory. The stored data is used to serve the same data even faster for future requests. On the web we can store our websites CSS, JavaScript, Images, fonts and many more file types to the browsers cache.

  • Gzip Compression Engaged!

    Speed kills on the web and it is our duty to provide the fastest experience possible. Gzip enables HTTP compression by compressing most file types. Compressing these files has proven to reduce files sizes up to 70%!

  • The Right Way To Load Web Fonts

    Depending on how large the file size of your web font, you will find that your website will take a performance hit. Web fonts are a great asset for designers and developers alike that come with their own quirks and caveats. Our goal as developers is to minimize these quirks and we can do just that with Web Font Loader.

  • A Few Things I Have Learned

    I have been working at a small digital agency for a little over three years now. To say that I have learned a lot since starting here is a gross understatement. The funny thing is that I feel like I learned in an unconventional way. A way were you I was required to want to learn rather than forced to learn.

  • Responsive Images Today

    Responsive images on web apps is a complicated subject that if done right can positively effect your sites aesthetics and performance. srcset, sizes, and picture element gets us one step closer to a solution for responsive images.

  • My Git Cheat Sheet

    Here is my cheat sheet to start using git today with handy commands and terminology.

  • Go Modular With Your CSS

    CSS can be pretty frustrating when your codebase starts to increase. Without the proper structure and naming conventions, your CSS can be downright unmanageable. Lets delve into the steps we can take to control our CSS codebase.

  • Automate Your Workflow With Gulp

    As Front-End Developers, we are sometimes overcome with the amount of work that goes into building a simple website. How can we automate time-consuming tasks in our development workflow.Gulp provides developers the toolbox to automate the tasks in their workflow.

  • Starting With Sass

    CSS is an easy way to style websites but it lacks features that developers need. Sass is a scripting language that is interpreted into CSS. Sass provides features that CSS doesn't like Variables, Mixins, Operators and other functionality that is available in other object-orientated languages.

  • Flexbox 101

    Flexbox is a innovative way to create simple and complex layouts in a fast and flexible manner. When you set an element to display as a flex container, the child elements within that container become flex items. The browser then stretches and shrinks each flex item to fill all the available space.

  • My Quest Begins

    If you could not already tell by the url, My name is Adrian Eufracio. I am a UI Developer that loves learning. My quest to become a Front-End Ninja starts now. Tag along!