Tony Lea

@tnylea

4395 Points

289 Followers

160 Posts

Joined May 8th, 2016

Hey there, my name is Tony. I'm a web developer, dad, husband, and creator of the DevDojo.

Tony Lea

2 weeks ago

View Post

Extracting TailwindCSS from HTML

I've recently run into a scenario where I want to design a one-off page using TailwindCSS with the CDN link; however, including the CDN link would mean that my page load is a heavy 3MB ๐Ÿ™. Instead of installing Tailwind with one of the recommended installation steps, I decided to use the PurgeCSS CLI to extract only the classes I...
Extracting TailwindCSS from HTML
7
Select One:

Tony Lea

2 weeks ago

View Post

Livewire Components in a Different Directory

When creating a new Livewire component they will be placed in the same directory. But, there may be some instances where you want to place those Component Controllers and views in a separate location. In this short tutorial I will show you how to do that. Creating a Livewire Component To create a new livewire component (after cr...
Livewire Components in a Different Directory
8
Select One:

Tony Lea

1 month ago

View Post

FIFO vs LIFO in programming

I've recently been doing some research on FIFO (first-in, first-out) and LIFO (last-in, first-out) organization. I learned this simple concept back in college; however, I still got a little confused every time I recalled this data-structure organization. Because, when something is last, does this mean it is the final one... or i...
FIFO vs LIFO in programming
5
Select One:

Tony Lea

1 month ago

View Post

Using Ace Editor with Livewire

Using the Ace Editor, we can easily add a code editor inside of any application built with Laravel and Livewire. Here is a quick example of what we'll be creating in this tutorial. Let's start off from the very beginning and create a new Laravel Livewire application. Install a new Livewire app First we'll need to create a new l...
Using Ace Editor with Livewire
3
Select One:

Tony Lea

1 month ago

View Post

TailwindCSS Hidden Gems ๐Ÿ’Ž

If you are new to TailwindCSS, you're probably familiarizing yourself with some of the utility classes and starting to build some awesome stuff. ๐Ÿ˜‰ As you learn about this awesome framework, there may be a few utility classes that you skimmed over. In this tutorial, I want to share with you some awesome utility classes you might...
TailwindCSS Hidden Gems ๐Ÿ’Ž
7
Select One:

Tony Lea

1 month ago

View Post

How to drag an element using javascript

While building out a new image generator, I needed a way to drag and move HTML elements inside of another element. Take a look at what I was building below: This is actually the new Post Image Generator that you can use here on the DevDojo to generate some nice looking cover images ๐Ÿ˜‰. Let's cover how we can easily add this func...
How to drag an element using javascript
5
Select One:

Tony Lea

1 month ago

View Post

My first Reaction of React

In this tutorial, I want to show you the basics of how a React application works. I also wanted the chance to try it out myself ๐Ÿค“. I consider myself more of a PHP/Laravel/VueJS developer; however, I thought I would give React a try and let you know my first impressions of this popular javascript framework. Simple React Example O...
My first Reaction of React
7
Select One:

Tony Lea

1 month ago

View Post

One second to read GitHub code with VS Code

Github1s is an awesome project that allows you to open up any Github repo in VS Code directly in your browser. Give it a try You don't even need to install anything to give this a try. Want to read the Laravel repo in VSCode in 1 second? Visit this URL here: https://github1s.com/laravel/laravel. Now, you can view the Laravel co...
One second to read GitHub code with VS Code
4
Select One:

Tony Lea

1 month ago

View Post

Converting Markdown to HTML in Laravel

In the latest version of Laravel, converting your markdown into HTML couldn't be easier. All you need to do is reach for the handy Str helper method and you can accomplish this in one line. Converting Markdown to HTML You can simply run the new Str::markdown() helper to convert markdown text into clean HTML, like so: {!! Str::ma...
Converting Markdown to HTML in Laravel
4
Select One:

Tony Lea

2 months ago

View Post

Paddle Payment Platform

Paddle is an awesome payment platform that makes integrating payments into your application super easy. ๐Ÿ˜Ž Today at Paddle Forward, a quarterly event, they talked about some awesome new features that you might like to know about. Why is this important for you As a developer, you should be familiar with the most popular developer...
Paddle Payment Platform
3
Select One:

Tony Lea

2 months ago

View Post

Write a Post, Get Paid

Are you a developer who enjoys writing articles and tutorials. If so, here's an opportunity to earn some money on a weekly basis. You can write these tutorials/posts on your own site and you can re-post it to the DevDojo for a chance to win $20 each week. If you are posting from another source make sure to include the original l...
Write a Post, Get Paid
10
Select One:

Tony Lea

2 months ago

View Post

A Brief History of Web Development

As web developers, we have an arsenal of ๐Ÿ›  tools, frameworks, and libraries at our fingertips. But, it's important to remember that this hasn't always been the case. Back in the days of Netscape Navigator and Geo Cities, you would have to scavenge the interwebs to find a solution to your programming problem. To appreciate everyt...
A Brief History of Web Development
4
Select One:

Tony Lea

2 months ago

View Post

Best 5 NPM Command Line Games ๐ŸŽฎ

Have you ever been inside of terminal and said to yourself, "I wish I could play a quick game of Pong." Yeah, me either, but if that ever comes up, here are 5 cool games that you can install with NPM and play directly in your terminal. 1. Pong ๐Ÿ“ The beloved pong game where you smack a ball back and forth can easily be...
Best 5 NPM Command Line Games ๐ŸŽฎ
3
Select One:

Tony Lea

3 months ago

View Post

Tracing Objects in TailwindCSS

I've been getting good at designing and painting elements on the page using TailwindCSS. I decided to use a flat laptop image ๐Ÿ–ผ๏ธ and design it with TailwindCSS. It was actually pretty simple after I figured out the best way to trace elements. Let me share my process. Finding our design First, you'll need to find a design that yo...
Tracing Objects in TailwindCSS
9
Select One:

Tony Lea

3 months ago

View Post

Custom Animations in TailwindCSS

Tailwind provides some simple animations out of the box. If you're not familiar with these animations, be sure to check out my post on TailwindCSS Animations here. These simple animations are pretty cool; however, we may want to add some custom animations to our websites and applications. That's simple enough ๐Ÿ˜‰; let's learn abou...
Custom Animations in TailwindCSS
7
Select One:

Tony Lea

3 months ago

View Post

5 reasons to start using TailwindCSS

It's 2021, and it's time for a change. Bootstrap has held its reign as the top CSS framework for quite some time; however, that's all about to change. TailwindCSS is the cat's pajamas, it's the bee's knees, it's the coolest thing since peanut butter and jelly ๐Ÿ‡. If you don't believe me, perhaps this article will change that. Nev...
5 reasons to start using TailwindCSS
9
Select One:

Tony Lea

3 months ago

View Post

It's ok jQuery, I still love you

This is more of a story than a tutorial. It's a story of a library that reached great fame and then became hated by developers everywhere. If you can't tell by the tone, this is also a semi-sarcastic light-hearted post. Let me take you back in time. The year was 2007, and the web was a scary place. There seemed to be no structur...
It's ok jQuery, I still love you
7
Select One:

Tony Lea

3 months ago

View Post

AlpineJS for Beginners

AlpineJS is a new javascript library/framework that focuses on simple javascript interactivity, and it does it really well. If you're looking for a JS framework with routing, state management, and a bit more complexity. Well then, Vue or React may be a better fit. Instead, if you're looking to sprinkle a little javascript, add t...
AlpineJS for Beginners
5
Select One:

Tony Lea

3 months ago

View Post

Creating Browser Mockups in TailwindCSS

TailwindCSS gives us the ability to create some really cool designs. It also gives us the power to create some cool elements on our page, such as browser mockups. You'll learn how to create multiple browser mockups in this quick tutorial in TailwindCSS. Creating the Browser Header We'll create the header by adding a rectangle wi...
Creating Browser Mockups in TailwindCSS
10
Select One:

Tony Lea

4 months ago

View Post

Create a Typing Effect in AlpineJS

In this tutorial, I'll show you how to use AlpineJS to create a simple typing effect. You can take a look at a quick example of what we'll be creating in the Codepen below: {% codepen https://codepen.io/devdojo/pen/vYXyzwd %} This can easily be accomplished by adding some sprinkles of AlpineJS to our element. Let's begin. Creati...
Create a Typing Effect in AlpineJS
4
Select One:

Tony Lea

4 months ago

View Post

Hide AlpineJS Components with x-cloak

When using a javascript framework, you will most likely need a way to hide elements until they are fully rendered. This will reduce any flickering and it will create a better user experience. With AlpineJS we can use the x-cloak attribute to hide elements. It works kind of like the invisibility cloak from Harry Potter. If you pu...
Hide AlpineJS Components with x-cloak
5
Select One:

Tony Lea

4 months ago

View Post

TailwindCSS, Give Me Some Space

Recently, I started using the space utility classes in Tailwind, which gives you the ability to create equal space between elements. When I first started using Tailwind, I found myself reaching for mx-5, my-3, ml-2, and all the other awesome margin utility classes. There was nothing wrong with this; however, thereโ€™s a better way...
TailwindCSS, Give Me Some Space
5
Select One:

Tony Lea

4 months ago

View Post

Create a Blog in Laravel and Livewire

In this tutorial, we are going to walk-through creating a simple blog in Laravel and Livewire. It will be pretty simple and can be used as a starting point for building your blog with these awesome frameworks. To kick things off, we'll start by creating our new laravel application. Create a new Laravel app First, we'll create a...
Create a Blog in Laravel and Livewire
5
Select One:

Tony Lea

5 months ago

View Post

Tailwind V2 Released ๐ŸŽ‰

Tailwind version 2.0 has been officially released along with a fancy new website. You gotta check it out, this thing is impressive. There are some pretty cool things available in v2, which include: Focus Ring Feature The Focus Ring will allow you to add some fancy looking outline rings with box-shadow. These focus rings are goo...
Tailwind V2 Released ๐ŸŽ‰
5
Select One:

Tony Lea

5 months ago

View Post

Goto Previous File in VSCode

I love using the command palette in VS Code to jump to a specific file. You can open the palette with the keyboard shortcut Cmd+P and then start typing for the name of the file you are looking for. This is great! Unfortunately, when switching between two files you may get lost in a sea of tabs. Instead, I just learned a quick...
Goto Previous File in VSCode
4
Select One:

Tony Lea

5 months ago

View Post

Laravel Authentication vs Authorization

Laravel provides some really great features out of the box. Authentication and Authorization are just a few of them. If you are fairly new to application development and/or Laravel, these two features might get confusing to distinguish them apart. In this quick article, you will learn the basic difference between the two. First,...
Laravel Authentication vs Authorization
5
Select One:

Tony Lea

5 months ago

View Post

AdonisJS for Beginners

AdonisJS is a Node framework that feels a lot like Laravel. In fact, many of the features feel and act very similar to Laravel. In this quick tutorial, I'll show you how to get set up with a simple Adonis application and create a few routes. Let's begin. Installation Installing Adonis is as simple as installing an npm package. M...
AdonisJS for Beginners
6
Select One:

Tony Lea

6 months ago

View Post

Laravel Gates

Laravel Gates allows you to authorize users from accessing certain areas of your application. You can easily define gates in your application and then use them to allow or deny access. Let's start things off with a simple example of granting access without Gates, and then you'll see how we can use Gates as an alternative. Simple...
Laravel Gates
7
Select One:

Tony Lea

6 months ago

View Post

Laravel Eloquent Make

I recently learned about the Laravel Eloquent Make command, which allows you to create an Eloquent object without adding it to the database. To fully understand this, I'll start by creating a new Laravel app with a posts table. Create a new Laravel App We'll start things off with a new laravel application called blog. laravel ne...
Laravel Eloquent Make
8
Select One:

Tony Lea

6 months ago

View Post

Sharing State Between Livewire & Alpine

Laravel Livewire 2.0 was released a couple of months ago with some really cool features ๐Ÿ™Œ. One of which is the ability to share variable data between Livewire and Alpine! This is a really cool feature because it's as if your PHP variables can now be used as javascript variables in Alpine. How does it work By utilizing the new @e...
Sharing State Between Livewire & Alpine
8
Select One:

Loading More Content

Back to DevDojo