Анимация букв при печати.

При реализации использованы css анимации и JavaScript для определения цвета летящих букв, и их положения.
Кликните по «бумаге», чтобы взять ее в фокус, и начните вводить свой текст.

Айтишники, хорошая новость! 👾

Появился канал с удалёнными вакансиями в IT: @theyseeku_it

Здесь ищут девелоперов, разработчиков, проект-менеджеров, UX/UI-дизайнеров, SEOшников и других специалистов.

• Вакансии от известных IT-компаний;
• Заработная плата от 30 до 500 тысяч рублей;
• Должности для опытных и начинающих специалистов;
• Только удалённая занятость.

Присоединяйся и стань частью IT-индустрии с проверенным работодателелем.

CSS - Медиа запросы

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.

Синтаксис:

 @media условие {
 /* стили (они будут выполняться, если устройство соответствует указанному условию)
 }

Логические операторы:
and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.

Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.

Пример:
@media not screen and (orientation: portrait),
(min-width: 992px){ /* Стили CSS ... */ }

Мы теперь есть ВКонтакте, заходите, контент отличается от телеграма

Дан массив чисел.

Необходимо написать функцию, которая вернет разницу между максимальным и минимальным числом в массиве. Числа в массиве могут быть отрицательными.

maxDiff([1, 2, 3, 4]); //return 3, because 4 - 1 == 3
maxDiff([1, 2, 3, -4]); //return 7, because 3 - (-4) == 7

Анимация Canvas + Javanoscript

Автор использует Canvas, и в Javanoscript создает снежинки, которым добавляет анимацию падения.

​​🔴 Фронтенд не просто учить, правда?

Лично мне знакомы ощущения когда не знаешь с чего начать, в голове каша, вроде все понимаешь, но приложение тебя не слушается и спросить некого, не можешь оценить задачу, чувствуешь что не дотягиваешь

Тогда нужна отправная точка знаний с которой уже можно развиваться в хорошем темпе в хорошей компании, с ранее размещенных курсов получил отличный фидбек и на этот раз посоветую пару специальностей от SkillFactory

Frontend-разработчик

SkillFactory предлагает стать фронтенд-разработчиком с нуля за 6 месяцев. Теоретические блоки по HTML и CSS, JavaScript и видам вёрстки чередуются с практическими заданиями в специальном тренажёре.
Курс рассчитан на новичков в разработке и на тех, кто хочет повысить свой скилл во фронтенде. В свою очередь, команда наставников и персональный ментор всегда придут на помощь.

Fullstack-разработчик на JavaScript

А этот курс уже посерьезней - он на 12 месяцев и финальный проект там - это
сайт каршеринга с адаптивным интерфейсом на JS+React+Redux и серверной частью на Node.js + Nest.js с подключением к высоконагруженной базе данных и к платежной системе, с личным кабинетом и нотификациями

P.S. У них сейчас скидки 40%

Всплывающее окно на чистом CSS

Автор использует кастомный checkbox для открытия выплывающего окна, которое он анимирует с помощью CSS свойства transition.

Область видимости в JavaScript

В JavaScript есть три области видимости:
1. глобальная
2. область видимости функции
3. блочная.

Глобальная переменная объявлена вне функции или блока и доступна в любом месте исходного кода:

 var num = 5;
function foo() {
  console.log(num);
}
foo();                // 5
console.log(num);     // 5
{
  console.log(num);   // 5
}

Локальная переменная доступна в любом месте внутри тела функции, в которой она была объявлена:
function foo() {
var num = 5;
console.log(num);
}
foo(); // 5
console.log(typeof num); // undefined

Блочная переменная объявляется с помощью ключевых слов let или const и доступна в любом месте внутри своего блока.
let num = 0;
{
let num = 5;
console.log(num); // 5
{
const num = 10;
console.log(num); // 10
}
console.log(num); // 5
}
console.log(num); // 0

Пример использования CSS свойства "font-feature-setting"

Автор использует CSS свойство font-feature-setting: ‘thum’ для того, чтобы избавиться от эффекта дерганья цифр при их изменении.

В маленьком городке на начало года население p0 = 1000. Каждый год население растет на определенный процент, кроме того, какое-то количество человек приезжают из других городов.

Необходимо найти, какое количество полных лет понадобится, чтобы население города достигло заданного количества человек.

Пример:

 nb_year(1500, 5, 100, 5000) // 15

где
1500 - изначальное население
5 - процент роста,
100 - приезжие,
5000 - заданное количество

15 - количество лет.

Инструменты для проверки скорости загрузки сайта

Скорость загрузки сайта - это фактор ранжирования для поиска и фактор восприятия для человека. Если веб-ресурс загружается медленно, его не полюбят ни поисковики, ни пользователи.

Google PageSpeed Insights - официальный инструмент от Гугл. Один из самых используемых среди веб-мастеров и SEO-оптимизаторов.

Pingdom Tools - Подробный инструмент, который использует более 70 глобальных факторов для анализа сайта.

Gtmetrix.com -Простой и удобный сервис, помогающий проверить скорость загрузки сайта в секундах.

Uptrends.com - cервис предлагает много разных настроек для проверки.

PR-CY - Комплексный русскоязычный сервис для анализа сайта. В числе бесплатных функций есть и измерение скорости.

Web Page Test - как и в случае с Uptrends, при начальной настройке Web Page Test можно выбрать геолокацию, браузер и девайс для имитации запроса.

Sitespeed - русскоязычный сервис, позволяющий проверить скорость загрузки сайта и оценить его доступность.