Frontend Flashcards
What is Laravel Mix?
Laravel Mix provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors
By default, the Laravel application skeleton does not include the lang directory. If you would like to customize Laravel’s language files, how can you publish them using Artisan?
php artisan lang:publish
How is the handling of different languages handled in Laravel?
In the lang directory, files may be stored in their own subdirectories for each language supported by the application. This is the approach Laravel uses to manage translation strings for built-in Laravel features such as validation error messages.
If you, for example, want to support English and Spanish for a messages.php file, you could have the directories lang/en/messages.php and lang/es/messages.php
Translation strings may be defined within JSON files that are placed within the lang directory directly. When taking this approach, each language supported by your application would have a corresponding JSON file within this directory. This approach is recommended for applications that have a large number of translatable strings.
In the config/app.php file the default language for your application is stored under its locale configuration option. Which environmental variables are used to set the default and fallback languages and what is the point of having a fallback language?
APP_LOCALE is used to set the default language and APP_FALLBACK_LOCALE is used to set the fallback language. The point of having a fallback language is that you may not have translated every single string out of the language you developed the software in and in case of you not setting a translation up, you may prefer for it to for example display the English text if there isn’t a valid German translation for a string, so that there isn’t just nothing and a lot of users will still be able to tell what they are supposed to be told.
Which method of the App facade is used to determine if the current language is a certain specified language?
App::isLocale('en')
en is just an example here, just use the language code of your language
Eloquent will often automatically pluralize singular strings, but that always happens in English by default. How can you change this language?
(in boot method of AppServiceProvider)Pluralizer::useLanguage('spanish');
If you customize the pluralizer’s language, you should explicitly define your Eloquent model’s table names.
This is not something that you have to learn, but just for your info, the only languages currently supported are:
French, Norwegian-Bokmal, Portuguese, Spanish and Turkish.
All language files return an array of keyed strings. If you want to localize the welcome in the English version of a file, how can you do that?
<?php
// lang/en/messages.php
return [
'welcome' => 'Welcome to our application!',
];
Now, if you just call the “welcome” key, it will use the defined welcome in the dedicated localization file of the language.
For applications with a large number of translatable strings, defining every string with a “short key” can become confusing when referencing the keys in your views and it is cumbersome to continually invent keys for every translation string supported by your application. How would a translation string in a JSON look and what is the advantage of using JSON?
(in this example, i am giving the spanish translation for an english site. this would be stored in lang/es.json)
{
"I love programming.": "Me encanta programar."
}
Now, if the English site would have the sentence “I love programming.”, but the localization is set to spanish, it would use that text as long as the JSON it is in is called the correct thing for the corresponding language.
How can you check the translated versions of strings?
Using short keys:echo \_\_('example.welcome');
This would retrieve the welcome translation string from the lang/en/example.php file. If the translation does not exist, this would just return the key so in this case “example.welcome”
Using JSON:echo \_\_('I love programming.');
Again, if the translation string does not exist, the \_\_ function will return the translation string key that it was given.
instead of the echo, you can do either option like this using blade:{{ \_\_('messages.welcome') }}
How can you define placeholders in your translation strings?
All placeholders are prefixed with a :
For example, you may define a welcome message with a placeholder name:'welcome' => 'Welcome, :name',
How can you replace placeholders in your translation strings?
To replace the placeholders when retrieving a translation string, you may pass an array of replacements as the second argument to the \_\_ function:echo \_\_('messages.welcome', ['name' => 'dayle']);
If your placeholder contains all capital letters, or only has its first letter capitalized, the translated value will be capitalized accordingly:
'welcome' => 'Welcome, :NAME', // Welcome, DAYLE 'goodbye' => 'Goodbye, :Name', // Goodbye, Dayle
Pluralization between languages can be difficult due to the different rules of different languages. How can you, for your localized versions of your webpage, include different localizations?
Using a | character, you may distinguish singular and plural forms of a string.
For example:'apples' => 'There is one apple|There are many apples',
Of course, you can also use that when working with JSON localizations.
While making a localization it may be relevant to change the translation based on a given variable. Implement an example pluralization that uses different strings for different numbers of an example object.
'apples' => '{0} There are none|[1,19] There are some|[20,*] There are many',
You may also define placeholders while using multiple different tiers of pluralization
After defining a translation string that has pluralization options, how can you check which translation would be chosen for a specific value?
echo trans_choice('messages.apples', 10);
When a package, that may ship with its own language file, has translations, that you would like to change, you shouldn’t dig around in the packages files to find the localization translations but instead do what?
Overriding language files that a package ships with works by placing files in the lang/vendor/{package}/{locale} directory.
For example, if you need to override the English translation strings in messages.php for a package named skyrim/hearthfire, you should place a language file at:
lang/vendor/hearthfire/en/messages.php
Any translation string that you do not override will still be loaded from the package’s original language files
Which file extension do blade template files use?
.blade.php
How can you display data that is passed to your Blade views easily?
{{ $variable }}
You are not limited to displaying the contents of the variables passed to the view. You may also echo the results of any PHP function. In fact, you can put any PHP code you wish inside of a Blade echo statement:
The current UNIX timestamp is {{ time() }}.
Since many other JavaScript frameworks also use curly braces ( {} ) , how can you indicate to Blade that something is not meant to be interpreted by Blade?
By putting an @ symbol in front of it, you can tell blade that an expression is to remain untouched by the Blade engine. Blade will remove the @ symbol and leave it for the relevant framework to interpret.
Example:
Hello, @{{ name }}.
Using Blade, write a pseudo code snippet that only gets executed, if the application is running in a production environment!
@production
// Insert code here, that is to only be run in production
@endproductionHow can you create a switch statement in Blade?
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitchHow can you include a Blade view from within another Blade view and what is the point of doing that?
You can include a different Blade view into your by using @include(‘view_name’)
If there is an element that is to be included into multiple subpages but is exactly or nearly the same on all of the sites, then just creating it once and then including it in the other Blade views reduces the amount of unnecessary code and makes changes apply to every subpage that uses the parent instead of needing to implement the changes in every single subpage
If there is something that you want to include into a loop of any kind, that is only supposed to be ran once even if the loop runs more often, how can you implement that?
@once
// Include code to be ran a single time
@endonceWhat can you implement into your Blade template to run a snippet of raw PHP?
@php // insert PHP code @endphp
Import the Model “App\Models\Flight” using Blade and give it the alias “FlightModel”!
@use('App\Models\Flight', 'FlightModel')
If you want to import something without giving it an alias, you don’t actually have to provide the second argument of the @use statement, but it can be very helpful to make the rest of the code more easily readable.
What is the difference between class based components and anonymous components?
An anonymous component only has a Blade template and does not include a class, which the class based component does have.
Given a component called “package-alert”, that has already been registered, how can you render it in your Blade files?
<x-package-alert></x-package-alert>
the x- always has to be put in front of the components name and if you don’t want to put anything into the component, you can close it right away and just have the one line given here to fully implement the component.
By default, Blade (and the Laravel e function) will double encode HTML entities. How can you disable double encoding?
If you would like to disable double encoding, call the Blade::withoutDoubleEncoding method from the boot method of your AppServiceProvider:
class AppServiceProvider extends ServiceProvider
{
public function boot(): void
{
Blade::withoutDoubleEncoding();
}
}
By default, Blade {{ }} statements are automatically sent through PHP’s htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, what do you need to do differently?
You may use the following syntax:Hello, {!! $name !!}
Be very careful when echoing content that is supplied by users of your application. You should typically use the escaped, double curly brace syntax to prevent XSS attacks when displaying user supplied data.
How can you construct if statements in Blade?
@if (count($records) ===1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
For convenience, Blade also provides an @unless directive:
@unless (Auth::check())
You are not signed in.
@endunless
Which Blade directives can you use to quickly determine if the current user is authenticated or is a guest?
@auth
// The user is authenticated...
@endauth
@guest
// The user is not authenticated...
@endguestHow can you check if a user is allowed to do or see something using authentication guards in Blade?
You may specify the authentication guard that should be checked when using the @auth and @guest directives:
@auth('admin')
// The user is authenticated...
@endauth
@guest('admin')
// The user is not authenticated...
@endguest
Create an infinite while loop using Blade!
@while (true)
<p>I'm looping forever.</p>
@endwhileHow can you create a loop in Blade, that works like a foreach loop but also has a specific case for if the input it is supposed to iterate through is empty?
@forelse ($users as $user)
<li>{{ $user->name}}</li>
@empty
<p>No users</p>
@endforelseCreate a simple for loop that counts from 0 to a given number!
@for ($i = 0; $i < INSERT VALUE; i++)
The current value is {{ $i }}
@endforHow can you create a loop in Blade that displays the name of every user within a given $users array?
@foreach ($users as $user)
<p>This is {{ $user->name }}</p>
@endforeachHow can you check if the current iteration of the currently running loop is the first or last iteration of said loop?
While iterating through a foreach loop, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:
@if ($loop->first)
This is the first iteration.
@endif
If you are in a nested loop, you may access the parent loop’s $loop variable via the parent property:
@foreach ($users as $user)
@foreach ($user->posts as $post)
@if (loop->parent->first)
This is the first iteration of the parent loop.
@endif
@endforeach
@endforeach
How can you check how many iterations of a loop are remaining?
$loop->remaining
How can you check if a checkbox is checked?
@checked(old('active', $user->active))
This directive will echo checked if the provided condition evaluates to true.
How can you include a Blade view from within another view?
You may use Blade’s @include directive.
All variables that are available to the parent view will be made available to the included view:@include('shared.errors')
Even though the included view will inherit all data available in the parent view, you may also pass an array of additional data that should be made available to the included view:@include('view.name', ['status' => 'complete'])
What happens if you attempt to @include a view which does not exist and how can you prevent it?
If you try to @include a view which does not exist, Laravel will throw an error. To prevent this, use @includeIf instead of @include, which uses the same syntax.
How can you @include something only if a certain condition is met or not met?
@includeWhen($boolean, ... @includeUnless($boolean, ...
after the first argument, which is the condition that is being passed, you can just include whatever you want to using the normal syntax.
What is the major difference between Blade comments and HTML comments in the HTML returned by your application?
Unlike HTML comments, Blade comments are not included in the HTML returned by your application:{{-- This comment will not be present in the rendered HTML --}}
If you are building a package that utilizes Blade components, you will need to manually register your component class and its HTML tag alias. Where should you typically register your components and how can you render a registered component?
In the boot method of your package’s service provider:
public function boot(): void
{
Blade::component('package-alert', Alert::class);
}
Once your component has been registered. it may be rendered using its tag alias:<x-package-alert/>
Which casing do blade components use and how can you display a component that is within the subfolder of the components directory?
Blade components are written in kebab-casing and to access components out of subfolders you use dot notation, for example let’s access a component called Button.php that is in the Inputs subfolder of the components directory:
<x-inputs.button></x-inputs.button>
How can you pass data to blade components?
You may pass data to Blade components using HTML attributes. Hard-coded,primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix:<x-alert type="error" :message="$message"/>
How can you shorten the passing of data to Blade components using short attribute syntax?
{{-- Short attribute syntax... --}}
<x-profile :$userId :$name />
{{-- Is equivalent to.. --}}
<x-profile :user-id="$userId" :name="$name" />
This works if the passed attributes have the same name in camelCasing, as the HTML / PHP tags have in kebab-casing
Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, how can you inform Blade that an attribute is not a PHP expression?
You may use a double colon (::) prefix. For example, given the following component:
`
<x-button ::class=”{ danger: isDeleting }”>
`
The following HTML will be rendered in Blade:<button :class="{ danger: isDeleting }">
How can you prevent some public methods or properties from being exposed as variables to your component template?
You may add them to an $except array property on your component:
class Example extends Component
{
protected $except = ['type'];
}
What is an anonymous component and what is the difference between inline components and anonymous components?
Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class, while inline components don’t have a dedicated view file and just have their one class in which they use the render method to define their view. To define an anonymous component, you only need to place a Blade template within your resources/views/components directory.
Since anonymous components do not have any associated class, it may initially seem confusing how you may differentiate which data should be passed to the component as variables and which attributes should be placed in the component’s attribute bag. How can you specify which attributes should be considered data variables?
You may do so by using the @props directive at the top of your component’s Blade template. All other attributes on the component will be available via the component’s attribute bag. If you wish to give a data variable a default value, you may specify the variable’s name as an array key and the default value as the array value:
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
Sometimes you may want to access data from a parent component inside a child component. What should you use instead of @props in that case?
The @aware directive will make every prop passed to the parent also available to the child component.
Instead of creating the same layout in every single subpage, how can you use Blade to build a layout that can be used by every page requiring it?
We might define a layout component (resources/views/components/layout.blade.php for this example. but it could have any other name) that includes our basic layout, to oversimplify for the sake of an example:
<html>
<head>
<title>{{ $title ?? 'Example Page }}</title>
</head>
<body>
<h1>Examples</h1>
<hr/>
{{ $slot }}
</body>
</html>
Once the layout component has been defined, we may create a Blade view that utilizes the component. In this example we could do something like this:
<x-layout>
@foreach ($examples as $example)
<div>{{ $task }}</div>
@endforeach
</x-layout>
When defining a child view, how can you specify the parent view to inherit everything from?
When defining a child view, use the @extends Blade directive to specify which layout the child view should “inherit”. Views which extend a Blade layout may inject content into the layout’s sections using @section directives.
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
Anytime you define an HTML form in your application, you should include a hidden CSRF token field in the form so that the CSRF protection middleware can validate the request. Which Blade directive can generate the token field for you?
@csrf
Since HTML forms can’t make PUT, PATCH, or DELETE requests, you will need to add a hidden _method field to spoof these HTTP verbs. How can you create this field using Blade?
The @method Blade directive can create this field for you:
<form action"/foo/bar" method="POST">
@method('PUT')
...
</form>
Blade allows you to push to named stacks which can be rendered somewhere else in another view or layout. This can be particularly useful for specifying any JavaScript libraries required by your child views. How can you do that?
@push('NAME OF STACK')
<script src="/example.js"></script>
@endpush
or if you want it to be conditional
@pushif($condition, 'NAME OF STACK')
<script src="/example.js"></script>
@endPushIfHow can you push something to the beginning of a stack?
@push('scripts')
This will be second...
@endpush
// Later...
@prepend('scripts')
This will be first...
@endprependHow can you create your own Blade directives?
Blade allows you to define your own custom directives using the directive method. When the Blade compiler encounters the custom directive, it will call the provided callback with the expression that the directive contains.
The following example creates a @datetime($var) directive which formats a given $var, which should be an instance of DateTime:
class AppServiceProvider extends ServiceProvider
{
public function boot(): void
{
Blade::directive('datetime', function (string $expression) {
return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
});
}
}
After updating the logic of a Blade directive, you will need to delete all of the cached Blade views. The cached Blade views may be removed using the view:clear Artisan command.
