Будни разработчика

2021-07-12 13:45:31 Кто догадается, о чём будет надвигающийся пост? :) Открыть/Комментировать

2021-07-09 17:03:00 #заметка дня

Многие из вас наверняка используют CodePen. Кто-то потому что так требуют в чатах и банят , a кто-то — для развлечения. Тут я напоминаю вам про рубрику #codepen дня .

Но сегодня попробуем поговорить о том, как использовать в ваших экспериментах npm-пакеты. Ибо не всегда нужная библиотека есть на CDN, а копировать код целиком ну откровенно неудобно.

Давайте возьмём для примера sal.js: https://github.com/mciastek/sal

Что говорит документация? А говорит она нам: установите npm-пакет и импортируйте модуль.

Ну что же, давайте откроем настройки нашего кодпена (шестерёнка) и посмотрим на раздел JS. Там есть поиск по npm.

Как только вы ввели в поле название и выбрали нужный пакет, CodePen вставит в блок JS что-то такое:

import * as salJs from "https://cdn.skypack.dev/sal.js";


Это отличается от того, что в документации:

import sal from 'sal.js’;


И дело тут вовсе не в кавычках. А дело в том, что существуют разные форматы экспорта модулей из пакетов. Я рекомендую обратиться к учебникам: https://learn.javascript.ru/modules или https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/import

Но у нас тут не гвоздями же прибито, давайте просто исправим импорт:

import sal from "https://cdn.skypack.dev/sal.js";


И вот нужная функция импортирована. Остались стили.

Документация рекомендует и их импортировать, но заодно поставляет и собранные, чтобы добавить классическим способом.

Судя по документации, это каталог dist. Ну, давайте попробуем открыть через наш Skypack CDN: https://cdn.skypack.dev/sal.js/dist/sal.css

Надо же, стили нашлись. Опять открываем настройки кодпена и просто добавляем в раздел CSS этот адрес.

И вот готовый результат: https://codepen.io/alinaki/pen/RwVROKN

Если вы уже самостоятельно открыли ссылку на модуль: https://cdn.skypack.dev/sal.js, то могли заметить, что некая инструкция есть и там. Крайне рекомендую ознакомиться.

Например, можно просто найти пакет на самом https://www.skypack.dev/ и нажать на кнопку «Open in CodePen».

А вообще, не бойтесь экспериментировать и внаглую писать то, что ожидаете увидеть. Иногда оно так и работает.

#es6 #modules #javascript #scroll #animation Открыть/Комментировать

2021-07-09 12:30:01 Посмотрите, как пишут код уровня Senior Frontend в Google или Uber

На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана.

Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront. 

— примеры лучших решений во Frontend-разработке

— тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов

— статьи по JS, HTML, CSS за 2020

В каком проекте примените навыки, полученные после подписки на @seniorFront? Открыть/Комментировать

2021-07-08 12:48:31 #жизнь дня

Опаздываю с постом по простой причине: член команды (я не знаю как лучше перевести teammate) свалился с панической атакой , а баги на мне никуда не делись.

Есть у меня теория, почему это произошло, будем думать, как избежать.

А через 15 минут у меня собеседование очередного соискателя из Португалии. Или Бразилии, я точно не помню уже, их много сейчас проходит.

Русский акцент это плохо, считаете вы? Вы не слышали португальского. Впрочем, это всё равно легче вьетнамского. Но ко всему привыкаешь.

Быть личинкой тимлида – сложно. Но не буду советовать вам избегать по-возможности. Это весело.

#work #teamlead Открыть/Комментировать

2021-07-06 10:30:00 #фишка дня

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

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.

#css #keyframes #animation Открыть/Комментировать

2021-07-05 13:00:35 ​​Онлайн-курс «Frontend-разработчик с нуля до PRO» — ваш проводник в мир IT.
⠀
По окончании обучения вы сможете стать middle-разработчиком и устроиться на высокооплачиваемую работу, даже если вы никогда раньше не программировали. 
⠀
На курсе вы научитесь:
- верстать веб-страницы;
- создавать интерактивные веб-приложения;
- работать в системе контроля версий GIT и командной строке Bash;
- применять основные алгоритмы и структуры данных в реальных проектах;
- работать с макетами в Photoshop и Figma;
- создавать серверные приложения с использованием Node.js и многому другому.
⠀
А ещё у вас будет 4 дипломных проекта для вашего портфолио — они повысят шансы получить должность в одной из компаний, которые подберёт наш Центр карьеры.

Переходите по ссылке: https://clc.am/K4LDrw, чтобы зарегистрироваться на курс.

#реклама Открыть/Комментировать

2021-07-04 17:00:05 #статья дня

Неожиданно прекрасная статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/

"Когда?", — спросите вы. "Тогда", — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.

В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.

Получилось прекрасно, всплакнул.

Каждый аспект работы проиллюстрирован и объяснен, почему так, а не иначе. Очень хорошо разобрано всё на компоненты. Я получил эстетическое удовольствие от чтения.

Рекомендую. 11 из 10.

#ie6 #facebook #css #layout Открыть/Комментировать

2021-07-03 00:15:15 #фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url Открыть/Комментировать

2021-07-01 16:00:12 #игра дня

Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.

Давайте бахнем хардкором: https://css-challenges.com/

Ваша задача – повторить изображённое на экране минимальным числом правил. Есть обучающий блок. Все задачи поделены на уровни. Встречаются и крайне упоротые

Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.

Дерзайте

P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/

Там, кстати, небезызвестный Илья Стрельцын в лидерах :)

#css #game Открыть/Комментировать

2021-06-30 13:59:00 #статья дня

Не так давно по многим ресурсам катком прошлась статья про использование тригонометрии в вёрстке: https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/

А точнее, там целый цикл, ссылки внутри.

Но они не применили ничего из этого в CSS-анимациях, хоть и привели пример на canvas. Так что пришло время расчехлить наше всё.

Вашему вниманию предлагается… прыгающая коробочка: https://codepen.io/alinaki/pen/GbxrwO

Если вы ездили поездами РЖД, она может быть вам знакома по их Wi-Fi порталу. Но там-то просто гифка, а тут — магия SCSS.

Я решил не использовать библиотеку math для SCSS и реализовал тригонометрические функции по известным алгоритмам, SCSS вполне себе позволяет такое.

Крайне рекомендую посмотреть скомпилированный CSS чтобы понять изначальный принцип.

Итого, «физически правильно» прыгаем по косинусу и пружиним по синусу :)

Школьная тригонометрия вам о таком использовании не рассказывала, уверен.

#css #trigonometry #animation Открыть/Комментировать