All Categories CSS (10) Demo (5) Git (4) HTML (7) Javascript (15) Laravel Blade (6) Linux (3) PHP (8) SCSS (8) WordPress (3)
  • Converting jQuery Blog Post Component To Vanilla JS

    Converting jQuery Blog Post Component To Vanilla JS

    I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store...

    Read More

  • (Demo) Converting jQuery Navbar Code to Vanilla JavaScript

    (Demo) Converting jQuery Navbar Code to Vanilla JavaScript

    I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to...

    Read More

  • [Demo] React.js Modal Using The Hooks API

    [Demo] React.js Modal Using The Hooks API

    Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class-based approach. This example is going full functional! Defining The Functionality...

    Read More

  • [Demo] Discord Bot: Reddit API Ask Feature

    [Demo] Discord Bot: Reddit API Ask Feature

    The Purpose Some Discord bots have a feature where you can “chat” with the bot (i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer...

    Read More

  • [Demo] Defining Reusable Column Extends with SCSS

    [Demo] Defining Reusable Column Extends with SCSS

    Using SCSS, creating flexible layouts that are reusable across projects is a breeze. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases You can think of them like pre-defined Bootstrap columns. To...

    Read More