Category

JS

How to remove emoji from WP

Add to functions.php:

remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); 
remove_action( 'wp_print_styles', 'print_emoji_styles' ); 
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Git commands

touch text.txt – creates a file named text.txt

npp text.txt – opens a file named text.txt in Notepad++ (Notepad++ should be installed and set up to work with Git Bash). To get back to Git Bash, you should close Notepad++.

rm -rf folder – deletes a folder named folder. Be very careful. It will delete all folders and files within this current folder.

rm text.txt – deletes a file, that is untracked by git.

git rm text.txt – deletes a file, that is already tracked by git.

mv order.txt orderNew.txt – renames file or folder. Then type git add -A, which recursively add any changes (renamed or deleted).

You can also type git mv file1 file2. Then git commit -m “renaming file1 file”

git mv level2.txt level3 – moves a file to another folder.

git mv level2.txt .. – moves a file to one directory up.

git init – creates a new Git repository. It can be used to convert an existing, unversioned project to a Git repository or initialize a new, empty repository. Most other Git commands are not available outside of an initialized repository, so this is usually the first command you’ll run in a new project.

git clone https://github.com/webokolux/starter-web.git – cloning repository from Github.com

clear – clears the command line

git ls-files – shows a list of all files the GIT is tracking in the current repository.

git restore text.txt – to discard changes in the working directory (when modified message is red)

git restore –staged text.txt – to unstage (message turns green to red).

git add -u – correctly sees updating of a file.

git checkout – discards whatever changes that were made to the working directory

git log – shows commit history. To exit to console – type “q”.

git log –abbrev-commit – makes commit id shorter.

git log –oneline –graph –decorate – the same in a shorter view.

git log –since=”3 days ago” – shows all commits for 3 days.

git log — text.txt – shows commits for the current file.

git log –follow — file.txt – shows a history of commits for a file that was renamed.

Bootstrap 5 release date

I love Bootstrap! It helps me build websites that are responsive and attractive in a short period of time!

Now Bootstrap is the most popular CSS framework in the world with more than 19 million websites built using this framework.

Nowadays we have Bootstrap 4 with such features as flexbox, an easy to use a grid system, cards, improved navbars and switching Sass over Less. This version was released on the 19th of August 2015.

It is said that the Bootstrap 5 release date will be late spring of 2020.

What’s new in Bootstrap 5?

Here’s a list of all the expected changes:

  • Removing jQuery
  • Dropping support for IE 10 & 11
  • Custom SVG icon library
  • Switching to Hugo from Jekyll
  • Major Javascript updates
  • Minor CSS and class updates and fixes

In conclusion

Bootstrap 5 is expected be faster, simpler and looking more attractive. Also I expect a shorter loading time of websites built with new Bootstrap 5.

Regular expressions JS

Username

/^[a-z0-9_-]{3,16}$/

Email

/^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i

Phone

/^\+?(\d{1,3})?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$/

Password

/^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$/

Zip-code

In Russia

/^\d{6}$/

In USA

/^\d{5}(?:[-\s]\d{4})?$/

Credit card number

/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/

Spaces

/^[ \s]+|[ \s]+$/g
let str = " hello ";
console.log(str.length); // 7
str = str.replace(re, '');
console.log(str.length); // 5

Date

/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/

Price

/(\$[0-9,]+(\.[0-9]{2})?)/
let price = 'price $5,555.55'.match(re)[0]; '$5,555.55

URL

/[-a-zA-Z0-9@:%_\+.~#?&\/=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&\/=]*)?/gi
re.test('https://yandex.ru'); // true
re.test('yandex.ru'); // true
re.test('hello world'); // false

Twitter username

/@([A-Za-z0-9_]{1,15})/

Facebook URL

/(?:http:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[\w\-]*\/)*([\w\-]*)/

Youtube video’s ID

/https:\/\/(?:youtu\.be\/|(?:[a-z]{2,3}\.)?youtube\.com\/watch(?:\?|#\!)v=)([\w-]{11}).*/gi

HEX colors

/\#([a-fA-F]|[0-9]){3, 6}/

Image URL

/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/

HTML Comments delete

/<!--(.*?)-->/

Get HTML Title

/<title>([^<>]*?)</title>/

rel=«nofollow»

$html = '<a href="https://site.com">site.com</a>,
      <a href="my-site.com">my-site.com</a>,
      <a href="https://site.com" rel="nofollow">site.com</a>';
$re = '/(<a\s*(?![^>]*\brel=)([^>]*\bhref=\"https?:\/\/[^"]+\"))/';
$result = preg_replace($re, '$1 rel="nofollow"', $html);

Searched word highlight

/\b(ipsum)\b/ig
let text = 'Lorem ipsum dolor, lorem ipsum dolor.';
text.replace(re, '<span style="background: yellow">$&</span>')

Delete repeated words

/(\w+)\s+\1/gi
"hello world world hello".replace(re, "$1") // hello world hello

Number of words

^[^\s]*$ &nbsp; // ровно одно слово
^[^\s]*\s[^\s]*$ // ровно два слова
^[^\s]*\s[^\s]* // два слова и больше
^([^\s]*\s){2}[^\s]*$ // ровно три слова
^([^\s]*\s){4, }[^\s]*$ // пять слов и больше

Collapsed blocks

Я обычно использую такой простой вариант для создания аккордеона на Javascript:

<script>
const items = document.querySelectorAll(".accordion a");
function toggleAccordion(){
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
</script>
.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}
.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #03b5d2;
}
.accordion a:hover::after {
  border: 1px solid #03b5d2;
}
.accordion a.active {
  color: #03b5d2;
  border-bottom: 1px solid #03b5d2;
}
.accordion a::after {
  font-family: 'Ionicons';
  content: '\f218';
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 1rem;
  color: #7288a2;
  padding: 5px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #7288a2;
  text-align: center;
}
.accordion a.active::after {
  font-family: 'Ionicons';
  content: '\f209';
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion .content {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
}
.accordion .content p {
  font-size: 1rem;
  font-weight: 300;
}
.accordion .content.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}
  <div class="accordion">
    <div class="accordion-item">
      <a>Why is the moon sometimes out during the day?</a>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <a>Why is the sky blue?</a>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
</div>

Раньше я их делала посредством встроенного инструмента Bootstrap. Только немного усовершенствовала. Однако такой подход требует много исправлений кода, да и вообще много строчек кода. Сейчас я использую первый вариант.

 <a data-toggle="collapse" class="ffa" href="#n7" role="button" aria-expanded="false" aria-controls="n7">
Question?
  </a>
  <div class="collapse" id="n7">
  <div class="card card-body">
Answer
  </div>
</div>