Webchic - frontend, backend, ci/cd
995 subscribers
273 photos
22 videos
1.11K links
Канал о Web разработке, для фронтов и full stack.

По рекламе @adtgassetsbot
Admin: @Aleksei

🐍Python - @python_lounge
👨‍💻Другие языки - @cccoding
🥷Хакер/ИТ безопасность - @it_ha
Download Telegram
​​🤘Мои 3 совета про Flexbox, которые улучшат ваш CSS

Когда я делаю ревью CSS, то часто сталкиваюсь с некоторыми ошибками, которые связаны с Flexbox. В этой статье я хочу поделиться ими, чтобы вы больше их не делали.
[ Статья ]
​​​​Доброго дня, дорогой подписчик!

На связи админ канала @Aleksei
Хочу поделиться тем, чем занимался последние месяцы)

Если коротко:
— Написал книгу про Telegram. 
— Сегодня уходит в тираж и мы открываем предпродажи первых 100 экземпляров

Как всё начиналось?
Я захотел написать книгу ещё в 2017 году. Но все время откладывал, оправдывая себя тем, что работаю и некогда заниматься тем, что не приносит деньги здесь и сейчас. А в итоге, за чуть больше, чем 1,5 месяца мы с редактором Катей Чистяковой написали книгу, которая, на мой взгляд является самым лучшим продуктом на рынке Telegram сегодня

Книга “Миллион в Telegram” является исчерпывающим практическим руководством для новых телеграм-админов и бизнеса (как искать новых клиентов и зарабатывать больше)

Вот некоторые главы книги:
 ⁃ Как выбрать тематику канала
 ⁃ Как закупать рекламу
 ⁃ Как продавать рекламу
 ⁃ Как создать блог для бизнеса и продавать через него больше чем в @instagram
 ⁃ Как покупать/продавать каналы
 ⁃ Как зарабатывать в Телеграм новичкам без бюджета (контенщики, дизайнеры (посты, упаковка каналов) и тд)
Мы вложили в эту книгу душу, время и деньги. И вложим ещё очень много чтобы постараться продать ее в России и странах СНГ.

Первый тестовый тираж решили сделать в 100 книг, на сегодня забронировано 47 экземпляров. 

Стоимость книги:
 1. Печатная версия 790 рублей 
 2. Печатная + электронная версия 990 рублей 
 3. Печатная + электронная + аудиокнига 1490 рублей 

🖊Хотите в числе первых забронировать книгу с авторским автографом? 

Пишите «ХОЧУ КНИГУ» менеджеру @IraRyira и она поможет оформить заказ.

Всем добра и отличных выходных🙌
​​8 лучших ресурсов для CSS-анимаций.

👉Whirl - Созданный Джеем Томпкинсом, мастером CSS, Whirl - это сайт для скачивании анимаций загрузки CSS.

👉Magic Effects - это набор простых анимаций для включения в ваши проекты веб-приложений.

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

👉Animate.css - одна из тех библиотек, которые отлично подходят для выделения, домашних страниц, ползунков и подсказок.

👉Hover.css - Коллекция CSS3-эффектов при наведении курсора, применяемых к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. Д. Легко применяется к вашим собственным элементам, вы можете изменять или просто использовать для вдохновения. Доступен в CSS, Sass и Less

#css
Сегодня 27-ой День Рождения у Саши Митрошиной и я хочу поздравить и поблагодарить её.

На мой взгляд Саша - самый осознанный блогер в России, на которую смотрят и взаимодействуют миллионы девушек. 
Мне стало интересно читать ее около семи месяцев назад и мне определённо нравятся ценности, которые она транслирует в своём блоге.
Саша помогает тысячам ребят начать зарабатывать на Instagram, делает массу интересных проектов и при этом остаётся настоящей и показывает миллионам, что можно жить в кайф, ценить людей вокруг и развиваться в абсолютно разных сферах (она научилась танцевать, прошла МBA, прокачала свой английский, фотографировует на пленку и постоянно ищет новые пути развития себя, как человека, предпринимателя и инфлюкнсера в десятках разных сфер жизни)

