Привет, работяга!
Начнем с самого начала, и нам надо определить свой путь. Путь по которому мы будем двигаться. Вот мой план на ближайшие пол года, я назвал его "План работяги" . По нему мы будем двигаться. Поэтому обязательно ознакомся с ним!
Начнем с самого начала, и нам надо определить свой путь. Путь по которому мы будем двигаться. Вот мой план на ближайшие пол года, я назвал его "План работяги" . По нему мы будем двигаться. Поэтому обязательно ознакомся с ним!
Mamkin Web Developer pinned «Привет, работяга! Начнем с самого начала, и нам надо определить свой путь. Путь по которому мы будем двигаться. Вот мой план на ближайшие пол года, я назвал его "План работяги" . По нему мы будем двигаться. Поэтому обязательно ознакомся с ним!»
Привет, работяга!
Начнем с самых-самых основ, которые нужно понимать, для того чтобы быть не кодером, а разработчиком веб-приложений — из основных инструментов и технологий, на которых работает Интернет. Собрал наиболее крутые статьи, которые точно закроют вопросы: «а что такое DNS?», «зачем нужен IP?» и все в этом роде
• Как работает DNS (https://habr.com/ru/company/1cloud/blog/309018/);
• Принцип работы IP (https://www.c4.net/news/why-do-you-need-an-ip-address);
• И очень хорошо написанная статья о том, как компьютеры «общаются» между собой (https://habr.com/ru/post/307252/).
Понимания принципов работы сети — это ключ к более быстрому вхождению в Frontend, что даст возможность брать первые заказы на фрилансе и делать лендинги или одностраничные веб-приложения. Проще говоря, можно получать деньги не выходя из дома 😎
Если уже не терпиться получать заказы, можно начинать создавать сайты на Wix, Tilda или WordPress.
Ещё одним плюсом конструкторов является скорость запуска готового сайта. Проще говоря, готовый блог можно «поднять» меньше чем за 30 минут. Но, несмотря на все плюсы, у конструкторов есть один огромный минус — достаточно сильно скрывают механизм работы веб-приложения, что не очень то и хорошо.
Если ты уже и решил заняться разработкой веб-приложений, то я не советую задерживаться на конструкторах, ибо использовать их нужно только в крайних ситуациях, когда время очень сильно поджимает.
Работаем!
Теги:
#shelemakha_constructor
Начнем с самых-самых основ, которые нужно понимать, для того чтобы быть не кодером, а разработчиком веб-приложений — из основных инструментов и технологий, на которых работает Интернет. Собрал наиболее крутые статьи, которые точно закроют вопросы: «а что такое DNS?», «зачем нужен IP?» и все в этом роде
• Как работает DNS (https://habr.com/ru/company/1cloud/blog/309018/);
• Принцип работы IP (https://www.c4.net/news/why-do-you-need-an-ip-address);
• И очень хорошо написанная статья о том, как компьютеры «общаются» между собой (https://habr.com/ru/post/307252/).
Понимания принципов работы сети — это ключ к более быстрому вхождению в Frontend, что даст возможность брать первые заказы на фрилансе и делать лендинги или одностраничные веб-приложения. Проще говоря, можно получать деньги не выходя из дома 😎
Если уже не терпиться получать заказы, можно начинать создавать сайты на Wix, Tilda или WordPress.
Ещё одним плюсом конструкторов является скорость запуска готового сайта. Проще говоря, готовый блог можно «поднять» меньше чем за 30 минут. Но, несмотря на все плюсы, у конструкторов есть один огромный минус — достаточно сильно скрывают механизм работы веб-приложения, что не очень то и хорошо.
Если ты уже и решил заняться разработкой веб-приложений, то я не советую задерживаться на конструкторах, ибо использовать их нужно только в крайних ситуациях, когда время очень сильно поджимает.
Работаем!
Теги:
#shelemakha_constructor
Привет, работяги!
Верстка — это неотъемлемый пункт веб-разработки, так как он отвечает за самое важное — визуальную часть сайта. Сегодня я тебе расскажу о таком инструменте, как Figma. Она бесплатная, работает прямо в браузере и позволяет быстро создавать и просматривать макеты.
Основным минусом, и в тоже время плюсом, является то, что для работы — нужно хотя бы какое-то подключение к Интернету, ибо все файлы, которые созданы в Figma, хранятся в облаке.
Figma за счет своей доступности (не надо платить за подписку) и нетребовательности к ресурсам — завоевала очень большую поддержку у коммюнити разработчиков почти всех профилей. Перекладывая на наш профиль, при запросе "макет сайта figma" — в 99% случаев, ты найдешь огромное количество макетов. Также, за счет этого же коммюнити и открытого API — для Figma созданы плагины, которые должны покрыть все твои требования. Начиная от плагина, который позволяет экспортировать макет в HTML — заканчивая плагином, который позволяет синхронизировать поля в макете с Google Таблицами.
Расширяемый функционал и На фрилансе это позволит тебе быть более гибким, ведь если у тебя нету сейчас заказов, то теперь можно поискать заказ на макеты. Гибкость сейчас самое главное!
Держи ресурсы, которые тебе сильно помогут в макетировании:
• 40 минутный блиц-туториал (на английском);
• Курс по Figma (нужен VPN для загрузки курсов)
• Канал, на котором шарят макеты, новые функции и туториалы по Figma;
• Канал с плагинами для Figma.
Работяги, если будете шарить курс, то, пожалуйста, пересылайте этот пост полностью, чтобы человек видел плюсы и минусы Figma.
Работаем!
Теги:
#shelemakha_figma
Верстка — это неотъемлемый пункт веб-разработки, так как он отвечает за самое важное — визуальную часть сайта. Сегодня я тебе расскажу о таком инструменте, как Figma. Она бесплатная, работает прямо в браузере и позволяет быстро создавать и просматривать макеты.
Основным минусом, и в тоже время плюсом, является то, что для работы — нужно хотя бы какое-то подключение к Интернету, ибо все файлы, которые созданы в Figma, хранятся в облаке.
Figma за счет своей доступности (не надо платить за подписку) и нетребовательности к ресурсам — завоевала очень большую поддержку у коммюнити разработчиков почти всех профилей. Перекладывая на наш профиль, при запросе "макет сайта figma" — в 99% случаев, ты найдешь огромное количество макетов. Также, за счет этого же коммюнити и открытого API — для Figma созданы плагины, которые должны покрыть все твои требования. Начиная от плагина, который позволяет экспортировать макет в HTML — заканчивая плагином, который позволяет синхронизировать поля в макете с Google Таблицами.
Расширяемый функционал и На фрилансе это позволит тебе быть более гибким, ведь если у тебя нету сейчас заказов, то теперь можно поискать заказ на макеты. Гибкость сейчас самое главное!
Держи ресурсы, которые тебе сильно помогут в макетировании:
• 40 минутный блиц-туториал (на английском);
• Курс по Figma (нужен VPN для загрузки курсов)
• Канал, на котором шарят макеты, новые функции и туториалы по Figma;
• Канал с плагинами для Figma.
Работяги, если будете шарить курс, то, пожалуйста, пересылайте этот пост полностью, чтобы человек видел плюсы и минусы Figma.
Работаем!
Теги:
#shelemakha_figma
Привет, работяги!
HTML и CSS — одни из основных инструментв для каждого, кто решил заняться веб-разработкой. Как мне кажется, их должны уже включать в школьную программу. Ты конечно же не школьник, так что советую уже начинать с следующих курсов:
HTML:
1. HTML спецификация ( en )
2. Подробная информация по HTML ( en )
3. HTML спецификация ( ru )
CSS:
1. CSS спецификация (на английском)
2. Подробная информация по CSS (на английском)
3. CSS спецификация (локализированная, но не совсем полная версия оригинала)
4. Базовый урс, состоит из двух практик, который помогут научиться использовать Grid и Flexbox
5. CSS: The Missing Manual (2016 год)
6. Отзывчивый веб-дизайн (2012 год)
Полезно использовать:
1. Can i use — можешь посмотреть какие браузеры поддерживают то или иное свойство CSS или элемент HTML
2. Can i include — можешь посмотреть правила вложенности HTML-элементов (может ли дочерний элемент находится в родительском)
Думаю тут информацию за себя и за Сашку. Главное — как можно чаще пользуйся с Figma. Постоянная отрисовка макетов поможет тебе прокачать навык дизайнера и закрепить свои идеи визуально.
Работаем!
Теги:
#shelemakha_css #shelemakha_html
HTML и CSS — одни из основных инструментв для каждого, кто решил заняться веб-разработкой. Как мне кажется, их должны уже включать в школьную программу. Ты конечно же не школьник, так что советую уже начинать с следующих курсов:
HTML:
1. HTML спецификация ( en )
2. Подробная информация по HTML ( en )
3. HTML спецификация ( ru )
CSS:
1. CSS спецификация (на английском)
2. Подробная информация по CSS (на английском)
3. CSS спецификация (локализированная, но не совсем полная версия оригинала)
4. Базовый урс, состоит из двух практик, который помогут научиться использовать Grid и Flexbox
5. CSS: The Missing Manual (2016 год)
6. Отзывчивый веб-дизайн (2012 год)
Полезно использовать:
1. Can i use — можешь посмотреть какие браузеры поддерживают то или иное свойство CSS или элемент HTML
2. Can i include — можешь посмотреть правила вложенности HTML-элементов (может ли дочерний элемент находится в родительском)
Думаю тут информацию за себя и за Сашку. Главное — как можно чаще пользуйся с Figma. Постоянная отрисовка макетов поможет тебе прокачать навык дизайнера и закрепить свои идеи визуально.
Работаем!
Теги:
#shelemakha_css #shelemakha_html
Привет, работяги!
Надеюсь, ты уже понял зачем нужен CSS и что делает HTML. Если ты уже сверстал простенький сайт — ты наверное заметил, что он какой-то дубовый, не живой.
«Оживляют» сайт с помощью JavaScript. У этого языка огромное коммьюнити, под него создано куча фреймворков (Vue.js, Node.js, React и др.), но сейчас не об этом.
JS создавался в первую очередь для веба и прямо «с коробки» он позволяет управлять и модифицировать стили, двигать HTML-элементы и делать кучу крутых вещей. Больше скажу — специалист со знанием только HTML и CSS никому уже не нужен, так как современный сайт — это приложение, которое должно иметь минимальную, но логику, которую можно сделать, используя JS.
Для быстрого старта, рекомендую.
1. Книга по Javascript — хороший справочник.
2. MDN — очень доступно описанный W3C-стандарт, на котором работает веб.
3. Англоязычная песочница от Codecamp, который даст базовое понимание работы JS.
4. Англоязычная песочница от freecodecamp - полностью бессплатный, для усвоения основ подходит
5. You Don't Know JS 1 editional , You Don't Know JS 2 editional — серия книг, которая поможет изучить JS более глубоко
6. Выразительный Javascript — углубленное изучение JS, присутствуют задания. Желательно читать после прочтения You Don't Know JS.
7. Basic JS — 50+ часовой курс с доступно изложенным материалом и практическими примерами.
Помни, что надо заниматься регулярно. Это нормально, что материал усваивается не сразу. В большинстве случаев на StackOverflow уже есть ответ на твой вопрос. Так что, не отчаивайся и не забрасывай обучение — у тебя все получится!
Работаем по провереной схеме, кто-то запрашивает информацию по Js. Скидываешь целый пост, что бы смог найти себе что-то подходящее!
Работаем!
Теги:
#shelemakha_js
Надеюсь, ты уже понял зачем нужен CSS и что делает HTML. Если ты уже сверстал простенький сайт — ты наверное заметил, что он какой-то дубовый, не живой.
«Оживляют» сайт с помощью JavaScript. У этого языка огромное коммьюнити, под него создано куча фреймворков (Vue.js, Node.js, React и др.), но сейчас не об этом.
JS создавался в первую очередь для веба и прямо «с коробки» он позволяет управлять и модифицировать стили, двигать HTML-элементы и делать кучу крутых вещей. Больше скажу — специалист со знанием только HTML и CSS никому уже не нужен, так как современный сайт — это приложение, которое должно иметь минимальную, но логику, которую можно сделать, используя JS.
Для быстрого старта, рекомендую.
1. Книга по Javascript — хороший справочник.
2. MDN — очень доступно описанный W3C-стандарт, на котором работает веб.
3. Англоязычная песочница от Codecamp, который даст базовое понимание работы JS.
4. Англоязычная песочница от freecodecamp - полностью бессплатный, для усвоения основ подходит
5. You Don't Know JS 1 editional , You Don't Know JS 2 editional — серия книг, которая поможет изучить JS более глубоко
6. Выразительный Javascript — углубленное изучение JS, присутствуют задания. Желательно читать после прочтения You Don't Know JS.
7. Basic JS — 50+ часовой курс с доступно изложенным материалом и практическими примерами.
Помни, что надо заниматься регулярно. Это нормально, что материал усваивается не сразу. В большинстве случаев на StackOverflow уже есть ответ на твой вопрос. Так что, не отчаивайся и не забрасывай обучение — у тебя все получится!
Работаем по провереной схеме, кто-то запрашивает информацию по Js. Скидываешь целый пост, что бы смог найти себе что-то подходящее!
Работаем!
Теги:
#shelemakha_js
Привет, работяги!
jQuery — это очень распространённая библиотека, созданная в 2006 году. Она упрощает работу с JavaScript, добавляя новый уровень абстракции. Так как она была создана давно — она пользуется большой поддержкой коммьюнити и поддержкой почти всех существующих браузеров.
Разработчики, использующие React, Vue или Angular скажут, что «jQuery устарел и вообще не нужен». Но не стоит отбрасывать jQuery, ведь его все ещё используют на небольших проектах. А если проект старый и тебе предстоит его поддерживать — знание jQuery является почти обязательным. Как я уже говорил в начале, поддержка коммьюнити очень значима и при поиске готовых решений, ты с очень большой вероятностью найдешь его на StackOverflow, в виде готового скрипта, который написан с использованием jQuery.
Поэтому держи:
1. Документация по самой библиотеке.
2. Курс.
3. Статья, которая поможет переписать код, который написан с использованием jQuery, на чистый JavaScript.
P.S. Большая часть компонентов Bootstrap'a — использует jQuery. Проще говоря, если ты будешь использовать Bootstrap (скоро напишу пост и по нему) — знание jQuery поможет быстрее создавать веб-приложения.
Работаем по проверенной схеме: если кто-то спрашивает тебя информацию по jQuery, то скинь этот пост полностью, что бы он смог найти себе что-то подходящее!
Работаем!
Теги:
#shelemakha_js
jQuery — это очень распространённая библиотека, созданная в 2006 году. Она упрощает работу с JavaScript, добавляя новый уровень абстракции. Так как она была создана давно — она пользуется большой поддержкой коммьюнити и поддержкой почти всех существующих браузеров.
Разработчики, использующие React, Vue или Angular скажут, что «jQuery устарел и вообще не нужен». Но не стоит отбрасывать jQuery, ведь его все ещё используют на небольших проектах. А если проект старый и тебе предстоит его поддерживать — знание jQuery является почти обязательным. Как я уже говорил в начале, поддержка коммьюнити очень значима и при поиске готовых решений, ты с очень большой вероятностью найдешь его на StackOverflow, в виде готового скрипта, который написан с использованием jQuery.
Поэтому держи:
1. Документация по самой библиотеке.
2. Курс.
3. Статья, которая поможет переписать код, который написан с использованием jQuery, на чистый JavaScript.
P.S. Большая часть компонентов Bootstrap'a — использует jQuery. Проще говоря, если ты будешь использовать Bootstrap (скоро напишу пост и по нему) — знание jQuery поможет быстрее создавать веб-приложения.
Работаем по проверенной схеме: если кто-то спрашивает тебя информацию по jQuery, то скинь этот пост полностью, что бы он смог найти себе что-то подходящее!
Работаем!
Теги:
#shelemakha_js
Привет, работяга!
Недавно я упоминал Bootstrap, который написан с использованием jQuery, но не рассказал зачем он.
Bootstrap — это инструмент, который ускоряет разработку веб-приложения в части фронтенда из-за наличия огромной коллекции шаблонов, стилей, скриптов и готовых компонентов.
Bootstrap 4 — на сегодняшний момент является стабильным релизом. На сайте есть инструкция как его установить с помощью
P.S. Bootstrap 5 — уже в альфа-версии. Крайне рекомендую почитать обновленную документацию.
Навигация по документация (и она сама) по Bootstrap очень удобная, что является очень большим преимуществом при его изучении. Также, как и любой бесплатный проект, он пользуется значимой поддержкой коммьюнити. Для начала, этих ресурсов тебе должно хватить:
1. Bootstrap 3
2. Bootstrap 4
3. Плейлист курса на YouTube по Bootstrap 4
Работаем по проверенной схеме: если кто-то спрашивает тебя информацию по Bootstrap, то скинь этот пост полностью, что бы он смог найти себе что-то подходящее!
Работаем!
Теги:
#shelemakha_css #shelemakha_js
Недавно я упоминал Bootstrap, который написан с использованием jQuery, но не рассказал зачем он.
Bootstrap — это инструмент, который ускоряет разработку веб-приложения в части фронтенда из-за наличия огромной коллекции шаблонов, стилей, скриптов и готовых компонентов.
Bootstrap 4 — на сегодняшний момент является стабильным релизом. На сайте есть инструкция как его установить с помощью
npm( про пакетный менеджер расскажу чуть позже ) и шаблоны для использование в фреймворках React, Node.js, Vue и др., которые поддерживают npm. Так же ты можешь подключить скрипты и стили спомощью cdn или скачать исходники. Bootstrap постоянно обновляется и желательно следить за обновлениями. P.S. Bootstrap 5 — уже в альфа-версии. Крайне рекомендую почитать обновленную документацию.
Навигация по документация (и она сама) по Bootstrap очень удобная, что является очень большим преимуществом при его изучении. Также, как и любой бесплатный проект, он пользуется значимой поддержкой коммьюнити. Для начала, этих ресурсов тебе должно хватить:
1. Bootstrap 3
2. Bootstrap 4
3. Плейлист курса на YouTube по Bootstrap 4
Работаем по проверенной схеме: если кто-то спрашивает тебя информацию по Bootstrap, то скинь этот пост полностью, что бы он смог найти себе что-то подходящее!
Работаем!
Теги:
#shelemakha_css #shelemakha_js
Привет, работяга!
В начале своего пути веб-разработчика, я часто попадал в проблему, когда я написал код, запустил его и он работал нормально. Добавил новую фичу — всё перестало работать. Для того, чтобы быстрее понять причину неработоспособности кода и не продавить клавиатуру комбинацией
Первоочередная функция системы контроля версий — хранение исходных кодов программ и отслеживания изменения в них. Также она является неотъемлемой частью процесса командной разработки какой-либо программы.
Сложилось так по следующим причинам:
• участникам команды нужно поддерживать актуальную версию проекта;
• в случае бага — легко вернуться к предыдущей версии программы.
Огромное преимуществом для тебя и для Git'a, которое выделяет его среди других систем контроля версий — официальная документация есть на русском языке. Весь функционал в документации проиллюстрирован и доступно описан.
Работаем по проверенной схеме: если кто-то спрашивает тебя информацию по Git'е или как правильно делать
Работаем!
В начале своего пути веб-разработчика, я часто попадал в проблему, когда я написал код, запустил его и он работал нормально. Добавил новую фичу — всё перестало работать. Для того, чтобы быстрее понять причину неработоспособности кода и не продавить клавиатуру комбинацией
Ctrl+Z — используют систему контроля версий, а именно — Git, ибо используется в GitHub. который является наиболее популярным хранилищем open-source проектов. Первоочередная функция системы контроля версий — хранение исходных кодов программ и отслеживания изменения в них. Также она является неотъемлемой частью процесса командной разработки какой-либо программы.
Сложилось так по следующим причинам:
• участникам команды нужно поддерживать актуальную версию проекта;
• в случае бага — легко вернуться к предыдущей версии программы.
Огромное преимуществом для тебя и для Git'a, которое выделяет его среди других систем контроля версий — официальная документация есть на русском языке. Весь функционал в документации проиллюстрирован и доступно описан.
Работаем по проверенной схеме: если кто-то спрашивает тебя информацию по Git'е или как правильно делать
commit, то скинь этот пост полностью, что бы он смог найти себе что-то подходящее!Работаем!
Привет, работяги!
JavaScript — это однопоточный язык. Проще говоря, код исполняется строчка за строчкой, что упрощает процесс программирования из-за того, что наш мозг работает последовательно, или как правильно говорить — синхронно. Синхронный подход к написанию кода — прост, понятен и его нужно использовать для простых задач. Но иногда попадаются задачи, которые требуют резервирования ресурсов, что создает задержку в выполнении кода.
Для того, чтобы поместить процесс резервирования ресурсов в «фоновый режим» — необходимо использовать асинхронный подход. JavaScript «из коробки» оснащен функциями для реализации асинхронного поведения:
1. setTimeout, setInterval
2. CallBack
3. Promisse
4. Async/Await
Если хотите разобраться в тонкостях стека и производительности в асинхронного поведении — крайне советую прочитать книгу «You don't know JS async». Автор этой книги буквально на пальцах и для чайников рассказывает о методах, которые предназначены для реализации асинхронного поведения. Ты же не чайник? Ты работяга!
Работаем!
Теги:
#shelemakha_js
JavaScript — это однопоточный язык. Проще говоря, код исполняется строчка за строчкой, что упрощает процесс программирования из-за того, что наш мозг работает последовательно, или как правильно говорить — синхронно. Синхронный подход к написанию кода — прост, понятен и его нужно использовать для простых задач. Но иногда попадаются задачи, которые требуют резервирования ресурсов, что создает задержку в выполнении кода.
Для того, чтобы поместить процесс резервирования ресурсов в «фоновый режим» — необходимо использовать асинхронный подход. JavaScript «из коробки» оснащен функциями для реализации асинхронного поведения:
1. setTimeout, setInterval
2. CallBack
3. Promisse
4. Async/Await
Если хотите разобраться в тонкостях стека и производительности в асинхронного поведении — крайне советую прочитать книгу «You don't know JS async». Автор этой книги буквально на пальцах и для чайников рассказывает о методах, которые предназначены для реализации асинхронного поведения. Ты же не чайник? Ты работяга!
Работаем!
Теги:
#shelemakha_js
Привет, работяги!
Я как-то упоминал
Проще говоря, на
Кроме этого, функционал
• автоматически следить за версиями установленных библиотек и автоматически их обновлять;
• создавать собственные библиотеки и экспортировать их в облачное хранилище. Для того, чтобы понять как создавать библиотеки — есть курс;
• очень просто создавать скрипт, который позволяет скачать необходимые проекту библиотеки на новом окружении.
Этот функционал — сильно помогает на начальных этапах, так как скрывает большую часть рутинной и не нужной работы по конфигурированию установленных библиотек.
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — кидай мой канал!
Работаем! 💪
Теги:
#shelemakha_js
Я как-то упоминал
npm раньше, но не сказал для чего он нужен.npm — это пакетный менеджер, главной функцией которого является скачивание и установка библиотек из облачного хранилища без лишней возни.Проще говоря, на
npm выстраивается вся экосистема таких фреймворков как Node.js, Vue.js и React. Без него — эти фреймворки не были бы такими удобными и канули в лету.Кроме этого, функционал
npm позволяет:• автоматически следить за версиями установленных библиотек и автоматически их обновлять;
• создавать собственные библиотеки и экспортировать их в облачное хранилище. Для того, чтобы понять как создавать библиотеки — есть курс;
• очень просто создавать скрипт, который позволяет скачать необходимые проекту библиотеки на новом окружении.
Этот функционал — сильно помогает на начальных этапах, так как скрывает большую часть рутинной и не нужной работы по конфигурированию установленных библиотек.
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — кидай мой канал!
Работаем! 💪
Теги:
#shelemakha_js
Привет, работяги!
Скорость разработки UI веб-приложения определяется временем, которое затрачено на написание CSS стилей. Обычно, это 1/4 от времени, которое затрачено на разработку всего приложения. Чтобы сделать временные затраты меньше — были придуманы препроцессоры, которые улучшают читабельность стилей за счет внедрения переменных, которые дают возможность прописывать стили более гибко.
SASS/SCSS и LESS — наиболее часто используемые препроцессоры. Они очень похожи, но обладают разным функционалом и написаны на разных языках: LESS написан на JavaScript, a SASS/SCSS — Ruby.
Less:
1. Документация (на английском)
2. Блиц-курс по использованию LESS
SASS/SCSS:
1. Документация
2. Блиц-курс по использованию SASS/SCSS
Изучение препроцессоров очень быстрое за счет доступно написанной документации и огромной поддержке коммьюнити. Так же не забудь, что знание SASS/SCSS позволяет внедрять свой функционал в Bootstrap, о котором писал раньше.
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
Теги:
#shelemakha_js
#shelemakha_css
Скорость разработки UI веб-приложения определяется временем, которое затрачено на написание CSS стилей. Обычно, это 1/4 от времени, которое затрачено на разработку всего приложения. Чтобы сделать временные затраты меньше — были придуманы препроцессоры, которые улучшают читабельность стилей за счет внедрения переменных, которые дают возможность прописывать стили более гибко.
SASS/SCSS и LESS — наиболее часто используемые препроцессоры. Они очень похожи, но обладают разным функционалом и написаны на разных языках: LESS написан на JavaScript, a SASS/SCSS — Ruby.
Less:
1. Документация (на английском)
2. Блиц-курс по использованию LESS
SASS/SCSS:
1. Документация
2. Блиц-курс по использованию SASS/SCSS
Изучение препроцессоров очень быстрое за счет доступно написанной документации и огромной поддержке коммьюнити. Так же не забудь, что знание SASS/SCSS позволяет внедрять свой функционал в Bootstrap, о котором писал раньше.
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
Теги:
#shelemakha_js
#shelemakha_css
Привет, работяги!
При разработке многих проектов — часто сталкивался с тем, что проект не систематизирован и понемногу начинал "раздуваться". Проблему минификации таких проектов решает Gulp.
Gulp написан на JS и для того, чтобы начать ним пользоваться, необходимо знать основы JS (ищи посты по #shelemakha_js). Он представляет из себя обычный task manager. Он может миницифовать код, объединить его в один файлов из нескольких файлов и т. п.
Основной функционал Gulp в следующем:
• пишем для него некие задания на JS;
• запускаем Gulp и он выполняет эти задания в нужной последовательности, так, как мы это прописали.
Полезные ссылки:
1. Документация
2. Блиц-курс по использованию Gulp
Надеюсь, что у тебя свой проект и черпаешь информацию с моего поста и внедряешь её в свой проект. Помни, самая лучшая практика — это практика на живых, а лучше на своих, проектах.
Работаем по отработанной схеме. Если кому-то нужна инфа по JS — скидывай ссылку на мой канал!
Работаем! 💪
Теги:
#shelemakha_js
#shelemakha_css
#shelemakha_html
При разработке многих проектов — часто сталкивался с тем, что проект не систематизирован и понемногу начинал "раздуваться". Проблему минификации таких проектов решает Gulp.
Gulp написан на JS и для того, чтобы начать ним пользоваться, необходимо знать основы JS (ищи посты по #shelemakha_js). Он представляет из себя обычный task manager. Он может миницифовать код, объединить его в один файлов из нескольких файлов и т. п.
Основной функционал Gulp в следующем:
• пишем для него некие задания на JS;
• запускаем Gulp и он выполняет эти задания в нужной последовательности, так, как мы это прописали.
Полезные ссылки:
1. Документация
2. Блиц-курс по использованию Gulp
Надеюсь, что у тебя свой проект и черпаешь информацию с моего поста и внедряешь её в свой проект. Помни, самая лучшая практика — это практика на живых, а лучше на своих, проектах.
Работаем по отработанной схеме. Если кому-то нужна инфа по JS — скидывай ссылку на мой канал!
Работаем! 💪
Теги:
#shelemakha_js
#shelemakha_css
#shelemakha_html
Привет, работяги!
Современные браузеры — удобные, быстрые и поддерживают крутые новые стандарты HTML, CSS и JS. Но у этих плюсов есть один минус — старые браузеры, которые все это не поддерживают (Internet Explorer 6, который используется в банковских embedded системах). Проще говоря, новый функционал, который есть сейчас в HTML, CSS и JS — будет отображаться в IE 6 крайне плохо (или вообще не отобразиться). И от таких вещей хочется плакать.
Для того, что писать как можно адаптивный код, который отображается даже в старых браузерах — нужно почитать EcmaScript, который является стандартом для JS. На YouTube есть крутое видео, который описывает какие функции CSS и JSS где и как поддерживаются.
Для того, чтобы автоматизировать адаптирование кода под старые браузеры — есть Babel. По нему есть блиц-курс, который в деталях рассказывает как его запустить через
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
Современные браузеры — удобные, быстрые и поддерживают крутые новые стандарты HTML, CSS и JS. Но у этих плюсов есть один минус — старые браузеры, которые все это не поддерживают (Internet Explorer 6, который используется в банковских embedded системах). Проще говоря, новый функционал, который есть сейчас в HTML, CSS и JS — будет отображаться в IE 6 крайне плохо (или вообще не отобразиться). И от таких вещей хочется плакать.
Для того, что писать как можно адаптивный код, который отображается даже в старых браузерах — нужно почитать EcmaScript, который является стандартом для JS. На YouTube есть крутое видео, который описывает какие функции CSS и JSS где и как поддерживаются.
Для того, чтобы автоматизировать адаптирование кода под старые браузеры — есть Babel. По нему есть блиц-курс, который в деталях рассказывает как его запустить через
npm. Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
Привет, работяги!
Недавно я рассказывал про Gulp. Он удобен, быстр и компактен. Проблема в том, что на сложных проектах Gulp начинает работать очень плохо из-за того, что количество задач, которые надо прописать на сложных проектах — огромно, а с правками — растет чуть ли не экспоненциально.
На помощь приходит Webpack. Со своими плюшками, а именно:
• очень удобная конфигурация проекта;
• поддержка со стороны многих современных JS-фреймворков, таких как React, Vue и т.п.
Но у Webpack'a есть один недостаток — из-за того, что инструмент довольно мощный, документация на него очень огромная, что накладывает определенное ограничение на его использование.
Для того, чтобы упростить понимание Webpack'a, ознакомься с:
• видео, в котором доступно, но очень долго рассказывают про основные принципы работы (сразу ставь скорость 1.5х);
• статью (на английском).
Работяга, что если у тебя что-то не получается сразу — это нормально, все через это проходили. Попробуй проанализировать проблему и найти решение сам на том же StackOverflow или используя Google. Понимание возникновения и решения проблемы является ключевым моментом успешного обучения. Главное — никогда не останавливаться на достигнутом!
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
#shelemakha_js
Недавно я рассказывал про Gulp. Он удобен, быстр и компактен. Проблема в том, что на сложных проектах Gulp начинает работать очень плохо из-за того, что количество задач, которые надо прописать на сложных проектах — огромно, а с правками — растет чуть ли не экспоненциально.
На помощь приходит Webpack. Со своими плюшками, а именно:
• очень удобная конфигурация проекта;
• поддержка со стороны многих современных JS-фреймворков, таких как React, Vue и т.п.
Но у Webpack'a есть один недостаток — из-за того, что инструмент довольно мощный, документация на него очень огромная, что накладывает определенное ограничение на его использование.
Для того, чтобы упростить понимание Webpack'a, ознакомься с:
• видео, в котором доступно, но очень долго рассказывают про основные принципы работы (сразу ставь скорость 1.5х);
• статью (на английском).
Работяга, что если у тебя что-то не получается сразу — это нормально, все через это проходили. Попробуй проанализировать проблему и найти решение сам на том же StackOverflow или используя Google. Понимание возникновения и решения проблемы является ключевым моментом успешного обучения. Главное — никогда не останавливаться на достигнутом!
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
#shelemakha_js
Привет, работяги!
Одно из главных преимуществ JS — это динамическая типизация. Не надо определять типы данных, интерпретатор сделает всё за тебя. Но не тут-то было, часто бывают случаи когда суммируются целочисленные и строчные типы данных. И это требует ручного прописывания типа данных (т.н. «кастование» или явное приведение типов данных). Умные люди из Microsoft решили это проблему очень просто — ввели статическую типизацию и назвали TypeScript. За счёт быстрой интеграции разработчиками Microsoft в множество фреймворков — TypeScript быстро набрал популярность среди коммьюнити.
TypeScript стоит знать, как минимум из-за того, что масштабировать веб-приложеннию проще, т.к. не надо заморачиваться над «кастованием» типов данных. Статическая типизация уменьшает количества логических ошибок. Главный недостаток TypeScript — это одновременно и его преимущество, так как при статической типизации много вещей надо держать в голове.
Держи обучающие материалы:
• Документация;
• Курс по TypeScript;
• Книга-туториал, в которой описывается как связать React c TypeScript.
P.S. TypeScript решает возникающие вопросы по поводу того, что делать с переменными, которые могут меняться динамически или словари в которых может быть глубокая структура данных.
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
#shelemakha_js
Одно из главных преимуществ JS — это динамическая типизация. Не надо определять типы данных, интерпретатор сделает всё за тебя. Но не тут-то было, часто бывают случаи когда суммируются целочисленные и строчные типы данных. И это требует ручного прописывания типа данных (т.н. «кастование» или явное приведение типов данных). Умные люди из Microsoft решили это проблему очень просто — ввели статическую типизацию и назвали TypeScript. За счёт быстрой интеграции разработчиками Microsoft в множество фреймворков — TypeScript быстро набрал популярность среди коммьюнити.
TypeScript стоит знать, как минимум из-за того, что масштабировать веб-приложеннию проще, т.к. не надо заморачиваться над «кастованием» типов данных. Статическая типизация уменьшает количества логических ошибок. Главный недостаток TypeScript — это одновременно и его преимущество, так как при статической типизации много вещей надо держать в голове.
Держи обучающие материалы:
• Документация;
• Курс по TypeScript;
• Книга-туториал, в которой описывается как связать React c TypeScript.
P.S. TypeScript решает возникающие вопросы по поводу того, что делать с переменными, которые могут меняться динамически или словари в которых может быть глубокая структура данных.
Работаем по отработанной схеме. Если кому-то нужна инфа по веб-разработке — скидывай ссылку на мой канал!
Работаем! 💪
#shelemakha_js