Andre's Larabits
Here, you'll find Andre Madarang's personal collection of Larabits. If you're unfamiliar, Larabits are short, isolated lessons that focus on a single concept or technique. While a typical series may take hours to work your way through, Larabits are instead for when you have five or ten minutes to pick up a small bit of knowledge.
Please keep in mind that each of these lessons is self-contained and may be viewed in any order. Happy learning!
Progress
Series Info
- Episodes
- 32
- Run Time
- 6h 58m
- Difficulty
- Intermediate
- Last Updated
- Aug 3, 2022
- Version
- Latest
Series Episodes
- Episodes (32)
How to Service Multiple API Clients with Laravel
A few months ago I created a mini-clone of Twitter using React Native and a Laravel API on the backend. In this Larabit, we'll take a look at how we can make use of Breeze's API scaffolding to allow our backend to serve web clients as well. We'll make use of the offical Next.js starter kit and fetch some data from our API. Finally, we take a look at React Native for Web, which allows us to make use of the components we wrote in React Native.Bundling Assets with Laravel Vite
Vite is now the default module bundler for new Laravel projects. Its best feature is an incredibly fast development server with Hot Module replacement. In this Larabit, we take a look at common scenarios where you want to make use of Vite to process your CSS and JavaScript assets.A New Kind of Static Site Generator
Astro is a static site generator that has quickly gained in popularity over the last year or so. It offers several stand-out features, including better performance, support for all the modern JavaScript frameworks, and a great developer experience backed by a growing community.In this Larabit, we take a look at some of its features including pages, layouts, components and data fetching.Bringing Page Transitions to the Web
Mobile apps have been making use of standard APIs for page transitioning for many years now. As a result, you’ll often see apps with beautiful animations and transitions between screens. We'll soon be able to leverage the same on the web, via the Page Transition API: a simple and intuitive API that utilizes existing tools like CSS animations. In this Larabit, we review an example of how the API looks, and what types of page transitions can be achieved.Web Share API
The Web Share API makes use of your browser's native share controls, if it is supported. If not, you can easily provide a fallback solution. In this Larabit, we take a look at an example of this, as well as manually implementing share controls when the API is not supported.Internationalization API in JavaScript
Internationalization and multiple locales can be tricky when it comes to numbers, currency, dates and plural rules. The Intl API aims to make this easier with a set methods that automatically format your words to the desired locale. In this Larabit, we take a look at some practical examples of how you might use it.Structuring your Web Apps - Monolith vs SPA
When it comes to structuring your web applications, the two most common approaches are the monolith approach and the single-page app approach. In this Larabit, we discuss both methods, the pros and cons of each approach, and some of the technologies you might make use of along the way.Modern Dates with the Temporal API
The Temporal API in JavaScript is set to replace the outdated Date object, which has been around for a long time. It's still in Stage 3 of the proposal but should hopefully land in browsers soon. In this Larabit, we'll take a look at some of its features, including multiple date formats, adding and subtracting dates, rounding, and formatting.5 New'ish CSS Properties
In this Larabit, we take a look at 5 newer CSS properties that have made it into the language. These include flex gap, aspect ratio, theisandwherepseudo classes, themarkerpseudo selector, and content visibility.Vitest Unit Test Framework
Vitest is a test runner that is powered by Vite. It offers features like hot module reloading, TypeScript and JSX Support, and mocking. It is the recommended tool for testing when working with a Vite project. In this Larabit, we'll take a look at using it within a Vue 3 project in order to test your components.CSS Subgrid
CSS Subgrid allows child grid items to align with the grid of its parent. This can result in making certain layouts easier to implement when making use of CSS Grid. Let's revies two examples to illustrate the basic concept.Enums in Laravel
Native Enums were added to PHP 8.1 and give us a place to store a collection of constants that don't change often. In this Larabit, we take a look at how to leverage Enums in a Laravel project, including Enum values, methods and validation.The New Stripe Payment Element
The Stripe Payment Element is an embeddable UI component that lets you accept multiple forms of payment in addition to credit cards. The previous Card Element is still available and working, but the documentation for it has changed.In this Larabit, we'll discuss how to use it to accept subscriptions with Laravel Cashier.Tips and Reminders Before Moving an App to Production
In this Larabit, we take a look at a few things you should be doing before moving your app to production. This can often feel overwhelming because there's so many things that can potentially be done. From image optimization to database backups, just try your hardest and launch that app!The State of Vue in 2022
In this Larabit, we take a look at the changes and improvements that Vue and its ecosystem has been going through since the release of Vue 3. We discuss the new documentation, Vite, Volar, Reactivity Transform and more.View Presenters using Traits
View Presenters allow you to store your presentation logic in a dedicated spot. In this Larabit, we take a look at using traits for your view presenters in an effort to clean up your models.The Null Object Pattern in Laravel
The Null Object Pattern is a pattern that helps get rid of conditional code by making use of null objects with no operations. In this Larabit, we'll take a look at a handful of examples that illustrate how this might improve and clean up our code.Dive into Laravel's Request Object
Let's take a look at some of the underlying source code for Laravel's request object. It leverages Symfony's HTTP Foundation package and adds functionality on top of it. As an exercise, we create our own custom request class and re-create some of the methods on Laravel's request object.Simplify Your JavaScript With These Array Methods
The map, filter, and reduce JavaScript methods allow you to write your code using a more functional approach. This results in cleaner and more readable code, and also has the added benefit of being chainable. Let's take a look at a few examples.Moving Around Quicker in VS Code
Let's take a look at a handful of shortcuts and extensions you can utilize to help you move around quicker in your code editor. We take a look at things like line moving, text selection shortcuts, faster cursor movement, Emmet shortcuts and more.Laravel Breeze API and Next.js
Laravel Breeze now ships with an option to only scaffold the API routes needed on the backend for authentication. Everything front-end related is no longer generated. The Laravel team also released a Next.js demo app to show how to make use of these endpoints from within a separate front-end project. In this Larabit, we take a look at how to combine the two.Simple Ways to Clean up a Massive Routes File
As your application grows, you'll find yourself with a large routes file. If you're not careful, it can quickly become unorganized and difficult to maintain. In this Larabit, we'll take a look at a few simple ways to keep your routes file clean.Make it Prettier
Prettier allows you to forget about formatting and just focus on your code. Not only does this save time, but it can also stop ongoing debates about the style of your code. Simply agree on a handful of style rules and let Prettier automatically format your code whenever you save your files.8 Tips for Formatting Dates with Carbon
Carbon is a wrapper around PHP’sDateTimeclass and provides a variety of useful functionality as well as a clean and readable API. In this Larabit, we'll take a look at a few tips for using Carbon within Laravel that can make working with dates more enjoyable.Vue Options API to Composition API
Let’s take a look at how we can convert the Options API to the Composition API in Vue 3. To demonstrate this, we’ll start off with a Todo app written with the traditional Options API, convert it over to the Composition API, and then make use ofscript setupto clean it up even more.How to Handle Address Autocompletion
When working with address text inputs, offering autocompletion makes for a much nicer user experience. In this Larabit, we’ll take a look at doing this with the Google Places API. We'll work through the full installation process, including how to get an API key, and how to extract address information from the places the user selects.Signed Routes in Laravel
In this Larabit, we'll take a look at using signed routes in Laravel to ensure that links are valid and may only be visited by users with the correct signature.To demonstrate this, we'll use the example of an application that requires users to confirm their appointments via email. We start off by generating a generic unsigned route that confirms an appointment. We then incorporate signed routes to ensure that only verified users can access this particular route.3 Useful Alpine Plugins
The latest version of Alpine now supports plugins that allow for additional functionality. In this Larabit, we'll take a look at three of these plugins: Intersect, Persist, and Trap. We'll work through the simple installation process, as well as review several practical examples of how you might use them within your applications.Laravel Factory Tips
In this Larabit, we'll take a look at some useful tips and tricks around factories, Faker, and seeders. When it comes to testing, I feel like some of these features are under-utilized and can make for a much better testing experience. Specifically, we'll review Faker modifier methods, factory states, sequences, and factory relationships.From PHPUnit to Pest
Pest is a wrapper around PHPUnit that's all about removing distractions and simplifying your tests as much as possible. In this Larabit, we start off with a typical blog application with existing PHPUnit tests, and then progressively convert them over to Pest tests. We’ll review the installation, its API, and finally some of the plugins available to give you the most enjoyable testing experience possible.Headless UI Quick Look
Built by the team at Tailwind CSS, Headless UI is a set of accessible unstyled UI components that already have functionality built-in. In this Larabit, we take a look at using a few of the available components and some of the options that are available to us. In the process, you'll see the power and flexibility it provides so you can customize the components exactly to your application's particular needs.Hello, Petite Vue
Petite Vue is an alternative distribution of Vue optimized for "sprinkling in" little bits of interactivity within your application. It's quite similar to Alpine.js, but follows Vue's syntax and features as much as possible. In this Larabit, we'll install and then take a look at a handful of examples that demonstrate its feature set. I think you'll like it!
