Articles / Bookmarks / Profile of BacuJlui / Habr

How to become an author

Василий @BacuJlui^{read⁠-⁠only}

Frontend developer

Profile Bookmarks 20

Bright_Translate Mar 3 2023 at 16:00

12 важнейших сайтов для освоения CSS в 2023 году

Easy

6 min

32K

Web design*Website development*CSS*RUVDS.com corporate blog

Translation

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

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

Так что пристегните ремни и приступайте к написанию кода!

Читать дальше →

+45

SuperOleg39ru Feb 7 2023 at 14:23

Масштабирование SSR-приложений

8 min

4.2K

Website development*TINKOFF corporate blog

Tutorial

Привет! Меня зовут Олег Драпеза, я работаю техлидом в Тинькофф в команде Coretech Frontend. Мой основной проект — SSR мета-фреймворк tramvai, на котором работают несколько десятков фронтовых приложений Тинькофф.

Сегодня хочется поговорить про масштабирование SSR-приложений. С SSR есть две проблемы: React и Node.js. Они же — сильные стороны подхода, потому что предоставляют отличный DX, общий код и хорошие возможности для поддержки frontend-разработчиками. Разберемся, с какими сложностями мы можем столкнуться при использовании React и Node.js и как с ними быть.

Читать далее

+16

dimonarhipon Nov 9 2022 at 14:37

База знаний веб-разработчика: прокачиваем навыки владения CSS

4 min

23K

Website development*CSS*HTML*Studying in IT

Tutorial

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

На базовом уровне

Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов

Что изучать?

Читать далее

+16

savvaleukhin Oct 15 2022 at 17:05

Как развернуть React приложение с помощью AWS S3 и CloudFront

13 min

6.3K

JavaScript*ReactJS*

Создадим приложение с использованием фреймворка Next.js, настроим облачные сервисы Amazon S3, Amazon CloudFront, AWS Lambda@Edge, развернем приложение и настроим маршрутизацию доменного имени.

Читать далее

+10

aio350 Oct 5 2020 at 14:13

Основные команды bash, git, npm и yarn, а также немного о package.json и semver

14 min

69K

Website development*JavaScript*Programming*

Доброго времени суток, друзья!

Предлагаю вашему вниманию небольшую шпаргалку по основным командам bash, git, npm, yarn, package.json и semver.

Условные обозначения: [dir-name] — означает название директории, | — означает «или».

Рекомендую вводить каждую команду в терминале и внимательно изучать вывод, так вы быстро их запомните и определите, какие команды вам нужны, а какие нет.

Приношу извинения за возможные ошибки и опечатки. Буду рад любым замечаниям и предложениям.

Без дальнейших предисловий.

Оглавление:

bash
git
npm
yarn
package.json
semver

Читать дальше →

+5

ru_vds Aug 9 2020 at 16:16

Дэн Абрамов о замыканиях в JavaScript

7 min

22K

Website development*JavaScript*RUVDS.com corporate blog

Translation

Замыкания вызывают у программистов сложности из-за того, что это — «невидимая» конструкция.

Когда вы используете объект, переменную или функцию, вы делаете это намеренно. Вы думаете: «Тут мне понадобится переменная» — и добавляете её в свой код.

А вот замыкания — это уже нечто иное. В то время как большинство программистов начинает осваивать замыкания, эти люди уже, сами о том не зная, пользуются замыканиями. Вероятно, с вами происходит то же самое. Поэтому изучение замыканий — это не столько освоение новой идеи, сколько изучение того, как распознать то, с чем вы уже много раз сталкивались.

Если в двух словах, то замыкание — это когда функция обращается к переменным, объявленным за её пределами. Например, замыкание содержится в этом фрагменте кода:

let users = ['Alice', 'Dan', 'Jessica'];
let query = 'A';
let user = users.filter(user => user.startsWith(query));

Обратите внимание на то, что user => user.startsWith(query) — это функция. Она использует переменную query. А эта переменная объявлена за пределами функции. Это и есть замыкание.

Вы, если хотите, можете дальше не читать. Оставшаяся часть этого материала рассматривает замыкания в другом свете. Вместо того чтобы говорить о том, что такое замыкания, эта часть статьи посвятит вас в подробности методики обнаружения замыканий. Это похоже на то, как, в 1960-х, работали первые программисты.

Читать дальше →

+25

noorsoftprod Aug 5 2020 at 13:45

CSS Grid понятно для всех

3 min

47K

Website development*CSS*HTML*

Tutorial

Что такое Grid?

Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.

Поддержка браузерами

В 2020 году поддержка браузерами достигает 94 %

Grid контейнер

Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.

CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.

Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.

Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.

