Senior Frontend Developer | JavaScript, React, HTML & CSS – Telegram
Senior Frontend Developer | JavaScript, React, HTML & CSS
21K subscribers
975 photos
267 videos
16 files
1.35K links
Изучаем Frontend.

По вопросам сотрудничества: @adv_and_pr

Канал на бирже: https://telega.in/c/senior_front

https://gosuslugi.ru/snet/67a461dcdc130259d5a631b8
Download Telegram
Различие между Object.freeze() и const

const и Object.freeze – две разные фичи JavaScript. const применяется только для неизменяемой ссылки на ячейку памяти со значением, что означает невозможность задать новое значение для переменной.

Object.freeze работает со значениями объектов. Делает объект неизменяемым, то есть изменить его свойства невозможно.
This media is not supported in your browser
VIEW IN TELEGRAM
Neon Cursor

Реализовано при помощи Three.js. Настройки анимации задаются в JS.

https://codepen.io/soju22/pen/wvyBorP
Что будет выведено в консоль?

Ответ
PerfectPixel — плагин для браузеров, позволяющий верстать сайты «пиксель в пиксель»

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

Интересной особенностью инструмента является возможность работы как с локальными сайтам, так и с теми, что уже размещены в Интернете
This media is not supported in your browser
VIEW IN TELEGRAM
Perlin Noise

Анимация голограммы. Реализована с помощью JavaScript и CSS.

https://codepen.io/vcomics/pen/djqNrm
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Несколько супер-полезных однострочников на JS

Проверить, является ли путь относительным
const isRelative = (path) => !/^([a-z]+:)?[\\/]/i.test(path);

isRelative('/foo/bar/baz'); // false
isRelative('C:\\foo\\bar\\baz'); // false
isRelative('foo/bar/baz.txt'); // true
isRelative('foo.md'); // true



Проверить, является ли строка шестнадцатеричным цветом
const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

isHexColor('#012'); // true
isHexColor('#A1B2C3'); // true
isHexColor('012'); // false
isHexColor('#GHIJKL'); // false



Подсчитать количество разных дней между двумя датами
const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839



Скопировать в буфер обмена
const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");
Please open Telegram to view this post
VIEW IN TELEGRAM
Lightning CSS

Очень быстрый парсер, транспилятор, бандлер и минификатор CSS от создателя Parcel: поддерживает CSS-модули, добавляет вендорные префиксы на основе browserslist, интегрируется с webpack.

🌐Ссылка dev
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Rainbow cloud trail — переливающееся облако, следующее за курсором. Реализована с помощью CSS и JavaScript

https://codepen.io/creativeocean/pen/LYMmbvZ
Этот пост выкуплен под рекламную интеграцию.

Но здесь будут скрины от участников frontend-менторства Тихона Галактионова и подборка полезных материалов:


👉100 вопросов, которые точно помогут тебе на собеседовании: ссылка
👉Подборка из 100+ каналов с вакансиями для разработчиков: ссылка
👉10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS: ссылка
👉Чек лист проверки своего резюме: ссылка
👉Разбор самых популярных и каверзных вопросов на собесах: ссылка
👉Лайфхак как аккуратно “пинговать” рекрутеров: ссылка

Ссылка на канал Тихона, там же можно найти больше материалов для подготовки к собеседованиям в Big Tech: ссылка

Реклама, erid: 2W5zFHXduAh ИП Галактионов Тихон Витальевич, ИНН 771618975809
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Shopping UI - красивый каталог товаров и корзина, сделанные при помощи JS библиотеки - Vue.js

https://codepen.io/mo-ro/pen/jObjGJm
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Creativity Now — 3D-текст, созданный на Blender. Анимация замены оформления реализована с помощью Tree.js.

https://codepen.io/ScavengerFrontend/pen/mdRrVVO
This media is not supported in your browser
VIEW IN TELEGRAM
Manufactured

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

https://codepen.io/saifkeralite/pen/RwMJgVd
🖥 Planck.js

Planck.js – небольшой физический 2D движок на JavaScript, что отлично подойдет для написания HTML5-игр. Интересный для ознакомления проект.

🖥 Github
✔️ Документация
Please open Telegram to view this post
VIEW IN TELEGRAM