DEV Community: Łukasz Sarzyński

own Expansion Panel using Angular animation

Łukasz Sarzyński — Tue, 20 Oct 2020 17:45:00 +0000

So this is a time to depth more into Angular animation, lets see that we need see some text, but on click on panel, we shuld see more infomation, of coruse with animation.

lets create TextExpandComponent

ng g c text-expand

my text-expand.component.html should be look that:

<div class="panel-header" (click)="onSwitch()">
  <img [@animationRotate]="sStatus" src="../assets/arrow.svg" alt="arrow" /> click me to show more
</div>

<div class="panel-text" [@animationShowHide]="sStatus">
  This is a secrect text show only when user click
 </div>

and my text-expand.component.ts shoudl be look that:

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-text-expand',
  templateUrl: './text-expand.component.html',
  styleUrls: ['./text-expand.component.scss'],
  animations : [
    trigger('animationShowHide', [
      state('close', style({ height: '0px', overflow: 'hidden' })),
      state('open', style({ height: '*',overflow: 'hidden'})),
      transition('open <=> close', animate('900ms ease-in-out')),
    ]),
    trigger('animationRotate', [
      state('close', style({ transform: 'rotate(0)' })),
      state('open', style({ transform: 'rotate(-180deg)' })),
      transition('open <=> close', animate('900ms ease-in-out')),
    ]),
  ],
})
export class PartialTextExpandComponent {

  sStatus = 'close';

  onSwitch(){
    this.sStatus = this.sStatus === 'close' ? 'open' : 'close';
  }

}

Summary we create two animation
first animationRotate witch will be rotate arrow svg
and second animationShowHide witch will be rescale text size to orginal

each animation respect sStatus variable where close and open status we decarate in animation state, switch between two state is declare in open <=> close and has 900ms duration

so nice fun with change each parameter, this is a good way to lern.

Good luck!

GIT rebase

Łukasz Sarzyński — Thu, 16 Jan 2020 12:01:50 +0000

Let's imagine that you very hard work on project changes in your changes branch 😏

[master] -> [10ed] "list of option"
[**your changes**] [111a] "list of option" -> [e45f] "addlogin panel" -> [8e69] "add recovery panel"

But somebody update master branch and add new option there.

[master] -> [10ed] "list of option" -> **[6lyer] "add coment"**
[your changes] [111a] "list of option" -> [e45f] "addlogin panel" -> [8e69] "add recovery panel"

Very good for project, but what do you shuld do now? Create new branch basic on new data and start again (manually copy your files)? NO Git have smart solution for it.

git branch "your changes"
git rebase master

Please switch to your changes branch and use git rebase to refreshing data. The effect will be as follows:

[master] -> [10ed] "list of option" -> [6lyer] "add coment"
[your changes] **[222b] "add coment"** -> [e45f] "addlogin panel" -> [8e69] "add recovery panel"

And this is all. You branches get actual data from master branch and you didn't lose your changes

Please focus that after rebase, your changes branch was remove [111a] hash ("list of option"), and now your history was started at new [222b] hash ("add coment")

But please be careful. What is good looking solution for local repository, for foreign repositor it can destroy branch strategy. Please save this sentence:

Do not rebase commits that exist outside your repository and that people may have based work on.

Cheers !

fill HTML forms without JavaScript

Łukasz Sarzyński — Thu, 21 Nov 2019 07:29:06 +0000

If you want take easy life for your WEB users, you can tell browser what exactly form value it shudl be populate automatically. And you don't need JavaScript for it!

What make sens fill sedond or third time, what is my name in each page?

none sens ;)

Autocomplete user data

Let's image that I must gaterign phone number nad first user name i my app. Usuall in HTMl we can write that:

<label for="form_name" >First Name: </label>
 <input id="form_name" name="app_name" />
<label for="form_phone" >Phone: </label>
 <input id="form_phone" name="app_phone" />

And this is time for super helper autocomplet="" form attribute. List of neede option is bellow

