Что такое HTML5 Canvas и как им пользоваться?
Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript. Начало отсчёта блока находится слева сверху. От него и строится каждый элемент блока. Размер пространства координат не обязательно отражает размер фактической отображаемой площади.
Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера.
Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript. Начало отсчёта блока находится слева сверху. От него и строится каждый элемент блока. Размер пространства координат не обязательно отражает размер фактической отображаемой площади.
Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера.
Направление для развития в React
Redux в React-разработке надо знать обязательно. Еще, хорошо знать MobX, так как все больше компаний используют его в новых проектах.
Так же, вам стоит познакомиться с такими инструментами как:
typescript
webpack/babel
react-router
redux-thunk
redux-act (имхо, лучшая упрощалка бойлерпелйта redux)
styled-components
reselect
next/create-react-app
axios
react-helmet
react-portal
classnames
eslint/tslint/prettier/lint-staged/husky
jest
express
Перечисленные инструменты, кроме redux-act, используют в React-разработке чаще всего.
Redux в React-разработке надо знать обязательно. Еще, хорошо знать MobX, так как все больше компаний используют его в новых проектах.
Так же, вам стоит познакомиться с такими инструментами как:
typescript
webpack/babel
react-router
redux-thunk
redux-act (имхо, лучшая упрощалка бойлерпелйта redux)
styled-components
reselect
next/create-react-app
axios
react-helmet
react-portal
classnames
eslint/tslint/prettier/lint-staged/husky
jest
express
Перечисленные инструменты, кроме redux-act, используют в React-разработке чаще всего.
20 потрясающих CSS3 техник, библиотек и примеров
В список также включены англоязычные статьи, обрисовывающие новые фичи в CSS3 и несколько полезных библиотек, наполненных разными фишками.
Для полного эффекта от просмотра ссылок из данной статьи рекомендуем пользоваться последней версией современного браузера, например, хромом.
В список также включены англоязычные статьи, обрисовывающие новые фичи в CSS3 и несколько полезных библиотек, наполненных разными фишками.
Для полного эффекта от просмотра ссылок из данной статьи рекомендуем пользоваться последней версией современного браузера, например, хромом.
Как выучить front-end фреймворк?
Изучение той или иной технологии ничем не отличается. Читаете статьи\туториалы. Пишете свой код. Удаляете. Читаете статьи\. Пишете код... и тд.
Читаете доки и пишете функции, которые Вам надо
https://www.npmjs.com/package/gulp - комментарии на каждой строчке. Куча плагинов, которые показано как подключать. Пробуйте писать свой простой сборщик, который препроцессоры собирает. Потом по необходимости будете добавлять модули. Или найдите чужой готовый сборщик и настройте под себя
К примеру в Современной Front-end разаботке предполагается постоянное взаимодействие с Back-end и переформирование визуальной части "на лету" от манипуляций всех пользователей, а не только текущего.
Если говорить про git, npm, webpack и т.д... - то по сути это инструменты помогающие во время разработки - можно обходиться и без них, если можете конечно.
В итоге на выходе мы получаем тот же JS и CSS
Изучение той или иной технологии ничем не отличается. Читаете статьи\туториалы. Пишете свой код. Удаляете. Читаете статьи\. Пишете код... и тд.
Читаете доки и пишете функции, которые Вам надо
https://www.npmjs.com/package/gulp - комментарии на каждой строчке. Куча плагинов, которые показано как подключать. Пробуйте писать свой простой сборщик, который препроцессоры собирает. Потом по необходимости будете добавлять модули. Или найдите чужой готовый сборщик и настройте под себя
К примеру в Современной Front-end разаботке предполагается постоянное взаимодействие с Back-end и переформирование визуальной части "на лету" от манипуляций всех пользователей, а не только текущего.
Если говорить про git, npm, webpack и т.д... - то по сути это инструменты помогающие во время разработки - можно обходиться и без них, если можете конечно.
В итоге на выходе мы получаем тот же JS и CSS
Как автоматически проверить верстку?
Инструменты для тестирования проектов(GitHub):
1. jest-dom. Это если надо точечно проверить элементы на странице. Удобно, если нет необходимости тестировать прям всё всё всё. Стучишься до нужного элемента и проверяешь его.
2. jest-image-snapshot. Тестирование через скриншоты, отлично помогает при тестировании пользовательского поведения. Там всякие скроллы, ховеры, фокусы и так далее. По сути просто делаешь эталонный скриншот страницы, вбиваешь поведение страницы. После этого при тестировании проверяется, не сломалось ли поведение
Инструменты для тестирования проектов(GitHub):
1. jest-dom. Это если надо точечно проверить элементы на странице. Удобно, если нет необходимости тестировать прям всё всё всё. Стучишься до нужного элемента и проверяешь его.
2. jest-image-snapshot. Тестирование через скриншоты, отлично помогает при тестировании пользовательского поведения. Там всякие скроллы, ховеры, фокусы и так далее. По сути просто делаешь эталонный скриншот страницы, вбиваешь поведение страницы. После этого при тестировании проверяется, не сломалось ли поведение
Чем хорош Ruby?
Чем отличается от PHP или Python? Лучше или хуже? В чем его фишка так сказать?
Краткость, лаконичность и хорошее сообщество. А, ещё любовь к тестам, большая часть рубистов пишет тесты + ещё 30% из низ используют TDD... сначала тесты, потом код. Попробуйте заставить писать PHP-программиста тесты, легче пристрелить.
И еще, во-первых rubygems.
Во-вторых пример из жизни - есть gem. С десяток классов, все друг друга используют.
Возникла необходимость чуть-чуть изменить поведение пары методов одного из классов - так бывает.
Что вы будете делать в случае с php? Вы сделаете локальную копию библиотеки, поломаете методы так, как вам нужно.
В случае с ruby вы можете:
1. Полностью изменить реализацию одного метода конкретного класса
2. Обернуть существующую реализацию своим кодом, с помощью сохранения старого метода под новым именем с помощью alias_method
В-третьих - метапрограммирование. Хотя по значимости это стоило на первое место поставить. Именно благодаря метапрограммированию код на Ruby лаконичен и легко читаем.
В-четвертых, мне просто приятно иметь возможность писать конструкции типа 2.hours.ago
Чем отличается от PHP или Python? Лучше или хуже? В чем его фишка так сказать?
Краткость, лаконичность и хорошее сообщество. А, ещё любовь к тестам, большая часть рубистов пишет тесты + ещё 30% из низ используют TDD... сначала тесты, потом код. Попробуйте заставить писать PHP-программиста тесты, легче пристрелить.
И еще, во-первых rubygems.
Во-вторых пример из жизни - есть gem. С десяток классов, все друг друга используют.
Возникла необходимость чуть-чуть изменить поведение пары методов одного из классов - так бывает.
Что вы будете делать в случае с php? Вы сделаете локальную копию библиотеки, поломаете методы так, как вам нужно.
В случае с ruby вы можете:
1. Полностью изменить реализацию одного метода конкретного класса
2. Обернуть существующую реализацию своим кодом, с помощью сохранения старого метода под новым именем с помощью alias_method
В-третьих - метапрограммирование. Хотя по значимости это стоило на первое место поставить. Именно благодаря метапрограммированию код на Ruby лаконичен и легко читаем.
В-четвертых, мне просто приятно иметь возможность писать конструкции типа 2.hours.ago
В копилку неплохих инструментов, для веб-разработчика, можно добавить браузер Blisk
Blisk - бесплатный веб-браузер на основе хрома, целью которого является повышение производительности и качества кода путем предоставления широкого набора инструментов для веб-разработки и тестирования для различных типов устройств: настольных, планшетных и мобильных.
Blisk - бесплатный веб-браузер на основе хрома, целью которого является повышение производительности и качества кода путем предоставления широкого набора инструментов для веб-разработки и тестирования для различных типов устройств: настольных, планшетных и мобильных.
Зачем верстают сайты на js фреймворке(Vue/React/Angular)?
Обычные сайты не верстают с помощью js фреймворков.
Vue/React/Angular используют для написания веб приложений.
Архитектура в общем виде такая
1) Backend
2) Frontend
3) API
Где backend и fronend можно представить в виде двух островов, а API мост между ними.
Для чего это нужно. Такой подход позволяет делать front & back независимо друг от друга(у них есть чёткая спецификация API)
Так же в такой модели сервер менее нагружен т.к. ему требуется отдавать только текстовые ответы(JSON), а не рендерить целиком HTML.
Ещё одно преимущество это более удобной контроль над frontend'ом. Потому что именно он здесь решает, что и как будет работать и какие запросы нужно сделать на данный момент, а какие можно и позже загрузить.
Проще писать сервер, потому что ему не нужно никакие данные о пользователе, ему всё необходимое приходит в запросе.
Обычные сайты не верстают с помощью js фреймворков.
Vue/React/Angular используют для написания веб приложений.
Архитектура в общем виде такая
1) Backend
2) Frontend
3) API
Где backend и fronend можно представить в виде двух островов, а API мост между ними.
Для чего это нужно. Такой подход позволяет делать front & back независимо друг от друга(у них есть чёткая спецификация API)
Так же в такой модели сервер менее нагружен т.к. ему требуется отдавать только текстовые ответы(JSON), а не рендерить целиком HTML.
Ещё одно преимущество это более удобной контроль над frontend'ом. Потому что именно он здесь решает, что и как будет работать и какие запросы нужно сделать на данный момент, а какие можно и позже загрузить.
Проще писать сервер, потому что ему не нужно никакие данные о пользователе, ему всё необходимое приходит в запросе.
С каким уровнем JavaScript выйти на фриланс?
Если хочется развиваться во фронтенде, то желательно уверенно знать хотя бы один из фреймворков: AngularJS, Angular2, VueJS, ReactJS. Ну естественно уверенное знание JS (JS5, JS6, JS7 будет плюсом).
Конечно ничто не запрещает начать хоть сейчас с простых вещей, но я бы рекомендовал пару лет поработать в IT-конторах с умными коллегами. Там очень быстро можно набраться опыта. А на фрилансе это гораздо сложнее - коллег нет, никто не подскажет. Если с ходу прыгнуть на апворк без особых знаний, то можно напороть делов, наловить плохих отзывов, закрепиться в низкооплачиваемой нише и потом будет сложно из всего этого вылезать, да и вообще, без знаний библиотеки, лучше не заходить даже на fl.ru и другие аналоги.
Если хочется развиваться во фронтенде, то желательно уверенно знать хотя бы один из фреймворков: AngularJS, Angular2, VueJS, ReactJS. Ну естественно уверенное знание JS (JS5, JS6, JS7 будет плюсом).
Конечно ничто не запрещает начать хоть сейчас с простых вещей, но я бы рекомендовал пару лет поработать в IT-конторах с умными коллегами. Там очень быстро можно набраться опыта. А на фрилансе это гораздо сложнее - коллег нет, никто не подскажет. Если с ходу прыгнуть на апворк без особых знаний, то можно напороть делов, наловить плохих отзывов, закрепиться в низкооплачиваемой нише и потом будет сложно из всего этого вылезать, да и вообще, без знаний библиотеки, лучше не заходить даже на fl.ru и другие аналоги.
Топ-10 сайтов, построенных с помощью Node.Js
Множество крупных компании используют Node.JS для построения собственных веб-сайтов. Мы расскажем вам про 10 лучших сайтов, созданных на платформе Node JS.
Node.js - это среда выполнения JavaScript на стороне сервера, которая используется для построения быстрых, масштабируемых сетевых приложений.
Paypal
PayPal, основанная известным предпринимателемИлоном Маском, предоставляет онлайн-платежные решения своим пользователям. Она позволяет своим пользователям осуществлять транзакцию через банковские счета или кредитные карты без обмена финансовой информацией. Сайт был опубликован в2001году, а затем куплен в2002году компаниейeBayза 1,5 млрд долларов.
Yahoo!
Yahoo гигантская корпорации стоимостью $ 40 млрд. Компания уже много лет использует Node.js во многих своих веб-сервисах и приложениях, включая Yahoo Answers и Yahoo Screen.
Groupon
Groupon - это ежедневный веб-сайт, который предлагает дисконтные подарочные сертификаты, которые могут быть использованы с местными или национальными компаниями.
Wall Street Journal онлайн
The Wall Street Journal - популярная американская ежедневная газета с особым акцентом на деловые и экономические новости. По словам инженера из Dow Jones (владельца Wall Street Journal): «Простая истина заключается в том, что Node заново изобрел способ создания сайтов. Разработчики создают нужную функциональность за считанные дни, а не недели».
Klout
Klout - приложение, которое измеряет и оценивает своих пользователей в соответствии с социальным влиянием, используя аналитику социальных сетей. Сайт получил финансирование в размере 40 млн долларов, прежде чем был приобретен в 2014 году за 200 млн долларов. Неплохо для компании, которая была основана только в 2008 году!
Secret
Secret предлагает онлайн-платформу, которая позволяет пользователям анонимно делиться своими личными секретами с другими пользователями. Сайт получил финансирование в размере 35 миллионов долларов и продолжает быстро расти.
BandPage
BandPage запущен в 2010 году с помощью приложения, которое позволяет художникам создавать персонализированные страницы поклонников в Facebook. Более 500 000 музыкантов используют BandPage для обмена треками, видео, фотографиями и графиком их гастролей с поклонниками. На данный момент сайт получил $ 27,6 млн.
Geeklist
Geeklist - это социальная платформа для разработчиков, которая выделяет свои достижения, делится ресурсами, сотрудничает и создает свои профили. Компании также делят достижения своей инженерной команды с сообществом, которые действительно оценят тяжелую работу, которая идет на строительство высокотехнологичной продукции. До настоящего времени сайт получил финансирование в размере 1,3 млн долларов.
Opencare
Opencare - это сайт, который работает с пациентам и лучшими местными поставщиками медицинских услуг. Служит для улучшения результатов в отношении здоровья. В 2013 году он получил $1,5 млн на финансирование семян.
Shutterstock
Shutterstock - агентство, предоставляющее фотографии, иллюстрации, векторы, видео и музыку для бизнеса и частных лиц. Компания вышла в свет в 2012 году и теперь имеет рыночную стоимость в $ 2 млрд.
Множество крупных компании используют Node.JS для построения собственных веб-сайтов. Мы расскажем вам про 10 лучших сайтов, созданных на платформе Node JS.
Node.js - это среда выполнения JavaScript на стороне сервера, которая используется для построения быстрых, масштабируемых сетевых приложений.
Paypal
PayPal, основанная известным предпринимателемИлоном Маском, предоставляет онлайн-платежные решения своим пользователям. Она позволяет своим пользователям осуществлять транзакцию через банковские счета или кредитные карты без обмена финансовой информацией. Сайт был опубликован в2001году, а затем куплен в2002году компаниейeBayза 1,5 млрд долларов.
Yahoo!
Yahoo гигантская корпорации стоимостью $ 40 млрд. Компания уже много лет использует Node.js во многих своих веб-сервисах и приложениях, включая Yahoo Answers и Yahoo Screen.
Groupon
Groupon - это ежедневный веб-сайт, который предлагает дисконтные подарочные сертификаты, которые могут быть использованы с местными или национальными компаниями.
Wall Street Journal онлайн
The Wall Street Journal - популярная американская ежедневная газета с особым акцентом на деловые и экономические новости. По словам инженера из Dow Jones (владельца Wall Street Journal): «Простая истина заключается в том, что Node заново изобрел способ создания сайтов. Разработчики создают нужную функциональность за считанные дни, а не недели».
Klout
Klout - приложение, которое измеряет и оценивает своих пользователей в соответствии с социальным влиянием, используя аналитику социальных сетей. Сайт получил финансирование в размере 40 млн долларов, прежде чем был приобретен в 2014 году за 200 млн долларов. Неплохо для компании, которая была основана только в 2008 году!
Secret
Secret предлагает онлайн-платформу, которая позволяет пользователям анонимно делиться своими личными секретами с другими пользователями. Сайт получил финансирование в размере 35 миллионов долларов и продолжает быстро расти.
BandPage
BandPage запущен в 2010 году с помощью приложения, которое позволяет художникам создавать персонализированные страницы поклонников в Facebook. Более 500 000 музыкантов используют BandPage для обмена треками, видео, фотографиями и графиком их гастролей с поклонниками. На данный момент сайт получил $ 27,6 млн.
Geeklist
Geeklist - это социальная платформа для разработчиков, которая выделяет свои достижения, делится ресурсами, сотрудничает и создает свои профили. Компании также делят достижения своей инженерной команды с сообществом, которые действительно оценят тяжелую работу, которая идет на строительство высокотехнологичной продукции. До настоящего времени сайт получил финансирование в размере 1,3 млн долларов.
Opencare
Opencare - это сайт, который работает с пациентам и лучшими местными поставщиками медицинских услуг. Служит для улучшения результатов в отношении здоровья. В 2013 году он получил $1,5 млн на финансирование семян.
Shutterstock
Shutterstock - агентство, предоставляющее фотографии, иллюстрации, векторы, видео и музыку для бизнеса и частных лиц. Компания вышла в свет в 2012 году и теперь имеет рыночную стоимость в $ 2 млрд.
Стоит ли начинать изучение Vue.js с посредственными знаниями javascript?
Даже с начальными знаниями JS можно войти во Vue, только основы нужно и правда знать хорошенько - работа с объектами и массивами, напрямую работать с DOM возможно и не придется, замыкания (да, но несильно), транспорт (ajax, fetch), главное аналитический склад и пытливость ума, читая от корки до корки доку по Vue и постоянно гугля непонятные слова в учебниках, на stackoveflow - можно хорошо прокачаться. Как инструмент, vue очень крут даже для новичков.
Это единственный из Большой Тройки, который может простить Вам плохие знания по JavaScript.
В React.js Вы не сможете много сделать без хорошего знания ES6/ES7. В Angular - это TypeScript, ООП, много другого.
Даже с начальными знаниями JS можно войти во Vue, только основы нужно и правда знать хорошенько - работа с объектами и массивами, напрямую работать с DOM возможно и не придется, замыкания (да, но несильно), транспорт (ajax, fetch), главное аналитический склад и пытливость ума, читая от корки до корки доку по Vue и постоянно гугля непонятные слова в учебниках, на stackoveflow - можно хорошо прокачаться. Как инструмент, vue очень крут даже для новичков.
Это единственный из Большой Тройки, который может простить Вам плохие знания по JavaScript.
В React.js Вы не сможете много сделать без хорошего знания ES6/ES7. В Angular - это TypeScript, ООП, много другого.
Использование Avocode для верстки сайтов.
Avocode – это продукт от компании Source, созданный специально для измученных верстальщиков. Сами Source называют его “Мост между дизайнерами и разработчиками”. Работать это будет так: дизайнер нарисовал макет, кликнул по кнопке в плагине, и макет улетел прямо в Avocode к верстальщику.
Avocode – это продукт от компании Source, созданный специально для измученных верстальщиков. Сами Source называют его “Мост между дизайнерами и разработчиками”. Работать это будет так: дизайнер нарисовал макет, кликнул по кнопке в плагине, и макет улетел прямо в Avocode к верстальщику.
Что использовать для верстки+программирование — IDE или текстовый редактор?
Если учесть что в большинстве нормальных проектов верстка делается в шаблонизаторе... то однозначно IDE. Что Sublime Text, что TextMate, что Adobe Brackets, что Atom, VSCode - они все конечно прекрасны, но....никто и никогда не заменит IntelliSense, инспектирование кода и доки. Да и всего остального. Это если у Вас одностраничный сайт визитка, можно не заморачиваться, и то, я бы с этим поспорил...а если страницы минимум две, и они генерятся на backend'е или даже на frontend'е - однозначно IDE. И уж тем более если Вы не один работаете. Если же стоит CVS и нужно сделать буквально мелкую правку на коленке, где Вы однозначно понимаете что ничего не отвалится (опечатка например в string, хотя уж лучше просто отредактировать предыдущий коммит), можно и любым из популярных текстовых редакторов поправить и отправить коммит.
Если учесть что в большинстве нормальных проектов верстка делается в шаблонизаторе... то однозначно IDE. Что Sublime Text, что TextMate, что Adobe Brackets, что Atom, VSCode - они все конечно прекрасны, но....никто и никогда не заменит IntelliSense, инспектирование кода и доки. Да и всего остального. Это если у Вас одностраничный сайт визитка, можно не заморачиваться, и то, я бы с этим поспорил...а если страницы минимум две, и они генерятся на backend'е или даже на frontend'е - однозначно IDE. И уж тем более если Вы не один работаете. Если же стоит CVS и нужно сделать буквально мелкую правку на коленке, где Вы однозначно понимаете что ничего не отвалится (опечатка например в string, хотя уж лучше просто отредактировать предыдущий коммит), можно и любым из популярных текстовых редакторов поправить и отправить коммит.
Актуальные языки для удаленки
Определенно PHP/JS(Vue, React, Angular)
Java/.Net -чаще всего в офис. Удаленка конечно есть, но это прямо очень стремно, учитывая сферу применения.
Python (django) - удаленка есть, но её мало. Плюс проекты чаще всего буржуйские, которые аутсорсит фирма из условного Ростова, Краснодара, Ярославля итд (т.е. нормально платить не шибко будут).
Если выходить на запад, то python неплох для клиентов из США, Канады, Австралии. Но это уже от тебя зависит, получишь ты или нет. Что касается asp.net то плохой вариант. Ибо .net в США используют для автоматизации каких-то предприятий, где надо находится в офисе и понимать, что и как делать, а не условно сидеть на заднице. Плюс в США часто местные фирмы (где индусы по происхождению сидят в начальниках берут заказы и передают их своим братьям)
Определенно PHP/JS(Vue, React, Angular)
Java/.Net -чаще всего в офис. Удаленка конечно есть, но это прямо очень стремно, учитывая сферу применения.
Python (django) - удаленка есть, но её мало. Плюс проекты чаще всего буржуйские, которые аутсорсит фирма из условного Ростова, Краснодара, Ярославля итд (т.е. нормально платить не шибко будут).
Если выходить на запад, то python неплох для клиентов из США, Канады, Австралии. Но это уже от тебя зависит, получишь ты или нет. Что касается asp.net то плохой вариант. Ибо .net в США используют для автоматизации каких-то предприятий, где надо находится в офисе и понимать, что и как делать, а не условно сидеть на заднице. Плюс в США часто местные фирмы (где индусы по происхождению сидят в начальниках берут заказы и передают их своим братьям)
Стоит ли учить Jquery в нынешнее время?
Стоит. Каждой задаче свой инструмент. Если ангуляр и реакт вошли в моду, это не значит, что способы упрощённой манипуляции домом из неё вышли. Если тебе кто-то говорит, что jQuery - костыль для людей, не умеющих нативно перебирать ноды или писать xmlhttprequest - скажи им, что компьютер - это костыль для людей, не умеющих жить без гугла и социалок. jQuery всегда будет популярен. Он упрощает простые обмены данных, классов в пределах DOM, умеет работать с ajax и значительно упрощает синтаксис.
Если хотите разбираться в чужом коде, то учить обязательно. Если вы будете абсолютно все писать сами с нуля (типа менюшки, слайдеры, lightbox-ы, валидацию форм, другой кастомный клиентский функционал) и никогда не обращаться к сторонним плагинам и библиотекам и никогда не подсматривать или работать с чужим кодом, то -- да. Можете забить на jquery.
JQuery самая популярная JS библиотека, даже если вы ее специально учить не будете, по-любому будете сталкиваться с ней.
Стоит. Каждой задаче свой инструмент. Если ангуляр и реакт вошли в моду, это не значит, что способы упрощённой манипуляции домом из неё вышли. Если тебе кто-то говорит, что jQuery - костыль для людей, не умеющих нативно перебирать ноды или писать xmlhttprequest - скажи им, что компьютер - это костыль для людей, не умеющих жить без гугла и социалок. jQuery всегда будет популярен. Он упрощает простые обмены данных, классов в пределах DOM, умеет работать с ajax и значительно упрощает синтаксис.
Если хотите разбираться в чужом коде, то учить обязательно. Если вы будете абсолютно все писать сами с нуля (типа менюшки, слайдеры, lightbox-ы, валидацию форм, другой кастомный клиентский функционал) и никогда не обращаться к сторонним плагинам и библиотекам и никогда не подсматривать или работать с чужим кодом, то -- да. Можете забить на jquery.
JQuery самая популярная JS библиотека, даже если вы ее специально учить не будете, по-любому будете сталкиваться с ней.
Граница между front-end и back-end?
1. Создание UI/UX, разметки, стилизации и логики фронта - это фронт-эндер.
2. JS и архитектура фронт-приложения.
3. Чтобы правильно создать архитектуру, нужно понимать все возможные интерфейсы взаимодействия с бэком. Затем, оформить их для обмена данными с бэком.
4. Для этого - нужно знать: какие протоколы обмена данными с сервером предоставляет браузер, какие используются форматы передачи данных, логика функционирования общения с бэком: "запрос-ответ" (в разных режимах: запрос/поток, синхронно/асинхронно, и т.д.) и как их все вместе правильно использовать.
Чтобы там не говорили, бэкэнд может оставаться полностью черным ящиком только для верстальщика, и то с оговорками. Фроентэнд разработчик, даже с джун уровня, уже активно работает с получением отправкой данных, интерактивными интерфейсами и тп. Понимать как и почему некоторые штуки там работают нужно. Хорошо даже уметь быстро что-то простое сделать. Я не говорю становится фулстеком в полном смысле этого слова, НО. По хорошему: фронтендер мидл и выше уровня можно с натяжкой назвать фулстеком, просто с большим перекосом на фронт часть. Просто даже серверлесс направление, заставляет в той или иной степени понимать процессы происходящие на той стороне.
Ну и в любом случае, в случае активной практики и развития, вы сами столкнётесь с тем, что иногда нужно даже лезть и писать какие-либо свои простые скрипты.
Отмечу отдельно, это не значит что нужно с головой падать, пытаться стать фулстеком. знать всё и тп. Нет, я имею ввиду что понимание работы бекенда, а значит и умение делать некоторые вещи, должны будут и прийдут при активной работе и роста вас как специалиста. Это же касается тех же софт скилз и менеджерских умений.
1. Создание UI/UX, разметки, стилизации и логики фронта - это фронт-эндер.
2. JS и архитектура фронт-приложения.
3. Чтобы правильно создать архитектуру, нужно понимать все возможные интерфейсы взаимодействия с бэком. Затем, оформить их для обмена данными с бэком.
4. Для этого - нужно знать: какие протоколы обмена данными с сервером предоставляет браузер, какие используются форматы передачи данных, логика функционирования общения с бэком: "запрос-ответ" (в разных режимах: запрос/поток, синхронно/асинхронно, и т.д.) и как их все вместе правильно использовать.
Чтобы там не говорили, бэкэнд может оставаться полностью черным ящиком только для верстальщика, и то с оговорками. Фроентэнд разработчик, даже с джун уровня, уже активно работает с получением отправкой данных, интерактивными интерфейсами и тп. Понимать как и почему некоторые штуки там работают нужно. Хорошо даже уметь быстро что-то простое сделать. Я не говорю становится фулстеком в полном смысле этого слова, НО. По хорошему: фронтендер мидл и выше уровня можно с натяжкой назвать фулстеком, просто с большим перекосом на фронт часть. Просто даже серверлесс направление, заставляет в той или иной степени понимать процессы происходящие на той стороне.
Ну и в любом случае, в случае активной практики и развития, вы сами столкнётесь с тем, что иногда нужно даже лезть и писать какие-либо свои простые скрипты.
Отмечу отдельно, это не значит что нужно с головой падать, пытаться стать фулстеком. знать всё и тп. Нет, я имею ввиду что понимание работы бекенда, а значит и умение делать некоторые вещи, должны будут и прийдут при активной работе и роста вас как специалиста. Это же касается тех же софт скилз и менеджерских умений.
Требования к современной верстке:
1. Media queries; знание mobile first верстки;
2. Адаптивная и кроссбраузерная (да в 2к20 иногда приходится поддерживать IE, к тому же в Mozilla и Safari все может выглядить иначе) верстка;
3. Flex box;
4. CSS grids;
5. SASS/SCSS/PostCSS (и плагины к нему);
6. Шаблонизаторы ( pug, nunjucks) и сборщик Gulp;
7. Знание современных HTML тэгов;
8. Базовые знание JQuery и отличные знания и понимание "ванильного" JS и ES6+ Javascript стандартов;
9. Паттерны верстки;
10. Понимание и использование на практике Bootstrap сетки и самого CSS фреймворка.
1. Media queries; знание mobile first верстки;
2. Адаптивная и кроссбраузерная (да в 2к20 иногда приходится поддерживать IE, к тому же в Mozilla и Safari все может выглядить иначе) верстка;
3. Flex box;
4. CSS grids;
5. SASS/SCSS/PostCSS (и плагины к нему);
6. Шаблонизаторы ( pug, nunjucks) и сборщик Gulp;
7. Знание современных HTML тэгов;
8. Базовые знание JQuery и отличные знания и понимание "ванильного" JS и ES6+ Javascript стандартов;
9. Паттерны верстки;
10. Понимание и использование на практике Bootstrap сетки и самого CSS фреймворка.
Как происходит процесс верстки на React?
Верстка в реакте по определению связана с компонентом неразрывно, если наверстать что-то в html то потом переделывать под реакт - столько же работы если не больше.
есть несколько вариантов:
1. создание UI - библиотеки компонентов, из которых уже разработчики строят что им нужно. Это требует грамотного подхода, но если сделано как надо - то весьма удобно. Разработчик в идеале вообще ни одного html тега не пишет - везде просто компоненты из библиотеки. на элементы и на лэйаутинг. Ответственный за библиотеку уже там внутри пишет стили, верстку, обновляет под дизайн и так далее.
2. каждый разработчик создавая компонент сразу продумывает и полностью создает верстку для него.
3. разработчики пилят что-то работающее но выглядящее как мечта кубизма, потом это отдается верстальщику, который уже стизилует, поправляет теги, делает чтобы было хорошо-красиво.
во всех вариантах тот кто отвечает за верстку должен конечно знать JSX и хотя бы базовое представление о том как компоненты рендерятся в DOM-дерево.
Верстка в реакте по определению связана с компонентом неразрывно, если наверстать что-то в html то потом переделывать под реакт - столько же работы если не больше.
есть несколько вариантов:
1. создание UI - библиотеки компонентов, из которых уже разработчики строят что им нужно. Это требует грамотного подхода, но если сделано как надо - то весьма удобно. Разработчик в идеале вообще ни одного html тега не пишет - везде просто компоненты из библиотеки. на элементы и на лэйаутинг. Ответственный за библиотеку уже там внутри пишет стили, верстку, обновляет под дизайн и так далее.
2. каждый разработчик создавая компонент сразу продумывает и полностью создает верстку для него.
3. разработчики пилят что-то работающее но выглядящее как мечта кубизма, потом это отдается верстальщику, который уже стизилует, поправляет теги, делает чтобы было хорошо-красиво.
во всех вариантах тот кто отвечает за верстку должен конечно знать JSX и хотя бы базовое представление о том как компоненты рендерятся в DOM-дерево.
