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

Яндекс запустил телеграм-канал с вакансиями для разработчиков — Свежие вакансии каждый день — Описания задач, технологий и условий без воды — Лёгкий поиск по тегам — Один пост раз в две недели будет посвящён ответам на ваши вопросы о найме и работе в Яндексе Подписывайтесь

Avocode Avocode – это продукт созданный специально для верстальщиков. Сами создатели называют его "Мост между дизайнерами и разработчиками". Работает это так: дизайнер нарисовал макет в Photoshop, отправил верстальщику, а тот открывает его в Avocode, где удобно реализованы все необходимые инструменты.

JS | 13 полезных однострочников Однострочник — фрагмент кода укладывающийся в одну строку и решающий задачу, на которую у новичка может уйти пара десятков строк. В статье представлены разные способы преобразования массивов, работа с объектами и другие, задачи регулярно встающие перед разработчиком.

Node.js | Twitter Для Node.js существует npm пакет Twitter. Как понятно из названия, он будет полезен при взаимодействии с Twitter'ом. Авторизация

var Twitter = require('twitter')

var client = new Twitter({
  consumer_key: process.env.TWITTER_CONSUMER_KEY,
  consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
  access_token_key: process.env.TWITTER_ACCESS_TOKEN_KEY,
  access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET
})

Создаём новый твит

client.post('statuses/update', { status: 't.me/sWebDev is beautiful' })
  .then(console.log)
  .catch(console.error)

Получаем последние твиты о php в стриме

var stream = client.stream('statuses/filter', { track: 'php' })
stream.on('data', (event) => {
  console.log(event.text)
})
 
stream.on('error', (error) => {
  console.error(error)
})

⚡️ Какие навыки нужны начинающему iOS-разработчику, чтобы занять уверенные позиции в профессии? 6 ноября в 20:00 Константин Савялов поделится карьерными инсайтами и представит программу онлайн-курса «iOS Developer. Basic». Регистрация на вебинар: https://otus.pw/kWexh/

CSS | Правило внутреннего и внешнего Хороший фронтендер должен разбираться в основах дизайна и типографике. Существует универсальное правило внутреннего и внешнего: внутреннее ≤ внешнее Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста. Внутреннее — padding блока, внешнее — margin блока. Поняв это правило и научившись им пользоваться можно улучшить свою разметку или найти общий язык с дизайнером, а то и поспорить с ним на счёт отступов.

PHP | Наследование переменных в анонимных функциях В PHP можно наследовать переменные из родительской области видимости при использовании анонимных функциях. Однако стоит помнить о том, что значение будет браться из места определения функции, а не её вызова. Чтобы этого избежать нужно наследовать переменную по ссылке. Пример:

$message = 'Hi, ';
$test = function () use (&$message) {
  echo($message);
};
$test();
$message = 'sWebDev!';
$test();

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

Начните осваивать JavaScript сейчас, и уже через 4 месяца вы упростите свои процессы тестирования и окажетесь в рядах востребованных тестировщиков. Занятия на единственном в России онлайн-курсе по QA JavaScript начались 28 октября. Есть еще возможность присоединиться к группе! Успейте пройти вступительный тест, пока действует спец. цена на последние места https://otus.pw/0sMn/

SQL | Дубликаты строк Одним из частых вопросов на собеседовании являтся вопрос вида "Как найти дубликаты записей". Для поиска дубликатов с одним полем можно воспользоваться следующим трюком: SELECT COUNT(field) FROM table GROUP BY field HAVING COUNT(field) > 1 Если же необходимо выбрать дубликаты записей с несколькими полями: SELECT field1, field2, COUNT(id) FROM table GROUP BY field1, field2 HAVING COUNT(id) > 1

HTML | SEO мета теги Чаще всего сео-оптимизация это последнее о чем задумывается фронтендер при создании сайта, при этом настроить автоматическую генерацию или вручную указать эти теги проще в начале разработки. Небольшие рекомендации по заполнению тегов : - title - уникальный для каждой страницы, обычно составляют из двух частей "название страницы | название сайта" (организации, сервиса) - description - короткий текст, обычно до 160 символов, также составляется из двух частей, описание конкретной страницы + короткая информация о компании, контакты или адрес - keywords - основные ключевые слова страницы, можно выжимать из description самый сок, три, четыре ключевых слова достаточно Так же стоит обратить внимание на настройку OpenGraph Meta, формат мета-тегов, созданный в Facebook, служащий для передачи информации о странице при репосте в социальные сети.

Учишь программирование, но не знаешь где практиковаться? @programmingtests — первый канал в телеграме, в котором публикуются тесты и задачи по разным языкам(JavaScript, Python, C++, C#, Java, Php, Git, Sql). Подписывайся и закрепляй свои знания!

CSS | Position sticky Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы, отличается от fixed тем что положение фиксируется относительно родительского элемента. Использование sticky требует определенной разметки и стилей блока, если блок не прилипает нужно проверить эти условия: - блок имеет свойство top или bottom - высота родителя больше высоты блока - у родительских блоков, вплоть до html не стоит overflow: hidden - для сафари прописано position: -webkit-sticky Пример реализации прилипающего бокового меню по ссылке.

JS | Axios Типичная задача во фронтенде — получение JSON данных с сервера, к примеру, пользователь изменяет фильтр в каталоге и товары обновляются без перезагрузки страницы. В основе подобного взаимодействия систем лежит технология AJAX, в рамках применения которой используется экземпляр объекта XMLHttpRequest. Axios — это широко известная JavaScript-библиотека. Она создана того чтобы облегчить программистам работу с AJAX и XMLHttpRequest и предоставляет разработчикам удобный интерфейс, избавляя их от необходимости пользоваться низкоуровневыми механизмами.