Подписывайся на Сашу и открывай для себя новые границы:
https://t.me/mitroshinanegoduet
​​Пара советов к прохождению технических интервью.

"Сегодня я попробую сформулировать основные моменты, которые лично мне, как интервьюеру, кажутся довольно важными.
Советы довольно очевидные (хотя, как показывает практика, бывают и те, кто не знает этих очевидных вещей) и субъективные."

[ Статья ]

#softskills
Выбор CSS макета — Grid или Flexbox?
Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли.
Читать статью.
​​С 0 до гуру в Python за 10 минут в день.

Instagram, Pinterest, Reddit, Dropbox и Mozilla - все эти проекты написаны на Python.

Разработчик-практик, участвующий в создании приложения BlaBlaCar, создал канал PythonGuru, где уже 5 000 человек прокачивают свои знания по пайтону каждый день.

На канале прямо сейчас:
— Вы получите доступ к скачиванию платных курсов и книг по изучению Python 3 и Django.
— Узнаете основы машинного обучения
— Обучитесь основам

Можно потратить кучу денег и времени на изучение Python, а можно подписаться на PythonGuru и получать знания быстро, бесплатно и качественно.

Не упусти свой шанс, подпишись на PythonGuru и совершенствуйся!
​​HTML <iframe> Тег

Пример:

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

Определение и использование
<iframe>Тег определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа в текущий HTML-документ.
​​Личный опыт: как нетехнарю стать фронтом

Это может быть страшно — сменить сферу деятельности и из нетехнаря превратиться в ИТ- специалиста. Однако вокруг нас всё больше примеров таких успешных трансформаций. В том числе — истории нескольких выпускников HTML Academy, которые не только получили новые знания, но и смогли найти работу для их применения на практике.

[ Статья ]
​​CSS свойство webkit-line-clamp.

Ограничивает текст заданным числом строк, при превышении текст обрезается и в конце добавляется многоточие.

p {
 -webkit-line-clamp: 3
}

#css
​​HTML <iframe> Тег

Пример:

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>

Определение и использование
<iframe>Тег определяет встроенный фрейм.
Встроенный фрейм используется для встраивания другого документа в текущий HTML-документ.

Совет: рекомендуется всегда включать атрибут title для <iframe>. Это используется программами чтения с экрана для чтения содержимого <iframe> .
​​Eval: выполнение строки кода
Встроенная функция eval позволяет выполнять строку кода.
[ Статья ]
​​Примеры поведения и навыков на которые часто обращают внимание во время работы в команде

➡️ Быть приветливым и позитивным
➡️ Уважительно относится к различным точкам зрения и опыту (особенно касается "самых умных" сеньоров)
➡️ Позитивно принимать конструктивную критику (особенно когда ревьюят ваш код)
➡️ Сосредоточить внимание на том, что будет лучше для команды
➡️ Брать на себя дополнительную ответственность, такие действия позволяют расти во всех рабочих аспектах
➡️ Быть упорным и добивать задачи до конца
➡️ Делать работу хорошо, красивый код и качественно выполненная работа позволит получать удовольствие от того что ты делаешь, что в свою очередь добавит мотивации в дальнейшем
​​Создание приложений на Angular с использованием продвинутых возможностей DI
[ Личный опыт ].

Меня зовут Андрей, и я занимаюсь разработкой фронтенда на Angular для внутренних продуктов компании. Фреймворк обладает обширными возможностями, одни и те же задачи можно решить огромным количеством способов. Чтобы облегчить свою работу и повысить продуктивность, я задался целью найти универсальный и не сложный подход, который бы упростил проектирование и позволил уменьшить объем кода при сохранении его читаемости. Перепробовав множество различных вариантов и учтя допущенные ошибки, я пришел к архитектуре, которой хочу поделиться в этой статье.

