i 💛💛💛 webdev.

i write about webdev
and making web things.

  • 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!