С помощью свойства grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.

Читать дальше →

+9

alexzfort Aug 2 2020 at 23:05

Дайджест свежих материалов из мира фронтенда за последнюю неделю №426 (27 июля — 2 августа 2020)

3 min

9.1K

Website development*CSS*JavaScript*HTML*

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+32

ledamint Jul 27 2020 at 22:15

Urban Bot или как писать чат-ботов для Telegram, Slack, Facebook… на React.js

11 min

20K

JavaScript*Node.JS*ReactJS*TypeScript*

В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.

Чат-бот — это чаще всего отдельный чат в мессенджере, в котором вы общаетесь не с человеком, а с программой. Он может присылать сообщения в виде текста, изображений, кнопок и многих других UI элементов и реагировать на сообщения от пользователей. Современные чат-боты — это полноценные UI приложения внутри мессенджеров.

В отличии от большинства чат-бот библиотек, которые чаще всего просто оборачивают http запросы в функции с готовыми аргументами и предоставляют подписки вида bot.on('message', callback), иногда позволяя передавать контекст между вызовами, Urban Bot предлагает совершенно иной подход к разработке чат-ботов — через декларативное программирование и компонентный подход. Живой пример, написанный на Urban Bot, вы можете попробовать в Telegram, cсылка на чат-бот, и посмотреть код на GitHub.

Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.

Читать дальше →

+20

skillfactory_school Jul 9 2020 at 13:30

Фронтенд-тренировка: делаем клоны Discord, Jira, SoundCloud, Apple Stock, шахмат, озвучки и курсов валют

3 min

5.8K

Website development*Programming*Skillfactory corporate blogStudying in IT

Translation

Предлагаем вашему вниманию идеи/задачи (не решения) для самостоятельного изучения и оттачивания мастерства.

Клон SoundCloud

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

Чему вы научитесь, создав клон SoundCloud:

Как загружать и хранить песни в базе данных.
Всем основам работы с медиаплеером — как проигрывать треки, перематывать их, ставить на паузу и т.д.
Как делиться треками с друзьями.
Как отображать график, показывающий длительность и ход исполнения песни.

Читать дальше →

+2

phil_b Mar 19 2020 at 21:43

CSS разработчики — почему они нужны миру?

7 min

13K

Website development*History of IT

Translation

Аудио версия на русском (яндекс.музыка) / iTunes

В последние десять лет CSS сильно разросся путём добавления всё большего числа возможностей, таким образом постепенно становясь довольно сложным и запутанным. CSS наших дней сильно отличается от CSS десятилетия 2001-2010 годов.

Прежде чем я начну объяснять, почему миру нужны разработчики CSS, мы должны вернуться назад и посмотреть на историю CSS.

Обложка поста с жёлтой уточкой

Обложка поста с жёлтой уточкой

Читать дальше →

+10

VitaliSergey Mar 12 2020 at 13:43

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

3 min

97K

Website development*JavaScript*GitHub*Studying in IT

Translation

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

Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.

А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.

Читать дальше →

+62

aio350 Mar 11 2020 at 14:49

Визуализация работы сервис-воркеров

5 min

16K

Website development*JavaScript*Programming*

Translation

Доброго времени суток, друзья!

Вероятно, многие из вас слышали о таком новшестве в экосистеме JavaScript, как сервис-воркеры (Service Workers), которые являются ключевым элементом современной веб-разработки. Сервис-воркеры становятся все более востребованными, в первую очередь, благодаря популярности прогрессивных веб-приложений (Progressive Web Applications — PWA).

Когда я впервые услышал о них, я задался вопросом: «Когда мы должны использовать сервис-воркеры? В каким сценариях или контексте мы можем их использовать?»

В данной статье мы рассмотрим несколько практических примеров использования сервис-воркеров, что впоследствии, смею надеяться, сделает счастливыми ваших пользователей.

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

Читать дальше →

+17

ru_vds Feb 7 2020 at 13:00

Профессия: фронтенд-разработчик

12 min

95K

Website development*RUVDS.com corporate blogIT career

ххх: на чём пишешь фронтенд?
yyy: на костылях и велосипедах
ххх: ммм, хороший фреймворк!
Bash.im

Когда приходит мысль стать программистом, ты вдохновенно открываешь справочник Шилдта по С, заказываешь толстую книгу Страуструпа по С++ и учишься шутить про указатель на указатель на указатель и про рекурсию. Жёсткая романтика первого времени… Но всё меняется, когда в твою жизнь случайно приходит JavaScript. «Какой он простой, понятный, какой классный синтаксис! Всё, решено, буду писать сайты», — думает начинающий программист и решает стать гуру всея веба. Но потом выбранный стек меняет своё дружелюбное лицо, и чем дальше, тем больше. Но ты уже не можешь остановиться, потому что ты один из них — фронтенд-разработчиков. Тех самых, которые «смотрящие за мордой сайта». Ну что, захотелось присоединиться? Тогда для вас 2 серия нашего спецраздела «Профессия:…»

