We will build an angular image gallery application with Infinite Scroll from scratch using Angular 4 with Firebase! We will set up all of the components and services for our project and integrate the application to firebase. We will learn how to create firebase database manually and way to implement infinite scroll to our angular app.
We will asynchronously combine multiple array observables from AngularFire2 and then display them in a component based on the user’s scroll position.
Theme customizer is an awesome feature that allows you to change theme’s settings like color, font size background image, what menu should be shown on your website etc. with a live preview.
This course series includes six videos. Hope you enjoy them.
Introduction to course series “WordPress tips, tricks and hacks”
Before starting with the course “WordPress tips, tricks and hacks” I would like to thank you for choosing me to train you on this topic.
Why I made this course?
When I am on the internet surfing through different awesome looking websites, most of the time I come across a feature on a website, and then I just start thinking : How can I get this on my WordPress website as well. And if you are a crazy wordpress developer then I bet you have experienced the very same feeling too. There are times when you want a feature which you just saw, but do not know where to look for the tricks, or even what tricks to look for. In this tutorial I will be sharing a few of such WordPress Tips, Tricks, and Hacks that I found very useful for myself and I can assure that you will definitely find it useful too. And most importantly it is fun. That’s why I made this course, to have some fun.
I believe that this course is for advanced wordpress developers who already have knowledge of wordpress. So, if you do not have basic knowledge of wordpress then I would strongly suggest you to learn the basics and return here.
Till today I am having 4 courses on my youtube channel and in the BG web agency website training library and this is going to be the fifth course that I will be doing. And I want to say that, I am most excited about this course as compared to the other four courses that I have here. Because this course has got everything an advanced wordpress developer needs to learn.
In every video tutorial, I will be sharing you few wordpress tips, tricks and hacks. And to show you how the trick works, I will be using some code. You can download the source code for all the videos from the official website for BG web agency. And if you have any doubt or questions or complaints, you can post them in the comment section for the youtube video or on my website.
Having said that, I hope you are now fully excited about this new course on “WordPress Tips, Tricks and Hacks”.
PART 2:
Adding sections and fields to user profile page
The user profile page is the page in the back end of a wordpress installation that helps you manage your wordpress users which includes managing admins, editors, subscribers,contributors and authors. WordPress comes out of the box with some fields that you can manage. Like the name, email and website details and etc.
But what if you want to add more fields to this form? For example say that when a user is added to your website you want the user to mention it’s designation also. Or maybe a field to mention date of birth of the user.
Well, in this tutorial I am going to show you how to do this with the help of a demo.
In this tutorial I am going to show you how to use a filter called “the_filter”. “the_filter” is as the name says a filter hook which allows you to filter anything in wordpress. In my case here, I will be filtering the content on my wordpress website.
I guess you already know how to create a post or page by using the admin area of your wordpress website. In this tutorial I am going to show you how to create a post or a page programmatically. Now, you might be thinking why would you need to do that. WordPress already have a nice admin section to create posts and pages then what is the need of adding posts and pages from somewhere else. The reason is, maybe you have a scenario where you do not want a particular user to access your wordpress backend. So, what you can do is create a form in the front end of your website and through that form you can allow the user to insert a post or page programmatically.
To do this, we are going to use a function called wp_insert_post(). To demonstrate how the function works, I will be showing you a simple example to create posts and I expect you to take this knowledge further and implement with forms or anywhere you want for your project.
WordPress by default shows you the posts in reverse chronological order, which means it shows you the latest posts on the top and the older ones later.
But have you ever wanted your website to have this cool feature to display random posts every time your visitor arrives? So that each time the visitor refresh the page, it will deliver a new post. Well in this tutorial I am going to show you how to do that.
In most of my wordpress themes, I always display some guidelines or rules on backend of my wordpress website. What I do is, I display a message box right on the top of every pages in the backend. So, in this tutorial I am going to show you how to display notices on each page of your wordpress backend and then I will also show you how to write conditional statements so that the notices shows only on particular pages and not appear on each and every page.
In order to display the notices we will be using an action hook called all_admin_notices.
Have you ever wondered how to display relative dates on your wordpress website? Actually it is pretty easy.
All You would need to do is download a plugin called WP-Relative Date.
Once you have downloaded and activated the plugin, the date and time for posts on your wordpress website is automatically going to switch to relative mode.
In case you want to display the relative date or time anywhere inside of your post or in your code then you can use the shortcodes:
For relative date:
[relativedate date_format="jS F Y" ago_only="false"]
Introduction to the course series “Learn LESS and SASS with CSS“
Learn LESS and SASS with CSS to take your development skills to the next level.
LESS and SASS are two amazing tools to create features that you always wished to have in CSS.
In this course series(“Learn LESS and SASS with CSS“), I will be covering :
how to install the tools required for LESS ans SASS,
how to use the tools to build CSS code using features like: variables ( variables helps you to create your style rule just once and use them again and again through out your stylesheet.), mixins ( mixins are reusable classes.), functions and mathematical operations.
PART 2:
Just CSS versus CSS with LESS and SASS
In this tutorial of the course series “Learn LESS and SASS with CSS“, I will be discussing the reasons to use LESS and SASS with CSS. And why using just CSS is boring.
CSS is an amazing language. No doubt about that. But it do have some disadvantages. Let me list some of them for you here :
No solutions for defining common re-usable style. Suppose you have a few common style rule sets which you want to repeat on your site. In CSS you just have to rewrite them every single time. But with LESS and SASS you can do that.
No mathematical operations or calculations can be performed using CSS. But LESS and SASS helps us do that.
We can not define variables in CSS. Variables are values that are defined just once and then can be re-used again and again through out your style sheet. Say for example you need a specific border-radius of 3 pixels for all your buttons on your website. If you use just CSS, then you have to assign 3 pixels to each and every button and in future if you want to change the border radius to 5 pixels then again you have to change it in every place. But with variables you just have to do it once.
CSS is difficult to track for larger websites. But LESS ans SASS helps you track it easier and better.
So, what is LESS and SASS?
Both SASS and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.
LESS and SASS provide advanced CSS features.
Ofcourse SASS and LESS are higher-level style syntaxes.
Both LESS and SASS are rendered or compiled into standard CSS before the browser renders the page. And do not worry my friends, you do not have to compile anything. You just have to write the code and there are compilers that converts LESS and SASS to normal CSS and renders them to browsers.
PART 3 :
Setting up tools for LESS and SASS
In this tutorial of the course series “Learn LESS and SASS with CSS“, I will be taking you through the process of downloading and installing tools for LESS and SASS .
The first thing to download is SASS and LESS libraries.
For setting up SASS, You will have to additionally install Ruby but if you are a mac user then you do not have to install ruby as it comes pre-installed.
For client side compilation of LESS, I will be using SimpLESS for my windows environment. If you are a mac or windows user then you can use SimpLESS.
Download and install client side LESS compiler SimpLESS.
PART 4 :
Your first LESS example – Getting you up and running
In this tutorial of the course series “Learn LESS and SASS with CSS“, I will be helping you build your first LESS example. I will be demonstrating you a simple example just to showcase what LESS can do. And I do not expect you to understand everything from it. The whole purpose of this video is to just get you excited, up and running with LESS by giving you an idea of the kind of things that you can do using LESS.
In the previous tutorial of the course series “Learn LESS and SASS with CSS“, I did show you how to use the LESS javascript file to compile LESS style rules. In this tutorial, I will be showing you how to use the client side compiler SimpLESS to compile my LESS code. Note that SimpLESS is just a client side compiler and whatever I am going to show you in this tutorial is about compilation on client side. The server side compilation is different but I am not going to cover that in this course.
For me, variables are one of the amazing features for which I switched from using just plain old CSS to use LESS or SASS.
So, what are variables? Variables holds some values that we can use in several different places. Variables can hold strings, numbers, colors and what not.
In LESS a variable is declared with a prefix of @ character.
Mixin is another amazing feature from LESS. A mixin lets you define common properties just once and then re-use them again and again through out your style sheet.
A mixin is defined in a very similar way how you would define any other CSS rule set. Let me jump straight to an example and show you how a mixin is created and re-used.
So far in this tutorial I have been using LESS to reorganise my CSS structure. We have seen variables, mixins and nested rules so far which just lets you restructure the CSS. But now I am going to show you how to do mathematical operations with the help of LESS.
So, the happy news for you is that: using calculations and mathematical operations in your CSS file is possible through LESS.
In this tutorial I am going to show you how to pass arguments for mixins. In the part 7 of this series we have already looked at basic usage of mixins with no arguments. So, I would like to jump to a much advanced topic to show you how to use arguments with mixins.
A mixin with arguments is called “parametrized mixin“.
In the previous tutorial of the course series “Learn LESS and SASS with CSS“, we discussed how to pass parameters as arguments to a mixin. In this tutorial, I am going to show you how to pass multiple parameters as arguments to mixin.
In this tutorial of the couse series “Learn LESS and SASS with CSS“, I am going to show you how to use the arguments keyword with mixin.
In addition to passing parameters that are named and then using those names through out your the mixin class, LESS also provides an easier and simpler way to do this using the arguments parameter.
You can use the argument parameters when you want to use the arguments as they are listed in order through out your mixin class.
The LESS library provides a bunch of functions for working with some common situations that you are going to find yourself in when using some of the features of LESS.
The first list of functions that I would like to share is:
Color functions:
These functions can be used to manipulate the values of colors on your stylesheet.
darken(color, amount), is used to darken the color.
lighten(color, amount), is used to lighten the color.
fadein(color, amount), is used to control the alpha transparency of color.
fadeout(color, amount), is used to control the alpha transparency of color.
fade(color, amount), is used to control the alpha transparency of color.
mix(color1, color2), is used to mix two colors together.
spin(color, degrees), is used to spin an input color with a certain degrees on the color wheel and comes up with a new color.
saturate(color, amount), is used to control the saturation level of color.
desaturate(color, amount), is used to control the saturation level of color.
Color functions:
These functions are used to extract values from certain colors.
saturation(color)
lightness(color)
hue(color)
alpha(color)
These functions, when given a color will convert the color to hsl and then give you a value based on the function that you are using.
And there are also math functions.
Math functions:
round(number), rounds up the decimal number to give you an integer.
ceil(number)
floor(number), ceil and floor functions gives you the next closest integer number when a decimal number is given to it.
percentage(number), will come up with a percentage value when given an input number.
Let’s jump to the demo now to see some of the mentioned functions in action.
In the earlier tutorials of the course series “Learn LESS and SASS with CSS“, we have discussed how to define mixins. In this tutorial, I am going to show you how mixins in LESS can also be defined with an advanced feature called “Pattern matching”.
Let me show you how to do pattern matching with the help of an example. Before proceeding with the tutorial, if you want the source code for this tutorial, you can download it from below mentioned link.
In the first 15 tutorials of this course series “Learn LESS and SASS with CSS“, I have been discussing about LESS. From this tutorial, We are going to start with SASS.
So, What is SASS?
SASS is a pre-processor, which takes code written in SASS syntax and then converts it into standard CSS before the code is uploaded to your website. Any detailed or official information can be found from the official website for SASS.
SASS comes in two different versions.
SASS with .scss extension: SCSS is a superset of CSS3 syntaxes. Which means that if you are writing your style rules in CSS3 standards then it is validated as SCSS.
Older version: with .sass extension. Which is rarely being used any more. So, if you see a project which is using .sass syntax then it is an older version and not preferred any more.
Currently the scss version is being use and that’s what I am going to discuss in my course series. But if you want to learn about the older version of SASS then please go through the official documentation on their website.
In order to learn SASS, you should be familiar with the command line. So let me take you to the demo on command line.
PART 17 :
Variables in SASS
In this tutorial of the course series “Learn LESS and SASS with CSS“, I am going to show you how to use variables in SASS. SASS variables are declared using a $ character. There are six types of variables:
numbers, e.g. $myFontSize : 15px;
colors, e.g. $myColor : red;
nulls, e.g. $myVar : null;
booleans, $myBool : true;
lists or multi-value variables, lists variables can contain more than one values, e.g. $myBorder : 1px solid black;
strings, $myString : ” this is a string my friend! “
Let me take you to the demo to show you how to use them in your stylesheet.
Mixins lets you define a common set of properties just once, and then use them again and again through out your stylesheet. In order to define a mixin in SAAS, you have to use the @mixin directive. And then in order to use the mixin there is another directive @include that you will have to use. So, having that in mind, let’s jump to the demo.
In part 19 of this course series “Learn LESS and SASS with CSS“, we have already discussed how to use mixins. In this tutorial, I will show you how to use mixin with arguments. And to learn that please watch the demo.
The SASS library provides a bunch of functions for working with some common situations that you are going to find yourself in when using some of the features of SASS.
The first list of functions that I would like to share is:
Color functions:
These functions can be used to manipulate the values of colors on your stylesheet.
darken(color, amount), is used to darken the color.
lighten(color, amount), is used to lighten the color.
fadein(color, amount), is used to control the alpha transparency of color.
fadeout(color, amount), is used to control the alpha transparency of color.
fade(color, amount), is used to control the alpha transparency of color.
mix(color1, color2), is used to mix two colors together.
saturate(color, amount), is used to control the saturation level of color.
desaturate(color, amount), is used to control the saturation level of color.
Color functions:
These functions are used to extract values from certain colors.
saturation(color)
lightness(color)
hue(color)
alpha(color)
grayscale(color)
complement(color)
invert(color)
These functions, when given a color will convert the color to hsl and then give you a value based on the function that you are using.
And there are also math functions.
Math functions:
round(number), rounds up the decimal number to give you an integer.
ceil(number)
floor(number), ceil and floor functions gives you the next closest integer number when a decimal number is given to it.
percentage(number), will come up with a percentage value when given an input number.
abs(number)
min(n1, n2, …)
max(n1, n2, …)
Let’s jump to the demo now to see some of the mentioned functions in action.
I believe that you already know that normal css provides you a way to import one css file in another css file. In the exact same way you can import a SASS file in another SASS file too. Well,what is the benefit of using import feature? The benefit is it lets you organize your stylesheeet in a better way, let’s say for example: by defining the common variables in a style sheet and then importing that file in other stylesheet when needed. So, let’s see how this works with the help of an example.
SASS also provides you different options to control how the .scss file is formatted when compiled into .css file.
In order to do that you have to use the –style option in your command line. You will be seeing this how to use this in the demo. Before moving to the demo let’s first know what are the different formats available. SASS gives you four formats:
nested format, this is the default format in which your .scss file will be compiled into if you do not use the –style option in your command line. This format shows your compiled file in an indented way with classes under each other.
expanded format, this is the most human-friendly readable format that SASS provides by keeping each properties on separate lines in nice and clean way and the braces are fully expanded.
compact format, this format makes the output condensed, but still readable.
compressed format, this gives you a minimised output and is thus suitable mainly for production environments.
So, let’s move straight to the demo and see how these things works.
So, this is the end of the course series “Learn LESS and SASS with CSS“. I hope you made it through all the videos and had fun learning. I would love to get your feedback.
