Frontender Libs - обзор библиотек JS / CSS

Хотите влиться в разработку, с чего начать? Ниже вы найдете набор диаграмм, демонстрирующих пути, которые вы можете выбрать, и технологии, которые вы хотели бы принять, чтобы изучать фронтенд, бэкэнд или девопс. Новичкам эти схемы помогут сориентироваться в технологиях, и понять что можно начинать изучать, а что можно отложить на потом. Опытным разработчикам будет полезно пройтись по представленным технологиям и заполнить белые пятна.

JS | Показываем шапку сайта при прокрутке вверх Меню будет прятаться при скролле вниз и снова отображаться при начале скролла вверх. Этот метод будет полезен во многих случаях: - на страницах каталога при скролле вверх можно показывать меню с фильтрами - показывать сокращенный вариант меню при скролле вниз и полное меню при скролле вверх - экономия места в мобильном режиме Написано без использования jQuery.

Как пронумеровать результаты запроса в PostgreSQL, MSSQL и MySQL? Если используется PostgreSQL или MSSQL, то достаточно добавить функцию row_number() в запрос: SELECT row_number() OVER() AS num, * FROM table LIMIT 10 В случае же MySQL придётся применить небольшую хитрость: SELECT @i:=@i+1 AS num, * FROM table, (SELECT @i:=0) X LIMIT 10

Обучайтесь бесплатно с GeekBrains! Известный образовательный портал дарит более 40 курсов по программированию, дизайну, маркетингу и управлению за регистрацию. — Удобный онлайн-формат — Много практики — Обучение с нуля Переходите по ссылке и начните обучение уже сейчас https://geekbrains.ru/link/S7LAc5

CSS |Как сделать табы на чистом CSS Этот пример реализации табов показывает, что необязательно подключать какие то фреймворки или писать скрипты, всё можно решить силами css. Готовая разметка на emmet:

.css-tabs>(input#tab$.css-tab__input[name="tab"][type="radio"]+label[for="tab$"].css-tab__label>span.css-tab__title{таб $})*3+.css-tab__content[data-tab="$"]{содержимое $}*3

Остаётся только заменить 3 на необходимое количество табов, взять стили из примера и дописать их для каждого таба после третьего.

GIT | Всё что необходимо знать Умение пользоваться системами контроля версий одно из главных требований к разработчику, научится базовым операциям не сложно, но git гораздо мощнее, чем может показать на первый взгляд. В прикрепленных ссылках - учебник по git, справочник с командами, и интерактивное руководство от github, сохраняйте в закладки, изучайте.

JavaScript test - канал, на котором выкладывают задачки по JavaScript разного уровня и решение на них. Грех не подписаться на такой полезный канал 👉🏻 @js_test

Как записать звук с микрофона в Node.js? Для записи аудио с микрофона в Node.js существует созданный сообществом npm пакет mic. Модуль работает на основе sox (Windows/Mac) или ALSA (Linux), поэтому необходимо предустановить их. Базовое использование

var mic = require('mic')
var fs = require('fs')
 
var micInstance = mic({
  rate: '16000',
  channels: '1',
  debug: true,
  exitOnSilence: 6
})
var micInputStream = micInstance.getAudioStream()
var outputFileStream = fs.WriteStream('output.raw')

micInputStream.pipe(outputFileStream)
micInstance.start()

WEB | Расширения браузера для фронтендера В интернете существует множество статей про полезные расширения, которые ускоряют и облегчают вёрстку. Вот четыре расширения, которые позволят держать сетку под контролем Tape - позволяет размещать направляющие, которые привязываются к содержимому страницы (и придерживается его, при прокрутке), и помогает легко измерять отступы и размеры элементов. PerfectPixel - позволяет разработчикам накладывать полупрозрачное изображение поверх разметки и выполнять между ними идеальное сравнение пикселей. Идеально для вёрстки " пиксель в пиксель". Design Grid Overlay - Расширение для наложения дизайнерской сетки поверх страницы. Сетка имеет множество настроек. wireframify - Предварительный просмотр каркаса веб-сайта одним щелчком мыши. Наглядно показывает границы блоков, позволяет в целом оценить качество разметки или найти блок который вызывает горизонтальный скролл. А какие ваши любимые расширения?

Хочешь получить одну из самых востребованных профессий в сфере IT? Такую, чтобы и с интересными задачами, и с хорошей зарплатой? Все это можно сказать про frontend-разработку. Интересно? Тогда добро пожаловать! 👉 Все подробности по ссылке: https://clc.am/ydkFeQ Что ты узнаешь за это время: 📌 разберешься с веб-версткой; 📌 выучишь с нуля JavaScript; 📌 научишься собирать проекты; 📌 узнаешь, что такое системы контроля версий, в частности Git; 📌 поймешь разницу между React, Angular и Vue. Сейчас на курс действует скидка 40%! ❗️ После защиты диплома тебя ждет гарантированное трудоустройство. 🎁 Также каждому студенту в подарок 2 месяца английского языка

CSS | Pointer-events Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Свойство позволяет контролировать когда, как и может ли вообще указатель устройства взаимодействовать с элементом. pointer-events: none предотвращает события указателя для элемента: hover, active, click и т.п., в том числе и JavaScript событие click. pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом. Применение pointer-events на практике: Запретить пользователю клик правой кнопкой мыши по фото на сайте. Выключить взаимодействие со странице во время обработки ajax-запроса. Блокировать любой элемент страницы от взаимодействия с курсором.

Реализация карточки товара с несколькими изображениями В примере описано как сделать карточку товара которая будет менять своё изображение по ховеру, представлено два варианта - две картинки на чистом css и несколько картинок с использованием скриптов.