Webchic - frontend, backend, ci/cd

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.* возвращают «реальные» массивы, а не просто итерируемые объекты. Это в основном по историческим причинам.
[ Полная статья... ]

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

✅ HTML - обязательно
✅ CSS - обязательно
✅ JavaScript - как минимум на начальном уровне
✅ React / Angular / Vue - тоже что и для JS
✅ Git - знание основных команд
✅ Знание английского языка - опционально, но если знаете выбор вакансий становится шире
✅ Умение решать самостоятельно небольшие задачи - это не значит что не нужно ничего спрашивать, нужно выдержать золотую середину
✅ Быть коммуникабельным / не быть «токсичным» - звучит банально но в силу опыта показалось что на это смотрят чаще чем на hardskills

​​Создание приложений на Angular с использованием продвинутых возможностей DI
[ Личный опыт ].

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

[ Статья ]

​​Примеры поведения и навыков на которые часто обращают внимание во время работы в команде

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

​​Eval: выполнение строки кода
Встроенная функция eval позволяет выполнять строку кода.
[ Статья ]

​​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> .

​​CSS свойство webkit-line-clamp.

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

p {
 -webkit-line-clamp: 3
}

#css

​​Личный опыт: как нетехнарю стать фронтом

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

[ Статья ]

​​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-документ.

​​С 0 до гуру в Python за 10 минут в день.

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

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

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

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

Не упусти свой шанс, подпишись на PythonGuru и совершенствуйся!

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

​​Пара советов к прохождению технических интервью.

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

[ Статья ]

#softskills

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

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

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

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

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

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

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

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

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

#css

​​​​Доброго дня, дорогой подписчик!

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

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

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

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

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

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

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

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

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

Всем добра и отличных выходных🙌

Vue.js: особенности, применение и отличия от других Javascript фреймворков

Vue подходит для небольших проектов, которым необходимо добавить немного реактивности, представить форму с помощью AJAX, отобразить значения при вводе данных пользователем, авторизация или другие аналогичные задачи. Vue легко масштабируется и хорошо подходит для объемных проектов, поэтому его называют прогрессивным фреймворком.
https://telegra.ph/Vuejs-osobennosti-primenenie-i-otlichiya-ot-drugih-Javascript-frejmvorkov-03-10

​​🤔Как без усталости кодить по восемь с лишним часов

Всю свою жизнь я писал код неправильно.
Я думал, что достаточно просто сесть за стол, открыть ноутбук, выбрать задачу из моего списка to-do и кодить, пока не устану.
Оказывается не всё так просто и есть хитрости и умения для более продуктивной работы.

[ Статья ]

#softskills

​​🔥Функция includes() в JavaScript

Метод includes() используется для проверки на наличие строки в определённой коллекции и возвращает true или false

Пример:
const garage = ['BMW','AUDI','VOLVO']\;
const findCar = garage.includes('BMW');
console.log(findCar);
//true;

#js