This media is not supported in your browser
VIEW IN TELEGRAM
Sun Reflection
Солнце, отражающееся в воде, сделанное на чистом CSS без использования JS.
https://codepen.io/pokecoder/pen/JjJxXbJ
Original post link: t.me/senior_front/1932
Forwarded and filtered by @smartfeed_bot
Солнце, отражающееся в воде, сделанное на чистом CSS без использования JS.
https://codepen.io/pokecoder/pen/JjJxXbJ
Original post link: t.me/senior_front/1932
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Как получать приглашения на собесы, если опыта минимум?
1. Добавьте максимальное количество навыков, которые вам подходят, чем больше навыков - тем лучше. Желательно выбирать навыки из списка, которые есть на сайте. Если нашли какую-нибудь очень интересную вакансию - возможно стоит на какое-то время изменить резюме, чтобы навыки на 100% подходили под вакансию, но это надо делать только в том случае, если этими навыками вы действительно обладаете. Чем больше соответствие навыков - тем выше вас видит работодатель
2. Распишите информацию о проектах, чтобы все было довольно детально, но лаконично: стек, обязанности, команда. Об этом часто спрашивают на следующих этапах. Если очень лень - можно использовать нейросеть, но потом текст все равно обязательно нужно отредактировать
3. Уберите возраст из профиля. Мне это помогло, потому что только стукнуло 18, но, думаю, лучше от этой информации в профиле избавиться, у всех HR свои предпочтения. Если очень интересно будет - спросят на интервью (обычно спрашивают)
4. Добавьте контактные данные в раздел "Обо мне", поскольку для того, чтобы увидеть ваши контактные данные на сайте, работодателю нужно платить, а если вы дадите их бесплатно - будет чуть выше шанс, что с вами свяжутся. Также в этом разделе стоит указать GitHub и сайт-визитку, если есть
5. Попробуйте верифицировать хотя бы один навык, это хороший знак для работодателя
6. Не стоит добавлять сертификаты "Русского Медвежонка", которые вы получили за победу в олимпиаде во 2 классе. Фотографию брелка победителя еще можете прикрепить, но тоже опционально
Все эти пункты помогли автору статьи получать положительные ответы на отклики на интересные мне вакансии. Все эти пункты выполнить очень просто, свой годовой опыт работы автор в профиле отразил в вышеописанном формате где-то за полчаса, так что вы тоже потратьте, если еще этого не сделали, это время потом точно окупится.
👉 @seniorFront
1. Добавьте максимальное количество навыков, которые вам подходят, чем больше навыков - тем лучше. Желательно выбирать навыки из списка, которые есть на сайте. Если нашли какую-нибудь очень интересную вакансию - возможно стоит на какое-то время изменить резюме, чтобы навыки на 100% подходили под вакансию, но это надо делать только в том случае, если этими навыками вы действительно обладаете. Чем больше соответствие навыков - тем выше вас видит работодатель
2. Распишите информацию о проектах, чтобы все было довольно детально, но лаконично: стек, обязанности, команда. Об этом часто спрашивают на следующих этапах. Если очень лень - можно использовать нейросеть, но потом текст все равно обязательно нужно отредактировать
3. Уберите возраст из профиля. Мне это помогло, потому что только стукнуло 18, но, думаю, лучше от этой информации в профиле избавиться, у всех HR свои предпочтения. Если очень интересно будет - спросят на интервью (обычно спрашивают)
4. Добавьте контактные данные в раздел "Обо мне", поскольку для того, чтобы увидеть ваши контактные данные на сайте, работодателю нужно платить, а если вы дадите их бесплатно - будет чуть выше шанс, что с вами свяжутся. Также в этом разделе стоит указать GitHub и сайт-визитку, если есть
5. Попробуйте верифицировать хотя бы один навык, это хороший знак для работодателя
6. Не стоит добавлять сертификаты "Русского Медвежонка", которые вы получили за победу в олимпиаде во 2 классе. Фотографию брелка победителя еще можете прикрепить, но тоже опционально
Все эти пункты помогли автору статьи получать положительные ответы на отклики на интересные мне вакансии. Все эти пункты выполнить очень просто, свой годовой опыт работы автор в профиле отразил в вышеописанном формате где-то за полчаса, так что вы тоже потратьте, если еще этого не сделали, это время потом точно окупится.
👉 @seniorFront
🎨 Цветовая палитра макета "Agriculture Landing Website Templates"
Сайтодел | #палитра
Original post link: t.me/sitodel/1714
Forwarded and filtered by @smartfeed_bot
HEX | RGB #D4D4BE | rgb(212,212,190)
#49A760rgb(73,167,96) #1F4E3D | rgb(31,78,61)
⚠️ Цвет копируется одним кликом!Сайтодел | #палитра
Original post link: t.me/sitodel/1714
Forwarded and filtered by @smartfeed_bot
Применение принципов SOLID в React
В этой статье вы узнаете, как применять принципы SOLID в React. SOLID — это набор принципов, которые помогают разработчикам создавать более поддерживаемый и расширяемый код. Здесь объясняется каждый принцип и показывается, как его можно применить в React-приложениях.
Если вы хотите улучшить свои навыки разработки в React, эта статья точно стоит вашего внимания:
https://medium.com/dailyjs/applying-solid-principles-in-react-14905d9c5377
@tproger_web #react #solid
Original post link: t.me/tproger_web/4473
Forwarded and filtered by @smartfeed_bot
В этой статье вы узнаете, как применять принципы SOLID в React. SOLID — это набор принципов, которые помогают разработчикам создавать более поддерживаемый и расширяемый код. Здесь объясняется каждый принцип и показывается, как его можно применить в React-приложениях.
Если вы хотите улучшить свои навыки разработки в React, эта статья точно стоит вашего внимания:
https://medium.com/dailyjs/applying-solid-principles-in-react-14905d9c5377
@tproger_web #react #solid
Original post link: t.me/tproger_web/4473
Forwarded and filtered by @smartfeed_bot
😎Деструктуризация в React. Очевидно, но важно
В этой статье вы узнаете о проблемах, которые могут возникнуть при использовании деструктуризации в React, особенно при добавлении значений по умолчанию для объектов или массивов в аргументах компонентов.
Читать...
Original post link: t.me/frontendnoteschannel/3450
Forwarded and filtered by @smartfeed_bot
В этой статье вы узнаете о проблемах, которые могут возникнуть при использовании деструктуризации в React, особенно при добавлении значений по умолчанию для объектов или массивов в аргументах компонентов.
Читать...
Original post link: t.me/frontendnoteschannel/3450
Forwarded and filtered by @smartfeed_bot
Генераторы
Не стоит забывать про них и недооценивать их возможности. Генератор позволяет определить, какое значение будет возвращено при каждом следующем вызове
В целом использовать их в разработке необязательно, полезно лишь знать, как они работают, потому что они активно используются в async/await и могут пригодиться для отладки кода.
Original post link: t.me/senior_front/1933
Forwarded and filtered by @smartfeed_bot
Не стоит забывать про них и недооценивать их возможности. Генератор позволяет определить, какое значение будет возвращено при каждом следующем вызове
next().В целом использовать их в разработке необязательно, полезно лишь знать, как они работают, потому что они активно используются в async/await и могут пригодиться для отладки кода.
Original post link: t.me/senior_front/1933
Forwarded and filtered by @smartfeed_bot
Фрилансер и заказчик. Взаимодействие
Каждый, кто имеет дело с IT в той или иной форме, так или иначе сталкивался/слышал о том, что существует такое явление, как фриланс. Как может показаться на первый взгляд, фриланс несет в себе одни плюсы. Ни тебе работника в офисе, для которого надо организовать рабочее место, ни проблем с оформлением его по ТК и последующим увольнением (если нанимать на четко заданный объем работ). Так же стоимость фрилансера, как правило, оказывается от 2 до 20 раз меньше, чем у фирмы, предлагающей те же самые услуги.
Тем не менее, существует огромное количество негативного опыта работы с фрилансом. О его причинах и возможных способах устранения — в статье.
👉 @seniorFront
Original post link: t.me/seniorFront/3948
Forwarded and filtered by @smartfeed_bot
Каждый, кто имеет дело с IT в той или иной форме, так или иначе сталкивался/слышал о том, что существует такое явление, как фриланс. Как может показаться на первый взгляд, фриланс несет в себе одни плюсы. Ни тебе работника в офисе, для которого надо организовать рабочее место, ни проблем с оформлением его по ТК и последующим увольнением (если нанимать на четко заданный объем работ). Так же стоимость фрилансера, как правило, оказывается от 2 до 20 раз меньше, чем у фирмы, предлагающей те же самые услуги.
Тем не менее, существует огромное количество негативного опыта работы с фрилансом. О его причинах и возможных способах устранения — в статье.
👉 @seniorFront
Original post link: t.me/seniorFront/3948
Forwarded and filtered by @smartfeed_bot
Годных codepen-проектов вам в ленту: Just Ice — анимированная сцена с объемным кубиком льда
Проект реализован с помощью CSS и JavaScript: https://codepen.io/atzedent/pen/eYKPGQr
@tproger_web #codepen
Original post link: t.me/tproger_web/4475
Forwarded and filtered by @smartfeed_bot
Проект реализован с помощью CSS и JavaScript: https://codepen.io/atzedent/pen/eYKPGQr
@tproger_web #codepen
Original post link: t.me/tproger_web/4475
Forwarded and filtered by @smartfeed_bot
🥶Создание библиотек и публикация в npm
В этой статье разберём процесс создания библиотек и их публикации в системе управления пакетами npm.
Читать...
Original post link: t.me/frontendnoteschannel/3451
Forwarded and filtered by @smartfeed_bot
В этой статье разберём процесс создания библиотек и их публикации в системе управления пакетами npm.
Читать...
Original post link: t.me/frontendnoteschannel/3451
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 8 messages
Our filtering prevented you from: 2 messages
Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Веб-страница: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 10 messages
Today you received: 8 messages
Our filtering prevented you from: 2 messages
Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Веб-страница: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
Forwarded from Веб-страница
Вышел бенчмарк для измерения скорости отклика веб-приложений Speedometer 3.0 от Mozilla, Google, Microsoft и Apple
Состоялся релиз бенчмарка для измерения скорости отклика веб-приложений в различных браузерах Speedometer 3.0. Работу над этим проектом вели разработчики Mozilla, Google, Microsoft и Apple.
В Speedometer 3.0 осуществлён переход на применение новых выпусков фреймворков Angular, Backbone, jQuery, Lit, Preact, React, React+Redux, Svelte и Vue. Задействованы современные шаблоны проектирования сайтов и веб-приложений, например, использование Webpack, Web Components и новых методов работы с DOM.
Добавлены тесты для оценки производительности отрисовки при помощи элемента Canvas, генерации SVG, обработки сложных CSS, работы с очень большими деревьями DOM и использования методов, применяемых при редактировании контента в режиме WYSIWYG и при работе с новостными сайтами.
Исходный код проекта Speedometer опубликован на GitHub под лицензией BSD: https://github.com/WebKit/Speedometer/
@tproger_web #тестирование #дизайн #вёрстка
Состоялся релиз бенчмарка для измерения скорости отклика веб-приложений в различных браузерах Speedometer 3.0. Работу над этим проектом вели разработчики Mozilla, Google, Microsoft и Apple.
В Speedometer 3.0 осуществлён переход на применение новых выпусков фреймворков Angular, Backbone, jQuery, Lit, Preact, React, React+Redux, Svelte и Vue. Задействованы современные шаблоны проектирования сайтов и веб-приложений, например, использование Webpack, Web Components и новых методов работы с DOM.
Добавлены тесты для оценки производительности отрисовки при помощи элемента Canvas, генерации SVG, обработки сложных CSS, работы с очень большими деревьями DOM и использования методов, применяемых при редактировании контента в режиме WYSIWYG и при работе с новостными сайтами.
Исходный код проекта Speedometer опубликован на GitHub под лицензией BSD: https://github.com/WebKit/Speedometer/
@tproger_web #тестирование #дизайн #вёрстка
Что будет выведено в консоль?
Ответ
Original post link: t.me/senior_front/1934
Forwarded and filtered by @smartfeed_bot
Ответ
Original post link: t.me/senior_front/1934
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
Воспользуйтесь российским AI-ассистентом разработчика на GitVerse
Разработчики получили доступ к GigaCode — AI-помощнику* для ускорения работы с кодом.
AI-ассистента можно использовать в любой привычной среде разработки: IDE от JetBrains, VSCode, Jupyter. Помощник будет генерировать для вас варианты завершения кода в режиме реального времени, ускоряя и упрощая процесс работы.
GigaCode развивается вместе c сервисом GigaChat. В AI-ассистенте есть нейросетевые модели, которые обучены на больших корпусах исходного кода и специализируются на определенных задачах разработки. А по опыту команд в Сбере, GigaCode может сокращать время для создания кода до 25%.
GigaCode доступен для раннего использования на площадке GitVerse. Это платформа для работы с исходным кодом от СберТеха, где можно размещать проекты с открытым и закрытым кодом, вести совместную разработку и участвовать в жизни комьюнити.
Чтобы получить доступ к GigaCode, зарегистрируйтесь на GitVerse — проект доступен всем желающим.
*AI, artificial intelligence — искусственный интеллект
Разработчики получили доступ к GigaCode — AI-помощнику* для ускорения работы с кодом.
AI-ассистента можно использовать в любой привычной среде разработки: IDE от JetBrains, VSCode, Jupyter. Помощник будет генерировать для вас варианты завершения кода в режиме реального времени, ускоряя и упрощая процесс работы.
GigaCode развивается вместе c сервисом GigaChat. В AI-ассистенте есть нейросетевые модели, которые обучены на больших корпусах исходного кода и специализируются на определенных задачах разработки. А по опыту команд в Сбере, GigaCode может сокращать время для создания кода до 25%.
GigaCode доступен для раннего использования на площадке GitVerse. Это платформа для работы с исходным кодом от СберТеха, где можно размещать проекты с открытым и закрытым кодом, вести совместную разработку и участвовать в жизни комьюнити.
Чтобы получить доступ к GigaCode, зарегистрируйтесь на GitVerse — проект доступен всем желающим.
*AI, artificial intelligence — искусственный интеллект
This media is not supported in your browser
VIEW IN TELEGRAM
Hi-Tech Notification Button
Внутри кнопки находится анимированная SVG картинка.
👉 @seniorFront
Original post link: t.me/seniorFront/3949
Forwarded and filtered by @smartfeed_bot
Внутри кнопки находится анимированная SVG картинка.
👉 @seniorFront
Original post link: t.me/seniorFront/3949
Forwarded and filtered by @smartfeed_bot
👻Этот опасный рефакторинг
В этой статье узнаете о том, как снизить риски при проведении рефакторинга, как использовать чек-лист для оценки ограничений и изоляции доработок, а также как написать обширные тесты для проверки изменений.
Читать...
Original post link: t.me/frontendnoteschannel/3453
Forwarded and filtered by @smartfeed_bot
В этой статье узнаете о том, как снизить риски при проведении рефакторинга, как использовать чек-лист для оценки ограничений и изоляции доработок, а также как написать обширные тесты для проверки изменений.
Читать...
Original post link: t.me/frontendnoteschannel/3453
Forwarded and filtered by @smartfeed_bot
#вопросы_с_собеседований
Что такое цикл событий (event loop) и как он работает?
Движок браузера выполняет JavaScript в одном потоке. Для потока выделяется область памяти — стэк, где хранятся фреймы (аргументы, локальные переменные) вызываемых функций.
Список событий, подлежащих обработке, формирует очередь событий. Когда стек освобождается, движок может обрабатывать событие из очереди. Координирование этого процесса и происходит в event loop.
Это, по сути, бесконечный цикл, в котором выполняются многочисленные обработчики событий. Если очередь пустая — движок браузера ждет, когда поступит событие. Если непустая — первое в ней событие извлекается и его обработчик начинает выполняться. И так до бесконечности.
Original post link: t.me/senior_front/1936
Forwarded and filtered by @smartfeed_bot
Что такое цикл событий (event loop) и как он работает?
Движок браузера выполняет JavaScript в одном потоке. Для потока выделяется область памяти — стэк, где хранятся фреймы (аргументы, локальные переменные) вызываемых функций.
Список событий, подлежащих обработке, формирует очередь событий. Когда стек освобождается, движок может обрабатывать событие из очереди. Координирование этого процесса и происходит в event loop.
Это, по сути, бесконечный цикл, в котором выполняются многочисленные обработчики событий. Если очередь пустая — движок браузера ждет, когда поступит событие. Если непустая — первое в ней событие извлекается и его обработчик начинает выполняться. И так до бесконечности.
Original post link: t.me/senior_front/1936
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
Создавайте, тестируйте и развертывайте приложения бесплатно
Провайдер облачных и AI-технологий Cloud․ru запустил free tier: бесплатные облачные ресурсы навсегда.
Какие сервисы можно подключить:
1️⃣ Виртуальная машина
2vCPU/4 ГБ с диском на 30 ГБ. Такой машины хватит, чтобы разработать и протестировать приложение или поднять VPN-шлюз.
2️⃣ Объектное хранилище S3
5 ГБ стандартного облачного хранилища и бесплатные операции для загрузки данных любого типа.
Сервисы расположены на платформе Cloud․ru Evolution — публичное защищенное облако на базе собственных разработок и свободно распространяемых компонентов.
Для выхода ВМ в интернет вам понадобится публичный IP, который вы можете оплатить самостоятельно (146 рублей), либо воспользоваться бонусами — 4000 рублей для новых пользователей при привязке карты или регистрации по Сбер ID.
✅ Забрать бесплатные ресурсы можно на сайте: https://sc.link/TrsaN
Провайдер облачных и AI-технологий Cloud․ru запустил free tier: бесплатные облачные ресурсы навсегда.
Какие сервисы можно подключить:
2vCPU/4 ГБ с диском на 30 ГБ. Такой машины хватит, чтобы разработать и протестировать приложение или поднять VPN-шлюз.
5 ГБ стандартного облачного хранилища и бесплатные операции для загрузки данных любого типа.
Сервисы расположены на платформе Cloud․ru Evolution — публичное защищенное облако на базе собственных разработок и свободно распространяемых компонентов.
Для выхода ВМ в интернет вам понадобится публичный IP, который вы можете оплатить самостоятельно (146 рублей), либо воспользоваться бонусами — 4000 рублей для новых пользователей при привязке карты или регистрации по Сбер ID.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤬1
🐙 Cesium – библиотека JavaScript для создания 3D-глобусов и 2D-карт в браузере. Подходит для создания приложений, где требуются геоданные.
Сайтодел | #репозиторий #github
Original post link: t.me/sitodel/1715
Forwarded and filtered by @smartfeed_bot
Сайтодел | #репозиторий #github
Original post link: t.me/sitodel/1715
Forwarded and filtered by @smartfeed_bot
Media is too big
VIEW IN TELEGRAM
Infinite Animation
В этом видео создаётся бесконечная анимация загрузки, частицы которой генерируются в JS и анимируются в CSS.
👉 @seniorFront
Original post link: t.me/seniorFront/3950
Forwarded and filtered by @smartfeed_bot
В этом видео создаётся бесконечная анимация загрузки, частицы которой генерируются в JS и анимируются в CSS.
👉 @seniorFront
Original post link: t.me/seniorFront/3950
Forwarded and filtered by @smartfeed_bot
#вопросы_с_собеседований
Как используется render() в React?
Для каждого компонента требуется функция render(). Эта функция возвращает HTML, который должен отображаться в компоненте. Если вам нужно отобразить более одного элемента, все элементы должны быть внутри одного родительского тега, такого как или . На картинке компонент, выводящий Hello World на экран.
Original post link: t.me/senior_front/1938
Forwarded and filtered by @smartfeed_bot
Как используется render() в React?
Для каждого компонента требуется функция render(). Эта функция возвращает HTML, который должен отображаться в компоненте. Если вам нужно отобразить более одного элемента, все элементы должны быть внутри одного родительского тега, такого как или . На картинке компонент, выводящий Hello World на экран.
Original post link: t.me/senior_front/1938
Forwarded and filtered by @smartfeed_bot