Posts
AniJS: Easy CSS Animations Without Coding
Many people want to add subtle animations to their website in response to clicks or other actions by their visitors. However, not everyone is well-versed in using CSS or JavaScript. Some just know how to modify the HTML and have the change reflect on the website. Generally, this is the part where developers take over and add the necessary JavaScript and CSS to make your website stand out. However, if you want to be able to build an animated site yourself, without coding, a library called AniJS would help a great deal. AniJS lets you create animated styling for your website without any JavaScript or CSS coding! You can specify all your animations from HTML using a simple If - On - Do - To syntax. Installation Before you can begin animating the elements on your webpage using data-anijs attributes, you will have to include the necessary files. Three different files are needed to access all the functionality of AniJS. These files are the core JS library , the CSS file for the ...
How to Create Custom CLI Commands Using the Symfony Console Component
In this article, we're going to explore how you could create custom command-line interface (CLI) commands in your PHP applications using the Symfony Console component. After installing the necessary libraries, we'll create a few handful of examples to demonstrate the concepts of the Console component. In fact, this component is used by several PHP frameworks to develop CLI applications, and a few popular frameworks are already using this component as a starting point. What Is the Console Component? The Symfony Console component allows you to create custom CLI commands in your PHP applications. If you have ever worked with Laravel or Symfony, you might be aware of the CLI tools they provide in order to ease day-to-day operations like: generating scaffolding code clearing caches installing, enabling and disabling add-on services running database migrations and more In the case of Laravel, for example, it comes with the artisan tool which provides plenty of utility com...
Set Up Routing in PHP Applications Using the Symfony Routing Component
Today, we'll go through the Symfony Routing component, which allows you to set up routing in your PHP applications. What Is the Symfony Routing Component? The Symfony Routing Component is a very popular routing component which is adapted by several frameworks and provides a lot of flexibility should you wish to set up routes in your PHP application. If you've built a custom PHP application and are looking for a feature-rich routing library, the Symfony Routing Component is more than a worth a look. It also allows you to define routes for your application in the YAML format. Starting with installation and configuration, we'll go through real-world examples to demonstrate a variety of options the component has for route configuration. In this article, you'll learn: installation and configuration how to set up basic routes how to load routes from the YAML file how to use the all-in-one router Installation and Configuration In this section, we're going to in...
Secure, Passwordless Authentication Using Auth0
In this article, you'll learn how to set up passwordless authentication using the Auth0 service. Auth0 allows you to outsource authentication features for your app. What Is Auth0? Auth0 is an authentication-as-a-service tool that makes implementation of authentication-related features for your app or site a breeze. If you've built an app and you want to just outsource the authentication and authorization features, a service like Auth0 is something you should consider. Let me quickly summarize what Auth0 has to offer: single sign-on multi-factor authentication passwordless logins user management and much more! Initial Setup In this section, we'll go through the initial setup in preparation for setting up the passwordless authentication. Before moving ahead, make sure to install Composer as that will be used to install actual Auth0 SDKs using the composer.json file. Also, if you want to follow along with the examples in this article, go ahead and get yourself a ...
Parsing HTML With PHP Using DiDOM
Every now and then developers need to scrape webpages to get some information from a website. For example, let's say you are working on a personal project where you have to get geographical information about the capitals of different countries from Wikipedia. Entering this manually would take a lot of time. However, you can do it very quickly by scraping the Wikipedia page with the help of PHP. You will also be able to automatically parse the HTML to get specific information instead of going through the whole markup manually. In this tutorial, we will learn about an easy to use and fast HTML parser called DiDOM . We will begin with the installation process and then learn how to extract information from different elements on a webpage using different kinds of selectors like tags, classes etc. Installation and Usage You can easily install DiDOM in your project directory by running the following command: composer require imangazaliev/didom Once you have run the above command, yo...
The Quirks of CSS Grid and Absolute Positioning
It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, so let’s take a quick look to make sure you avoid the pitfalls. Simple Relative Positioning Let’s begin with a simple grid, with nine items, laid out in three columns. Each column is 1fr wide, except the third column which (thanks to minmax() ) will shrink no smaller than 160px: grid-template-columns: 1fr 1fr minmax(160px, 1fr); By adding a couple of rules to one of the items, we can position it relatively: .item-2 { position: relative; right: 100px; top: 30px; } So just like we might expect, we declare that item-2 is to be positioned relatively, then define some offset properties (though don’t try using the fr unit on these, it won’t work). You’ll notice, if you resize the window, that the grid item continues to behave (resize) exactly as it was before we repositioned it, and it’s still, selfishly, reserving its place in the ...