Dino Cajic’s CSS Hints
Dino Cajic’s CSS Hints

Let me begin by saying that I am a web-developer, not a web-designer. I’ve found that throughout my journey, someone has created what I’m looking for and they’ve done it better than I could have imagined. Normally they have the HTML/CSS readily available for you to tinker with and modify. However, there are a few things that still remain a mystery to quite a few people since I see the same types of Stack Overflow questions emerging each year.

Another problem that I’ve encountered is that most designers want to show how brilliant they are and will include an unnecessary amount of CSS inside of their stylesheets. …


What is an event? In plain English, it’s “a thing that happens.” An event can be triggered whenever something occurs in your code. Laravel will say “I just finished something and I’m letting everyone listening know. Whoever wants to do something because this event was triggered, go and do it.” Imagine that a user just purchased something. You may want to:

  • create an invoice
  • notify the administrator via email
  • notify the administrator via slack message
  • notify the customer via email
  • notify the customer via text message

If you tried to combine each of these tasks into one controller, you would be tightly coupling your code. Most programmers agree that decoupled code is the way to go. Your invoice controller should not know how to notify the administrator; it should only know how to manage invoices. …


Laravel comes with a Mailable class that you can use to send emails effortlessly with. A good example of when to use the Mailable class is when the user registers. Upon registration completion, a welcome email is sent to the user. To strip out all unnecessary code, we’ll create an application that sends an email every time that you visit a specific page.

Prerequisites

First, create a new application. If you need assistance, you can read my article on creating a new application below.

Next, lets use MailTrap.io to test our mailing. If you haven’t yet, open up a MailTrap account. Go to Inboxes and select your Inbox. Under Integrations, select Laravel. Copy the configuration settings into your project’s .env file. You’ll see that Laravel already pre-populates the MAIL_HOST with smtp.mailtrap.io


It can sometimes feel like the documentation skips a few steps here and there. Other times, the documentation can feel overwhelming. Let’s demystify this process.

Goals to accomplish:

  • Introduction to Homestead
  • Setup Homestead on Windows 10 for all of your websites
  • Create a Laravel 8 application
  • SSH into Homestead and create a database
  • Migrate database tables
  • Verify that everything is working: able to type in domain.test in our browsers.

Introduction to Homestead

The first step, of course is to go to the Laravel documentation. We’ll follow it throughout this article so that if something changes in the documentation in the future, you can spot it and adapt to it. …


If you’re just starting out with Laravel, some of the first few questions that you’ll come across are:

  • What is the difference between Seeders, Fakers, and Factories?
  • Should I use them?
  • Do I need to use all of them or can I use some of them?
  • How do I create them?

If you’re looking up the answers to these questions, I would assume that you have Laravel already installed. If you don’t, and don’t know how, you can follow the steps in my other article:

Factories

According to Laravel’s official documentation, “factories are classes that extend Laravel’s base factory class and define a model property and definition method.” Just think about it this way. If you’ve ever created a model, like the User’s model (App\Models\User), you’ll know that certain fields should be populated when you use the create() method. …


If you’re not familiar yet, Laravel 8 has gone away from the auth scaffolding and is instead embracing the JetStream package. Before you can use JetStream authentication, you’ll want to make sure that you have the latest versions of PHP, composer, and the laravel installer on your system.

PHP

Make sure that you have the latest version of PHP installed. Laravel requires a PHP version greater than 7.3 as of the time that I’m writing this. Visit the official Laravel documentation to see the latest requirements.

Since there are so many ways to install PHP onto your system, I’ll leave it up to you to Google how to upgrade your PHP to the latest version. With Windows users, you’ll most likely be using WAMP or XAMPP (if you’re not using Homestead). Search for how to upgrade to the latest version of PHP for your option and then search for how to edit the environmental variable to add the latest version to the path so that it’s accessible in CMD. …


If you’ve looked at React code before, there’s almost a 100% chance that you’ve seen destructuring. If you look at most import statements for class-based components, you’ve more than likely seen something like this:

import React, { Component } from 'react';class ClassName extends Component { ... }

The { Component } is an example of destructuring. If we didn’t use destructuring, we would have had to use the following syntax in our class declaration:

import React from 'react';class ClassName extends React.Component { ... }

What exactly is destructuring? It’s just a way to extract multiple keys from an object or an array and assign them to a variable. …


I contemplated even doing a JSX tutorial since it resembles HTML syntax so much. There are a few differences I guess that we do need to cover though. JSX stands for JavaScript XML. You don’t have to use JSX in React, but it is a heck-of-a-lot easier to use than the alternative.

Let’s create a new component and ruffle some feathers at the same time. Under src/components create a new functional component called WhyMenShouldntWearSkinnyJeans.

Image for post
Image for post

Import the component into App.js and render it.

If you take a look at the result in your browser, you’ll see your rendered component (npm start). …


We covered class components in the previous article. We created a couple of Jim Carrey movie components and we stopped there since we didn’t want to keep creating new movie components for each Jim Carrey movie.

It would be beneficial if we had one component that allowed us to render any movie that Jim Carrey appeared in by passing in the movie name as the argument. If you’ve been following along, passing arguments should not be a new concept for you in React. …


In the two previous articles we looked at functional components.

Although the React team seems like they want to move away from class-based components, they’re still here. As a side note, I like and prefer class components. We’ve touched on class components in the Deeper Intro article.

A class based component is a class that extends React.Component and contains a render() method that returns a JSX element. We can convert functional components into class components pretty easily.

Let’s create a class component that lists a movie where Jim Carrey was awesome. We’ll start by creating a Sonic.js file inside of our src/components directory. …

About

Dino Cajic

Author of An Illustrative Introduction to Algorithms. A Software Engineer with a B.S. in Computer Science, a minor in Biology, and a passion for learning.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store