SVG ANIMATIONS IN ANGULAR

Using a new design to breathe fresh air into your login page

https://media.giphy.com/media/rC8aP3oKaAW4ZO5uhK/giphy.gif

So it’s time to create a login page. You get a good image, create two input fields (one for an email, one for a password), center everything, and leave it at that. It’s a little uninspiring but let’s face it; this is a common experience. Well, it’s time to buck the trend. Let’s create a fresher looking, more engaging log in page with a little SVG magic.

Getting Started

As usual, we’re going to do this in Angular. Why? Because I love Angular! I don’t need any routing, I’ll choose SCSS, and for the input fields, I’ll go with Angular material.


While I was working on my own personal website, I searched for some text effects I could use on my site. Since I was writing my website in Angular 10, it was hard for me to find a suitable, easy to use, solution.

So I wrote one ;)

If you want to know how to do it yourself, you've come to the right place. Let’s Start.

The first thing you need is an Angular app. I assume you know how to create one :). now let’s add a new component, let’s call it — type-delete-component. …


GET CREATIVE AND STYLISH

All of you web developers out there. This one is for you.

Photo by Nikita Kachanovsky on Unsplash

It’s time to show your console.log() skills! Now, wait, I know what you're saying. Console? That’s for debugging. And your right. It is for debugging. That’s where the picture above comes in. Think outside the box. It can be used for different things as well.

1. ‘We’re hiring’ messages

Go ahead and use dev tools to see the console of this website — Medium. What do you see there? Logo, and we’re hiring message:


ANGULAR — FIREBASE CMS SERIES — PART 2

Build Angular 11 CMS with Firebase Series

Angular + Firebase = CMS
Angular + Firebase = CMS
Angular + Firebase = CMS

Welcome to the second part of our Angular Cms Tutorial. Here are the links to the other parts of the tutorial (I will add the links after I publish them):

  • Part 1
  • Part 2 — no need for a link, right? You're already in it!
  • Part 3 — will be added soon :)
  • Part 4 — will be added soon :)

So, we've set everything up (firebase, database, and project structure). Now it’s time to fill in all of our routing, services, guards, pipes, and utilities.

Our app tree looks like now:


ANGULAR — FIREBASE CMS SERIES — PART 1

Build Angular 11 CMS with Firebase Series

Angular + Firebase = CMS
Angular + Firebase = CMS
Angular + Firebase = CMS

The first thing you gotta ask yourself is why? Why would you want to build your own Content Management System when you have WordPress free and easy to use.

Because we can.

Our goals with this project:

  • An admin panel.
  • A user panel.

The admin panel will include adding new pages, editing pages, adding new posts, connecting them to specific pages, and editing posts.

The user panel will display all of the pages and posts.

Before we get started, remember that is only an MVP. What is an MVP?

A minimum viable product (MVP) is a version of a product…


DO YOU WANT TO BE BETTER?

A Good Teacher Is Hard To Find

Photo by Raghav Modi on Unsplash

First off — I’m not going to make you Einstein. And even you could be him; I don’t know how good of a teacher he is. And now that it’s out of the way let’s get started.

Oh my god, where do I even start? OK, let’s get it out — most teachers don’t know how to teach! It’s true; they don’t.

You’re probably asking yourself — who am I to speak? What are my credentials? What skills in my resume? Well, let me introduce myself:

  • I used to be a rapper. This means I used to be on stage…


Top Reason for choosing angular

Why the h*** did I choose angular for my web site?

Photo by Sharon Pittaway on Unsplash

Well, there really is only one main reason for choosing Angular 11 — and it doesn't matter what version (AngularJS does not count!).

actually, I started my website with Angular 10 and just now upgraded to 11.


ANGULAR ANIMATIONS MADE EASY

An angular 10 directive for floating text background animation

Bubbling text demo gif

If you want to add animations to your website, JavaScript has plenty of libraries that can help. However, this article focuses on adding animations in angular so you have to do things the angular way. This means one thing: importing JS libraries is not so easy (or recommended) so I set myself up for a task, I wanted to build one colossal npm package of my own that contains a lot of the animations we see in JS (as well as new ones of course). For now, I’ll just start with one of those packages.

Please…

Liraz Shaka Amir

Developer... and everything that comes with it...

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