-
Let’s Learn Laravel Blade Layouts
Just about any page on a website will consist of a generic layout. This blog you’re reading right now has a generic layout using Laravel Blade. Other common uses include 404 pages, blog views, and views that have special elements such as a sidebar. What Does a Laravel Blade Layout Usually Consist Of? A generic...
Read More
-
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
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
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
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
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
-
Getting to Know JS: slice vs splice
If you’ve been coding in JavaScript for some time now, you’ve likely run into both slice and splice. Do you know the differences? Do you know when to use one over the other? They both seemingly do the same thing, but there are some key differences between the two. Let’s take a deeper dive into...
Read More
-
Getting to Know JS: Destructuring Objects and Arrays
One very handy feature that JavaScript added was destructuring. You may have heard of it and perhaps even used it. Did you know you can destructure a nested object? Did you know you can probably do a lot more with it than you think? In this post I want to explore the possibilities of this...
Read More
-
Getting To Know JS: let, const and var
JavaScript has gone through numerous iterations over the past few years, and it only gets better and better. For the longest time, JavaScript only had var as an option for declaring a variable. var had numerous issues that I won’t get into at the moment, but something had to be done. ES6 brought the advent...
Read More
-
Vue 3: Making An Input Component with v-model Support
Vue.js is a powerful JavaScript library that makes creating complex web apps more straightforward than ever. Out of the box, Vue.js gives you most of the tools you need to get going. However, something that seems simple can cause some tricky behavior. One common example I’ve seen is having a component with an input interact...
Read More
![[Demo] React.js Modal Using The Hooks API](https://bparkerproductions.com/wp-content/uploads/2023/09/demo-react-js-modal-using-the-hooks-api.png)
![[Demo] Discord Bot: Reddit API Ask Feature](https://bparkerproductions.com/wp-content/uploads/2023/09/demo-discord-bot-reddit-api-ask-feature.png)
![[Demo] Defining Reusable Column Extends with SCSS](https://bparkerproductions.com/wp-content/uploads/2023/09/demo-defining-reusable-column-extends.png)