Мы уже готовили эту статью, когда в среду вышел пост «Хабр Карьеры» с интервью представителя онлайн-школы о работе фронтенда, что не могло не радовать: значит, в нашей серии «Профессия:..» появится очередной нужный, полезный, актуальный материал. Кстати, первый выпуск был посвящён профессии системного администратора.

Читать дальше →

+33

MarcusAurelius Jan 24 2020 at 00:18

Современный курс по Node.js в 2020

4 min

110K

Website development*JavaScript*Programming*Node.JS*Studying in IT

Tutorial

Дорогие товарищи инженеры, сообщество Метархия представляет вашему вниманию современный курс по Node.js, который включает глубокий разбор всех возможностей и аспектов платформы. Основной упор делается на то, как создавать надежные высоконагруженные сервера приложений и API без привязки к конкретному фреймворку и даже протоколу, т.е. абстрагировать бизнес-логику в отдельный слой. К лекциям прикреплено множество примеров кода, демонстрирующих гибкую структуру приложений и архитектурные приемы, в том числе работу с СУБД через слой доступа к данным, создание интерактивных приложений на вебсокетах, обеспечение безопасности, Graceful shutdown, межпроцессовое взаимодействие, предотвращение утечек памяти, масштабирование и кластеризацию при помощи процессов и потоков. На текущий момент в курсе 38 лекций (около 35 и ½ часов видео), 37 репозиториев с примерами кода, 4 PDF со слайдами. Перед основной частью курса по Node.js нужно сначала освоить хоть частично курс по асинхронному программированию.

Читать дальше →

+40

wentout Oct 10 2019 at 22:07

Наследование в JavaScript с точки зрения занудного ботаника: Фабрика Конструкторов

15 min

8.4K

Translation

lamp of light and apple of discord

Это история об одной очень специальной части JavaScript, самого используемого искусственного языка в мире в настоящее время (2019).

В статье представлен своего рода философский взгляд на Наследование в JavaScript, и я смею лишь надеяться, что он основан на самом впечатляющем источнике познания: самой жизни во всех её проявлениях. Не знаю было ли это источником вдохновения при создании дизайна цепочки прототипов в JavaScript.

Но если так, то это настолько значимо и сильно, что когда я начинаю думать об этом, то порою становится даже трудно дышать…

( все ссылки подчёркнуты )

Читать дальше →

+5

sofonia Aug 22 2018 at 14:52

Как Яндекс готовит фронтендеров. От программы на Coursera до курсов в университете

4 min

17K

CSS*JavaScript*Programming*Яндекс corporate blogHTML*

Мы в Яндексе не только много работаем с фронтендом, но и делимся своим опытом с другими. За шесть лет преподавательской практики мы запустили разные форматы обучения, о которых сегодня расскажем читателям Хабра.

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

Читать дальше →

+15

Plarium Jun 21 2016 at 17:43

Создаем приложение на JavaScript с помощью React Native

27 min

155K

JavaScript*Development of mobile applications*API*Plarium corporate blogReactJS*

Translation

В этом уроке мы будем изучать React Native – фреймворк от компании Facebook для создания нативных приложений под iOS и Android. У него много общего с другим очень популярным фреймворком от Facebook – React Javascript, который предназначен для построения декларативных пользовательских интерфейсов.

Читать дальше →

+27

User-1 Jul 27 2018 at 17:42

Apollo: 9 месяцев — полет нормальный

9 min

20K

Website development*JavaScript*API*ReactJS*Rambler&Co corporate blog

Всем привет, меня зовут Семен Левенсон, я работаю teamlead’ом на проекте «Поток» от Rambler Group и хочу рассказать о нашем опыте использования Apollo.

Объясню, что такое «Поток». Это автоматизированный сервис для предпринимателей, позволяющий привлекать клиентов из Интернета в бизнес, не вовлекаясь в рекламу, и быстро создавать простые сайты, не являясь экспертом в верстке.

+23

MordorReal Jul 8 2018 at 15:24

Самые распространенные ошибки в вашем React коде, которые вы (возможно) делаете

5 min

101K

JavaScript*ReactJS*

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

Весь код написан в ES6 стиле, поэтому, что бы повторить его вам нужно использовать Babel в вашем проекте (а еще есть такие кто его не использует?).

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

Если вам интересно, то добро пожаловать под кат.

Читать дальше →

+20