the autocomplete attribute	info
given-name	first name
family-name	last name (Surname)
street-address	adress
postal-code	zip code
address-level2	city
email	user email
tel	phone

So, let's tuning this form.

<label for="form_name" >First Name: </label>
 <input id="form_name" name="app_user_name"  autocomplet="given-name"/>
<label for="form_phone" >Phone: </label>
 <input id="form_phone" name="app_user_phone" autocomplet="tel"/>

At now if user filled this data in another page, on your page this values will be filled automatically too, please check. Simple form attribute but very helped !

Bonus, Credit Card autocomplete

don't lose money, have this knowledge !

I usually resignation of payment, when I must fill all information about my credit card, this is boring, additionally on mobile phone for me it give me flustation.

If you see that users resigns in buy
You can help him, please use this special form attribute intended for credit cards

Credit Card autocomplete attribute	info
cc-name	name on card
cc-number	card Number
cc-csc	card security code
cc-exp	expiry day

<label for="fCardName" >Name on card: </label>
 <input id="fCardName" name="app_card_name"  autocomplet="given-name"/>
<label for="fCardNumber" >Card Number: </label>
 <input id="fCardNumber" name="app_card_number"  autocomplet="cc-number"/>
<label for="fCardSecrect" >CVC: </label>
 <input id="fCardSecrect" name="app_card_csc"  autocomplet="cc-csc"/>
<label for="fCardEnd" >Expiry: </label>
 <input id="fCardEnd" name="app_card_expiry"  autocomplet="cc-exp"/>

Summary

save time your user, and they come back to you.

if you are still hungry for knowledge, you will find more HTML forms attributes:

all list of autocomplete you can find on WHATWG community
o read next, good article about autocapitalize, autocorrect and spellcheck

Five steps to get personalized Bootstrap

Łukasz Sarzyński — Mon, 29 Jul 2019 08:24:07 +0000

..using Gulp 4 and SASS preprocessor

🚅 Bootstrap is amazing, makes front-end web development faster and easier. But how to change something inside? If you need a different primary color or rules of small device start at 576px isn't good for you. You can always change it. So, let's do it! 🎢

#0 Get Gulp

Install Gulp tool directly by npm package will be a fast way.

If you haven't npm yet, let's install only NodeJs this Node Package Manager will be inside.

npm install gulp-cli --global

#1 Download Bootstrap, Gulp and SASS tool

Save last Bootstrap version and Gulp SASS preprocessor tool to your project.

npm install gulp gulp-sass bootstrap --save-dev

#2 Copy Bootstrap to the local version

Fact is that npm created a lot of directory inside ./node_modules/. Look that in ./node_modules/bootstrap/scss/ we have source code of Bootstrap CSS framework and this is amazing

so lets copy all of './node_modules/bootstrap/scss/*' directory to './bootstrap-source/' localy

#3 Change Bootstrap, personalize it

You can do what you want, but I have own plan.

I must change breakpoint rules for small devices to 370px instead 576px

/* @file: ./bootstrap-source/_variables.scss */

// Grid breakpoints
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
  xs: 0,
  sm: 370px, // @note: this is exactly what I need (before was 576px there)
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

#4 Tell to gulp sass what is needed

create ./gulpfile.js and set source directory to ./bootstrap-source/ and destination directory to ./css/

/* @file: ./gulpfile.js */

const { src, dest } = require('gulp');
const sass = require('gulp-sass'); // Gulp SASS plugin

function compileBootstrap() {
  return src('./bootstrap-source/**/*.scss') // Input
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css')); // Output

}

exports.default = compileBootstrap;

#5 Enjoy your own Bootstrap

Run gulp

gulp

And this is all. Ready CSS bootstrap with your modification, you can find in ./css/ folder.

#Inf summary

After this modification my own Bootstrap have diffrent bechavior for examples class: .d-sm-block, .float-sm-right, .text-sm-right, .mr-sm-auto and others from two hundred *-sm-* examples.

One change in the scss file has a big impact. I'm afraid of what you will do with it. So, just do it. Get own Bootstrap version, good looking in your specific project !🌟