[ Статья ]
​​Кратко о пороге входа во фронтенд (на текущий период).

✅ HTML - обязательно
✅ CSS - обязательно
✅ JavaScript - как минимум на начальном уровне
✅ React / Angular / Vue - тоже что и для JS
✅ Git - знание основных команд
✅ Знание английского языка - опционально, но если знаете выбор вакансий становится шире
✅ Умение решать самостоятельно небольшие задачи - это не значит что не нужно ничего спрашивать, нужно выдержать золотую середину
✅ Быть коммуникабельным / не быть «токсичным» - звучит банально но в силу опыта показалось что на это смотрят чаще чем на hardskills
Object.keys, values, entries
Давайте отойдём от отдельных структур данных и поговорим об их переборе вообще.
В предыдущей главе мы видели методы map.keys(), map.values(), map.entries().
Это универсальные методы, и существует общее соглашение использовать их для структур данных. Если бы мы делали собственную структуру данных, нам также следовало бы их реализовать.
Методы поддерживаются для структур:
Map
Set
Array
Простые объекты также можно перебирать похожими методами, но синтаксис немного отличается.
Object.keys, values, entries
Для простых объектов доступны следующие методы:
Object.keys(obj) – возвращает массив ключей.
Object.values(obj) – возвращает массив значений.
Object.entries(obj) – возвращает массив пар [ключ, значение].
Обратите внимание на различия (по сравнению с map, например):

Map Object Синтаксис вызова map.keys() Object.keys(obj), не obj.keys() Возвращает перебираемый объект «реальный» массив Первое отличие в том, что мы должны вызвать Object.keys(obj), а не obj.keys().
Почему так? Основная причина – гибкость. Помните, что объекты являются основой всех сложных структур в JavaScript. У нас может быть объект data, который реализует свой собственный метод data.values(). И мы всё ещё можем применять к нему стандартный метод Object.values(data).
Второе отличие в том, что методы вида Object.* возвращают «реальные» массивы, а не просто итерируемые объекты. Это в основном по историческим причинам.
[ Полная статья... ]
​​🧐DIV должен уйти?!
Улучшаем HTML

[ Статья ]
​​Самые полезные веб-сайты для веб-разработчиков ии фронтендеров.

👉🏻W3Schools - W3schools - это бесплатный образовательный сайт для обучения программированию онлайн.
👉🏻GitHub - GitHub - это платформа разработки, управляемая сообществом, где вы можете изучить новые методы у более чем 23 миллионов разработчиков, а также поделиться своими знаниями и ресурсами.
👉🏻StackOverflow - Всеми любимый stackoverflow Это действительно идеальное место в сети для любого начинающего разработчика, и не только.
Кто ищет новые приемы кодинга и хочет расширить свои знания, тот, рано или поздно, окажется на этой платформе.
👉🏻SitePoint - стартовал еще в 2009 году и является одним из крупнейших центров разработки в Интернете.
👉🏻CSS-Tricks - Ежедневные статьи о CSS, HTML, JavaScript и обо всем, что связано с веб-дизайном и разработкой.
👉🏻CodePen.io - еще один из моих любимых веб-сайтов, который я настоятельно рекомендую frontend разработчикам всех уровней.
7 лучших библиотек для создания молниеносно быстрых приложений ReactJS

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

[ Статья ]
Советы по стилю кода для фронтендеров.
[ Статья ]
​​Какой технологический стек выбрать для разработки сайта?

Многие могут подумать: "Зачем заморачиваться над этим вопросом, если для клиентов главное, чтобы сайт работал правильно, а выбор технологии — дело разработчиков!" И так оно и есть, за исключением важного нюанса - выбранная технология напрямую влияет на производительность сайта. Но верно и обратное — тип сайта и его основная цель влияет на выбор технологии.

Статья