23 сентября 2020 — 2 октября 2020 пройдёт онлайн конференция по всему миру - Frontend Live, посвященная всем аспектам разработки клиентской части веб проектов.
Мероприятие платное, но 25-26 сентября бесплатные дни. Чтобы посмотреть трансляцию, достаточно зарегаться тут
Расписание - https://bit.ly/2ZGOejA
Мероприятие платное, но 25-26 сентября бесплатные дни. Чтобы посмотреть трансляцию, достаточно зарегаться тут
Расписание - https://bit.ly/2ZGOejA
September 16, 2020
Если у вас лендинг без конструкторов и вам нужно оперативно откликаться на заявки, то вместо почты вы можете организовать отправку заявок в Telegram.
👉Инструкция
👉Инструкция
vc.ru
Как отправлять заявки с лендинга прямо в Telegram — Разработка на vc.ru
Часто возникает потребность сделать простенький лендинг для сбора лидов без использования конструктора. При этом важную роль играет скорость реакции на полученные заявки, поэтому почта не всегда подходит для этого. В этом гайде я расскажу вам, как быстро…
September 17, 2020
Всем привет!
Не знаю как у других, но у меня с вёрсткой не всегда все гладко и часто приходится гуглить проблемы. И дело не в сложности, а просто в отсутствии обширной практики. А в наше время CSS совсем не простая штука, очень много всевозможных нюансов, о которых нужно знать.
Одна из проблем, с которой сталкивался - вертикальное выравнивание текста.
Вот небольшой материал на эту тему
#css
Не знаю как у других, но у меня с вёрсткой не всегда все гладко и часто приходится гуглить проблемы. И дело не в сложности, а просто в отсутствии обширной практики. А в наше время CSS совсем не простая штука, очень много всевозможных нюансов, о которых нужно знать.
Одна из проблем, с которой сталкивался - вертикальное выравнивание текста.
Вот небольшой материал на эту тему
#css
Webformyself
Вертикальное выравнивание текста в кнопках и элементах ввода
Вертикальное выравнивание текста интерактивных элементов. Свойства font-size, line-height, padding, border. Альтернативный подход
September 18, 2020
Все, работать сил нет, с 7 утра мучения над сложной задачей((((
Кто в таком же настроении - приступаем к тяпнице пятнице!
ЗЫ Кстати, немного юмора - 13 историй с собеседований
#юмор
Кто в таком же настроении - приступаем к тяпнице пятнице!
ЗЫ Кстати, немного юмора - 13 историй с собеседований
#юмор
Хабр
Украденное резюме, человек, который ушел в Кемерово, призыв кандидата и другие истории трэш-собеседований
За время работы в IT-рекрутинге у нас накопилось много историй о смешных, нелепых и странных собеседованиях как от разработчиков, так и от HR. Поэтому решили запустить рубрику «Трэш-собеседования»,...
September 18, 2020
Всем привет! 🖖
Каждый раз, когда я начинаю новый проект, сталкиваюсь с муками выбора структуры CSS.
Насколько я знаю, у многих так.
Чаще всего я пользуюсь SCSS и применяю паттерн, о котором я писал 7-1.
Иногда это гибридные варианты, когда в Реакт использую модули.
Сейчас текущий проект так организован - размещение файлов стилей у каждого компонента(не модули), но подключение в едином файле по паттерну 7-1.
Да, можно приводить доводы, что вот этом проекте вот так оптимальнее, а в этом вот эдак. Но суть в том, что бы не только вы это понимали. Поэтому лично я предпочитаю общепринятые методики, в команде и для дальнейшей поддержки проекта это гораздо важнее.
Сегодня прочел ещё один интересный вариант, думаю попробую в следующий раз.
А как вы структурирует CSS? Поделитесь в чате
ЗЫ Если кто не читал про паттерн 7-1
#css
Каждый раз, когда я начинаю новый проект, сталкиваюсь с муками выбора структуры CSS.
Насколько я знаю, у многих так.
Чаще всего я пользуюсь SCSS и применяю паттерн, о котором я писал 7-1.
Иногда это гибридные варианты, когда в Реакт использую модули.
Сейчас текущий проект так организован - размещение файлов стилей у каждого компонента(не модули), но подключение в едином файле по паттерну 7-1.
Да, можно приводить доводы, что вот этом проекте вот так оптимальнее, а в этом вот эдак. Но суть в том, что бы не только вы это понимали. Поэтому лично я предпочитаю общепринятые методики, в команде и для дальнейшей поддержки проекта это гораздо важнее.
Сегодня прочел ещё один интересный вариант, думаю попробую в следующий раз.
А как вы структурирует CSS? Поделитесь в чате
ЗЫ Если кто не читал про паттерн 7-1
#css
Webformyself
Моя структура CSS
Создаем оптимальную структуру CSS вместе: компоненты, папки, файлы, элементы. Настройки
September 20, 2020
Всем привет!
Знаю, что у нас на канале большинство ещё учиться.
Если кто задумался о Реакте, инфа для вас.
Введение в React, которого нам не хватало
#react
Знаю, что у нас на канале большинство ещё учиться.
Если кто задумался о Реакте, инфа для вас.
Введение в React, которого нам не хватало
#react
Хабр
Введение в React, которого нам не хватало
React — это самая популярная в мире JavaScript-библиотека. Но эта библиотека не потому хороша, что популярна, а потому популярна, что хороша. Большинство существ...
September 22, 2020
Всем привет!
После написания мессенджера для портфолио, я высказал свое мнение, что против больших и сложных проектов для вашего первого портфолио. В кратце - я считаю, что несколько не больших проектов проще сделать, быстрее и научитесь на них вы большему. Конечно, если они разносторонние. Не говоря о том, что большой и сложный проект велики шансы не закончить, либо растянуть на нереальные сроки.
К чему я это вспомнил?
А с первой работой я бы советовал такой же подход. У меня сейчас впервые с самого начала работы пошли более-менее типовые задачи. Т.е. сделать небольшие компоненты, получить данные, обработать и тд и тп. Короче, я отдыхаю, но...я заметил, что еще и развиваюсь на них! Задачи, вроде, не сложные, но в совокупности с проектом нужно многое продумать, потестить, погуглить. Постоянно какие-то новые мелочи узнаю. Тут новую фишку узнаю, там что-то новое загуглю - постоянно открываешь новые знания.
Да, это быстро освоится, рука набьется и чаще и чаще у вас все на автоматизме будет. Но я пришел к выводу - что так и нужно начинать работу в IT. Да как и в любом деле - от простого к сложному.
Поэтому, старайтесь найти первую работу по силам и она будет приносить вам удовольствие и быстрый рост!
Не распыляйтесь на весь веб, это не возможно. Выбирайте нужный стек и становитесь профессионалами.
Всем удачи 🖖
После написания мессенджера для портфолио, я высказал свое мнение, что против больших и сложных проектов для вашего первого портфолио. В кратце - я считаю, что несколько не больших проектов проще сделать, быстрее и научитесь на них вы большему. Конечно, если они разносторонние. Не говоря о том, что большой и сложный проект велики шансы не закончить, либо растянуть на нереальные сроки.
К чему я это вспомнил?
А с первой работой я бы советовал такой же подход. У меня сейчас впервые с самого начала работы пошли более-менее типовые задачи. Т.е. сделать небольшие компоненты, получить данные, обработать и тд и тп. Короче, я отдыхаю, но...я заметил, что еще и развиваюсь на них! Задачи, вроде, не сложные, но в совокупности с проектом нужно многое продумать, потестить, погуглить. Постоянно какие-то новые мелочи узнаю. Тут новую фишку узнаю, там что-то новое загуглю - постоянно открываешь новые знания.
Да, это быстро освоится, рука набьется и чаще и чаще у вас все на автоматизме будет. Но я пришел к выводу - что так и нужно начинать работу в IT. Да как и в любом деле - от простого к сложному.
Поэтому, старайтесь найти первую работу по силам и она будет приносить вам удовольствие и быстрый рост!
Не распыляйтесь на весь веб, это не возможно. Выбирайте нужный стек и становитесь профессионалами.
Всем удачи 🖖
September 25, 2020
September 26, 2020
Всем привет!
Наткнулся на интересный репозиторий - 30 second of code
Более сотни коротких кусочков кода. Залипнуть можно на долго, многое может пригодиться для решения ваших задач.
Рекомендую 👍
#js
Наткнулся на интересный репозиторий - 30 second of code
Более сотни коротких кусочков кода. Залипнуть можно на долго, многое может пригодиться для решения ваших задач.
Рекомендую 👍
#js
GitHub
GitHub - Chalarangelo/30-seconds-of-code: Coding articles to level up your development skills
Coding articles to level up your development skills - Chalarangelo/30-seconds-of-code
September 27, 2020
Реактивный ... CSS!
Чего, чего??? А такое бывает? Это мои первые мысли, когда я увидел перевод статьи от Adam Crockett
👉Подробнее
#css
Чего, чего??? А такое бывает? Это мои первые мысли, когда я увидел перевод статьи от Adam Crockett
👉Подробнее
#css
Webformyself
Как сделать CSS реактивным!
Реактивный CSS: что такое, как и зачем его таким делать. Разделение задач. Функция Calc. Собственные свойства из переменных sass
September 29, 2020
September 29, 2020
Классная статья - Оптимизация подключения REST API для React приложений
Спойлер - там не только про Реакт. Рекомендую всем почитать
#js #api
Спойлер - там не только про Реакт. Рекомендую всем почитать
#js #api
vc.ru
Оптимизация подключения REST API для React приложений — Разработка на vc.ru
Инструкция направлена на оптимизацию способа обмена данными между клиентом и сервером.
September 30, 2020
Всем привет!🖖
Я уже сталкивался с библиотекой Vix в React и вот наткнулся на обзор на русском
GitHub - https://github.com/airbnb/visx
Документация и примеры - https://airbnb.io/visx
#react
Я уже сталкивался с библиотекой Vix в React и вот наткнулся на обзор на русском
GitHub - https://github.com/airbnb/visx
Документация и примеры - https://airbnb.io/visx
#react
Хабр
Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb
После 3 лет разработки и 2,5 лет использования в продакшн-проектах Airbnb, после переписывания кода на TypeScript, мы рады представить вам официальный релиз коллекции графических примитивов visx 1.0 ...
October 1, 2020
Всем привет!
Последнее время постоянно в требованиях стоит создание кастомных полос прокрутки.
Если вы ещё не делали, попробуйте - я уже не представляю скролл без них.
Простая инструкция - создаём полосу прокрутки на CSS
#css
Последнее время постоянно в требованиях стоит создание кастомных полос прокрутки.
Если вы ещё не делали, попробуйте - я уже не представляю скролл без них.
Простая инструкция - создаём полосу прокрутки на CSS
#css
Webformyself
Создание пользовательской полосы прокрутки на CSS
24 строки кода: создаем пользовательскую полосу прокрутки за 24 строки с помощью CSS, HTML, JavaScript.
October 2, 2020
Всем привет!
Недавно в чате было обсуждение - как организовывать статус пользователей. И если по статусам, получаемым от сервера(например, online, offline) все ясно, то как организовать статусы, которые только на клиенте можно отследить? Например, afk, idle и тп
Тогда я ответил, что скоро буду писать код, отвечающий за подобные статусы и поделюсь решением.
Первоначально, я планировал так - организовываю слежку за активностью пользователя (движения мыши, клики, нажатия клавиш), вешаю глобальным обработчиком, при смене статуса отправляю уведомление на сервер.
В жизни решил эту проблему так же, но гораздо проще))) Коллега подсказал просто супер билиотеку - React Idle Timer. Простая в использовании, но очень мощная. Да, она для React, но уверен, что есть аналоги и для других фреймворков + можно посмотреть исходники))))
Хорошая, документация, примеры, TypeScript - короче, рекомендую!
зы страничка на github
ззы Прикреплю скрин - на Хуках весь код вышел в несколько строк! В документации в примерах все есть
#react
Недавно в чате было обсуждение - как организовывать статус пользователей. И если по статусам, получаемым от сервера(например, online, offline) все ясно, то как организовать статусы, которые только на клиенте можно отследить? Например, afk, idle и тп
Тогда я ответил, что скоро буду писать код, отвечающий за подобные статусы и поделюсь решением.
Первоначально, я планировал так - организовываю слежку за активностью пользователя (движения мыши, клики, нажатия клавиш), вешаю глобальным обработчиком, при смене статуса отправляю уведомление на сервер.
В жизни решил эту проблему так же, но гораздо проще))) Коллега подсказал просто супер билиотеку - React Idle Timer. Простая в использовании, но очень мощная. Да, она для React, но уверен, что есть аналоги и для других фреймворков + можно посмотреть исходники))))
Хорошая, документация, примеры, TypeScript - короче, рекомендую!
зы страничка на github
ззы Прикреплю скрин - на Хуках весь код вышел в несколько строк! В документации в примерах все есть
#react
October 6, 2020
October 7, 2020
Всем привет!
Сейчас на работе потребовалось освоить SSG - генератор создания статических сайтов. Т.к. я использую React, то выбор пал на Gatsby - модная штука, особо часто сейчас используют, при переводе сайтов в wordpress на React.
Кратко: Gatsby позволяет отвязать сайт от БД. Сайт становится статичным и быстро грузится (Реакт в чистый HTML) и появляется возможность хостиинга на халявные сайты, где нет поддержки БД.
На практике пока могу одно сказать - нужно знать graphQl (хотя и без него можно, но с ним вся фишка) и немного напрягают другие мелочи, возможно, я просто не разобрался еще.
Кстати, сегодня утром прочел статью, где автор как раз сравнивает ssg решения - Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?
#ssr #react #gatsby #next
Сейчас на работе потребовалось освоить SSG - генератор создания статических сайтов. Т.к. я использую React, то выбор пал на Gatsby - модная штука, особо часто сейчас используют, при переводе сайтов в wordpress на React.
Кратко: Gatsby позволяет отвязать сайт от БД. Сайт становится статичным и быстро грузится (Реакт в чистый HTML) и появляется возможность хостиинга на халявные сайты, где нет поддержки БД.
На практике пока могу одно сказать - нужно знать graphQl (хотя и без него можно, но с ним вся фишка) и немного напрягают другие мелочи, возможно, я просто не разобрался еще.
Кстати, сегодня утром прочел статью, где автор как раз сравнивает ssg решения - Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?
#ssr #react #gatsby #next
Хабр
Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?
Мы, выбирая фреймворк для нового веб-проекта, обычно склонны останавливаться на инструментах, с которыми знакомы, не обращая внимания на то, насколько хорошо они подходят для этого проекта. Я же...
October 8, 2020
Если кто использует React+Redux, но ещё не пробовал хуки именно Redux - вот прям настоятельно рекомендую!
ЗЫ Вот не плохая статья на этот счёт.
#react #redux
ЗЫ Вот не плохая статья на этот счёт.
#react #redux
Medium
How to Hook Redux in a React App
In this article we’ll learn how to use the new Redux hooks to build a food ordering app. It’ll cover various UI patterns like fetching…
October 10, 2020
Продолжу тему библиотек для управления состоянием приложения.
Классная статья - Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
#react #mobx
Классная статья - Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
#react #mobx
Хабр
Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее
Choices and consequences .. BY Ash-3xpired. Источник https://www.deviantart.com/ash-3xpired/art/Choices-and-consequences-198140687Меня зовут Назим Гафаров, я ра...
October 10, 2020
Всем привет!
Одна из востребованных задач в верстке - фиксация header (у меня в текущем проекте еще и footer фиксируется в некоторых компонентах).
Если вы еще не делали это при помощи Grid - эта статья вам в помощь! 👍
#css #grid
Одна из востребованных задач в верстке - фиксация header (у меня в текущем проекте еще и footer фиксируется в некоторых компонентах).
Если вы еще не делали это при помощи Grid - эта статья вам в помощь! 👍
#css #grid
Webformyself
Как использовать CSS Grid для закрепления хэдера и футера
Фиксированный хэдер и футер: как использовать CSS Grid. Базовые стили. Регулируемая ширина
October 12, 2020