Каким будет вывод этого фрагмента кода?
Anonymous Quiz
25%
start , end , setTimeout, resolve
21%
start , setTimeout , end, resolve
43%
start , end , resolve, setTimeout
11%
start , resolve , end, setTimeout
🤯6👌1
Хук useToggle
Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.
#react #code #useToggle #hook
Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.
#react #code #useToggle #hook
👏8👍4
Недавно наткнулся на статью, что Google экспериментирует с использованием элемента <canvas> для рендеринга полных веб-страниц. Это подразумевает отрисовку всех элементов страницы, включая текст, кнопки, хедер и футер, через <canvas>.
С помощью такого подхода можно достичь высокого уровня плавности и качества графики. Это особенно круто для сложных приложений, где нужно много визуализации, типа карт или графических редакторов.
Но тут, конечно, возникает вопрос - а как же быть с СЕО, ведь роботы не смогут увидеть, что у вас на <canvas>😅
Прикол конечно, вы заходите на страницу и там в <body> сразу идет <canvas>, а все блоки нарисованы.
С помощью такого подхода можно достичь высокого уровня плавности и качества графики. Это особенно круто для сложных приложений, где нужно много визуализации, типа карт или графических редакторов.
Но тут, конечно, возникает вопрос - а как же быть с СЕО, ведь роботы не смогут увидеть, что у вас на <canvas>😅
Прикол конечно, вы заходите на страницу и там в <body> сразу идет <canvas>, а все блоки нарисованы.
😁7😱3
Мой первый поиск работы
Все мое обучение заняло около года. Из этого времени на изучение Frontend я потратил всего 7 месяцев. Остальные 5 месяцев были посвящены поиску себя, так как я не знал, что учить и каким программистом стать. Не имея четкого плана, я провел 5 месяцев в никуда.
Когда я освоил React, Redux, Router, пришло время искать работу, но я сомневался в себе. Боялся, что недостаточно хорош и что мне нужно еще немного поучиться. Ведь в Roadmap было столько всего - Next.js, Node.js, ESLint, Webpack, TypeScript и т.д.
Я очень боялся проходить собеседования. Первый отклик я отправлял около 30 минут, весь вспотел и перенервничал, прежде чем нажал одну кнопку. Как я себя переборол? Просто нажал кнопку, ведь отклик - это не приглашение. 😅
С каждым днем я все активнее откликался, улучшал резюме, смотрел множество видео с прохождением собеседований и разбором заданий. Я постоянно читал гайды о том, как улучшить резюме. Ежедневно я писал конспекты, решал задачи, учил алгоритмы, работал над проектом для портфолио, изучал TypeScript и другие технологии, просто чтобы сказать: "Я знаком с этим, но не работал".😁
В то время мне не приходилось врать в резюме о своем опыте. Без опыта и без курсов HR с удовольствием отвечали, присылали технические задания и приглашали на собеседования.
К моменту начала поиска работы я уже спокойно разрабатывал приложения, не подглядывая, я сам добавлял функционал и придумывал дизайн.
Спустя 2 недели я нашел свою первую работу.🎉
Продолжение следует... Если поддержите Лукасами, то завтра напишу о своей первой работе
#story_1
Все мое обучение заняло около года. Из этого времени на изучение Frontend я потратил всего 7 месяцев. Остальные 5 месяцев были посвящены поиску себя, так как я не знал, что учить и каким программистом стать. Не имея четкого плана, я провел 5 месяцев в никуда.
Когда я освоил React, Redux, Router, пришло время искать работу, но я сомневался в себе. Боялся, что недостаточно хорош и что мне нужно еще немного поучиться. Ведь в Roadmap было столько всего - Next.js, Node.js, ESLint, Webpack, TypeScript и т.д.
Я очень боялся проходить собеседования. Первый отклик я отправлял около 30 минут, весь вспотел и перенервничал, прежде чем нажал одну кнопку. Как я себя переборол? Просто нажал кнопку, ведь отклик - это не приглашение. 😅
С каждым днем я все активнее откликался, улучшал резюме, смотрел множество видео с прохождением собеседований и разбором заданий. Я постоянно читал гайды о том, как улучшить резюме. Ежедневно я писал конспекты, решал задачи, учил алгоритмы, работал над проектом для портфолио, изучал TypeScript и другие технологии, просто чтобы сказать: "Я знаком с этим, но не работал".😁
В то время мне не приходилось врать в резюме о своем опыте. Без опыта и без курсов HR с удовольствием отвечали, присылали технические задания и приглашали на собеседования.
К моменту начала поиска работы я уже спокойно разрабатывал приложения, не подглядывая, я сам добавлял функционал и придумывал дизайн.
Спустя 2 недели я нашел свою первую работу.🎉
Продолжение следует... Если поддержите Лукасами, то завтра напишу о своей первой работе
#story_1
👍31🔥3✍1👏1
Вообще думаю создать фейковое резюме и попробовать получить приглашение на Junior позицию без опыта.
Поэкспериментировать с фрилансом, сопроводительными письмами.
Возможно даже создать гитхаб профиль и добавить туда разные проекты. И весь процесс вам показывать
Как идея? 💡
Поэкспериментировать с фрилансом, сопроводительными письмами.
Возможно даже создать гитхаб профиль и добавить туда разные проекты. И весь процесс вам показывать
Как идея? 💡
👍47🔥12🤝2❤1
Моя первая работа
Моя первая работа была в аутстаффинговой компании. Компании сдают своих работников в аренду в другие компании/проекты и за это получают деньги. В Аутстаф набирают много джунов. Джунов нет смысла сдавать в аренду, но зачем их тогда набирают? Чтобы выдать за Мидл+/Сеньора.
Джунов готовят к собесам, прилизывают резюме, накручивают 3 года опыта в крутых проектах. Вам как шпиону прорабатывают историю, которую вы учите и потом на собесе рассказываете. Вы вместе с вашим ментором вместе проходите собес, он сидит за камерой и подсказывает вам, пишет ответы и решает задачи. (Все это разумеется незаметно для собеседующей компании)
В итоге Джуна с 2-3 месяцами опыта продают на Сеньорскую позицию в европейскую компанию с окладом 4-5к долларов месяц. Разумеется Джуну достается 20к рублей, остальное идет в компанию.
Большинство задач однотипные в любой работе. 70% ты делаешь интерфейсы без сложной логики. А когда проступает сложная задача то тебе помогает ментор. Без ментора ты не должен общаться с командой в которую тебя закинули, не можешь отвечать на сообщения и участвовать в созвонах. Прежде чем запушить код, его проверяет твой ментор.
Я работал на таком проекте 4 месяца, к тому времени мой коммерческий опыт был всего 6 месяцев. Я Джун с 6 месяцами опыта, успешно работаю Сеньором уже 4 месяца. Я выполнял почти все задачи, которые мне давали. Я был довольно самостоятельным, решал что писать, как отвечать, проверял код других разрабов с проекта. Единственное, сначала ментор должен был дать добро. Мой ментор меня постоянно хвалил, и мой код уже не требовал исправлений.
Самостоятельность сильно прокачивает. В больших компаниях ты год красишь кнопки потому что ты Джун и это твоя зона ответственности. А тут ты выполняешь боевые задачи, растешь быстрыми темпами и набираешься уверенности. Эта компания дала мне большой рывок, я понял логику программирования, перестал бояться инструментов и сложных задач.
Продолжение следует… Если поддержите Лукасами, то завтра напишу почему уволился спустя 6 месяцев
#story_1
Моя первая работа была в аутстаффинговой компании. Компании сдают своих работников в аренду в другие компании/проекты и за это получают деньги. В Аутстаф набирают много джунов. Джунов нет смысла сдавать в аренду, но зачем их тогда набирают? Чтобы выдать за Мидл+/Сеньора.
Джунов готовят к собесам, прилизывают резюме, накручивают 3 года опыта в крутых проектах. Вам как шпиону прорабатывают историю, которую вы учите и потом на собесе рассказываете. Вы вместе с вашим ментором вместе проходите собес, он сидит за камерой и подсказывает вам, пишет ответы и решает задачи. (Все это разумеется незаметно для собеседующей компании)
В итоге Джуна с 2-3 месяцами опыта продают на Сеньорскую позицию в европейскую компанию с окладом 4-5к долларов месяц. Разумеется Джуну достается 20к рублей, остальное идет в компанию.
Большинство задач однотипные в любой работе. 70% ты делаешь интерфейсы без сложной логики. А когда проступает сложная задача то тебе помогает ментор. Без ментора ты не должен общаться с командой в которую тебя закинули, не можешь отвечать на сообщения и участвовать в созвонах. Прежде чем запушить код, его проверяет твой ментор.
Я работал на таком проекте 4 месяца, к тому времени мой коммерческий опыт был всего 6 месяцев. Я Джун с 6 месяцами опыта, успешно работаю Сеньором уже 4 месяца. Я выполнял почти все задачи, которые мне давали. Я был довольно самостоятельным, решал что писать, как отвечать, проверял код других разрабов с проекта. Единственное, сначала ментор должен был дать добро. Мой ментор меня постоянно хвалил, и мой код уже не требовал исправлений.
Самостоятельность сильно прокачивает. В больших компаниях ты год красишь кнопки потому что ты Джун и это твоя зона ответственности. А тут ты выполняешь боевые задачи, растешь быстрыми темпами и набираешься уверенности. Эта компания дала мне большой рывок, я понял логику программирования, перестал бояться инструментов и сложных задач.
Продолжение следует… Если поддержите Лукасами, то завтра напишу почему уволился спустя 6 месяцев
#story_1
👍51😱3🔥2👏2
Промисификации в JavaScript
Это процесс преобразования функций, которые используют колбеки для управления асинхронным кодом, в функции, работающие на основе промисов. Это делается для упрощения и улучшения управления асинхронными операциями в коде.
Самый простой пример это
Так же
Как работает промисификация:
- promisify принимает функцию func, основанную на колбеках.
- Возвращает новую функцию, которая, когда вызывается, возвращает промис.
- Внутри промиса вызывается исходная функция func с переданными аргументами и дополнительным колбеком.
- Этот колбек (callback) обрабатывает результат или ошибку и вызывает resolve или reject соответственно.
#promisify #JavaScript #promise
Это процесс преобразования функций, которые используют колбеки для управления асинхронным кодом, в функции, работающие на основе промисов. Это делается для упрощения и улучшения управления асинхронными операциями в коде.
Самый простой пример это
setTimeout(callback, delay). Как раз таки тут мы передаем колбек который должен выполнится по истечении какой то задержки.Так же
fs.readFile(filePath, 'utf8', callback) функции чтения файла в Node.jsКак работает промисификация:
- promisify принимает функцию func, основанную на колбеках.
- Возвращает новую функцию, которая, когда вызывается, возвращает промис.
- Внутри промиса вызывается исходная функция func с переданными аргументами и дополнительным колбеком.
- Этот колбек (callback) обрабатывает результат или ошибку и вызывает resolve или reject соответственно.
#promisify #JavaScript #promise
👍6❤2🤓2
Мое увольнение
Это была моя первая официальная работа. Классный офис, зона отдыха с большой плазмой, YouTube, PS4. Чай, кофе, снеки, фрукты, конфеты, печенье - всё, как на картинках из крутых офисов Яндекса и Google.
Мы отмечали каждый праздник: компания дарила нам подарки, заказывала доставку еды. По пятницам мы оставались в офисе, играли в настольные игры или смотрели фильмы. Для нас заказывали кучу пицц и роллов. Каждый четверг проводились мероприятия - викторины, командные игры, а также "технические четверги", где кто-то выступал с презентацией на техническую тему. Я выступил с темой ООП.
Раз в месяц у нас была индивидуальная встреча с HR и ментором, где обсуждались рост, достижения и потребности. Было здорово работать в кабинете с командой, общаться и получать советы от ментора. В офисе также были бесплатные занятия английским, на которые я ходил два раза в неделю. Один раз мы с коллегами даже пошли в баню.
Мой первый корпоратив в этой компании прошёл в прикольном кафе с банкетом, ведущим, танцами и конкурсами.
Но был и обратный момент: первый месяц я работал без зарплаты. Второй месяц моя зарплата составила 10 тысяч рублей, третий - 15 тысяч, а последующие месяцы - 25 тысяч. Я быстро рос профессионально, выполнял все задачи и даже работал дома. В пути на работу и обратно я читал книги и документацию.
Когда я попросил о повышении зарплаты, мне отказали, обещая повышение на 10 тысяч только через месяц. Я сказал, что подумаю. Конечно, я мог согласится и пока не нашел новую работу получать зарплату. Но я так не мог. В четверг я сказал что увольняюсь и начал искать работу. Мне нужно было доработать до понедельника. За выходные я сделал 4 технических задания и меня пригласили на 4 собеседования. В понедельник после последнего дня я прошел 2 собеседования и получил два оффера. Остальные проходить не стал. Выбрал компанию где больше понравилось. Работаю в ней до сих пор. Зарплату предложили почти в 3 раза больше чем было.
Продолжение следует...
#story_1
Это была моя первая официальная работа. Классный офис, зона отдыха с большой плазмой, YouTube, PS4. Чай, кофе, снеки, фрукты, конфеты, печенье - всё, как на картинках из крутых офисов Яндекса и Google.
Мы отмечали каждый праздник: компания дарила нам подарки, заказывала доставку еды. По пятницам мы оставались в офисе, играли в настольные игры или смотрели фильмы. Для нас заказывали кучу пицц и роллов. Каждый четверг проводились мероприятия - викторины, командные игры, а также "технические четверги", где кто-то выступал с презентацией на техническую тему. Я выступил с темой ООП.
Раз в месяц у нас была индивидуальная встреча с HR и ментором, где обсуждались рост, достижения и потребности. Было здорово работать в кабинете с командой, общаться и получать советы от ментора. В офисе также были бесплатные занятия английским, на которые я ходил два раза в неделю. Один раз мы с коллегами даже пошли в баню.
Мой первый корпоратив в этой компании прошёл в прикольном кафе с банкетом, ведущим, танцами и конкурсами.
Но был и обратный момент: первый месяц я работал без зарплаты. Второй месяц моя зарплата составила 10 тысяч рублей, третий - 15 тысяч, а последующие месяцы - 25 тысяч. Я быстро рос профессионально, выполнял все задачи и даже работал дома. В пути на работу и обратно я читал книги и документацию.
Когда я попросил о повышении зарплаты, мне отказали, обещая повышение на 10 тысяч только через месяц. Я сказал, что подумаю. Конечно, я мог согласится и пока не нашел новую работу получать зарплату. Но я так не мог. В четверг я сказал что увольняюсь и начал искать работу. Мне нужно было доработать до понедельника. За выходные я сделал 4 технических задания и меня пригласили на 4 собеседования. В понедельник после последнего дня я прошел 2 собеседования и получил два оффера. Остальные проходить не стал. Выбрал компанию где больше понравилось. Работаю в ней до сих пор. Зарплату предложили почти в 3 раза больше чем было.
Продолжение следует...
#story_1
👍17🔥3❤2
Как думаете плохо поступил? Меня вырастили, кормили пиццами, а я ушёл
👍8❤1🔥1
iFrame в HTML
Это элемент с помощью которого мы можем встраивать на веб страницу другую веб страницу😅
Например, я разрабатываю плагин для Figma. Figma мне предоставляет доступ к своему приложению с помощью iFrame. Ты можешь разрабатывать приложение в приложении. У этого приложения свой body, noscript, head. Единственное такие приложения ограниченны для безопасности, чтобы разработчик не мог залезть в 'родительское приложение'.
Так же на наш сайт мы можем встраивать карты Google, другие сайты, YouTube видео.
1️⃣ С помощью атрибута src можно указать URL, который будет загружен в <iframe>.
2️⃣ Атрибуты width и height позволяют задать размеры <iframe>, обычно указываемые в пикселях или процентах.
3️⃣ Атрибут allowfullscreen позволяет <iframe> переходить в полноэкранный режим
#обучающийПост #html #iframe
Это элемент с помощью которого мы можем встраивать на веб страницу другую веб страницу😅
Например, я разрабатываю плагин для Figma. Figma мне предоставляет доступ к своему приложению с помощью iFrame. Ты можешь разрабатывать приложение в приложении. У этого приложения свой body, noscript, head. Единственное такие приложения ограниченны для безопасности, чтобы разработчик не мог залезть в 'родительское приложение'.
Так же на наш сайт мы можем встраивать карты Google, другие сайты, YouTube видео.
1️⃣ С помощью атрибута src можно указать URL, который будет загружен в <iframe>.
2️⃣ Атрибуты width и height позволяют задать размеры <iframe>, обычно указываемые в пикселях или процентах.
3️⃣ Атрибут allowfullscreen позволяет <iframe> переходить в полноэкранный режим
#обучающийПост #html #iframe
👍5🔥2
HTML с 0 до Профи. Полный курс + Практика [2024]
Сам много чего узнал😅 Много всего появилось с того момента как я изучил HTML.
Видео без воды, динамичное, с примерами и логикой использования. Поймет даже ребенок. Тут все что есть в HTML. Сделано по доке, статьям, еще доке.
Освежите память, узнайте новое, закрепите старое.
Осталось немного...
Сам много чего узнал😅 Много всего появилось с того момента как я изучил HTML.
Видео без воды, динамичное, с примерами и логикой использования. Поймет даже ребенок. Тут все что есть в HTML. Сделано по доке, статьям, еще доке.
Освежите память, узнайте новое, закрепите старое.
Осталось немного...
👍30🔥10👏1😇1
Съемки и монтаж видеокурса по HTML завершены. Видео идёт 1 час 50 минут.
Как я и говорил уже, это полный курс. Этого видео достаточно для того чтобы изучить HTML и перейти к CSS.
Сильно намучался. Мои компы не тянут видеоредакторы😅, очень много материалов, слайдов, аудио и видео. Я монтировал, сшивал все по частям для качества.
В понедельник выйдет в YouTube. Рассчитываю на вашу поддержку.
Видео по TypeScript уже почти 10.000 просмотров. Надеюсь видео по HTML наберёт не меньше. 🍀
Как я и говорил уже, это полный курс. Этого видео достаточно для того чтобы изучить HTML и перейти к CSS.
Сильно намучался. Мои компы не тянут видеоредакторы😅, очень много материалов, слайдов, аудио и видео. Я монтировал, сшивал все по частям для качества.
В понедельник выйдет в YouTube. Рассчитываю на вашу поддержку.
Видео по TypeScript уже почти 10.000 просмотров. Надеюсь видео по HTML наберёт не меньше. 🍀
🔥49👍6👏1🎉1
Метод splice в JavaScript
Он выполняет три основные функции: добавляет, удаляет и заменяет элементы в массиве.
Удаление
splice(start, deleteCount) - удалим элементы начиная с индекса start и количество deleteCount
Добавление
splice(start, 0, item1, ..., itemN) - добавляет элементы (item1, ..., itemN) в массив, начиная с индекса start, без удаления существующих.
Изменение
splice(start, deleteCount, item1, ..., itemN) - заменяет deleteCount элементов в массиве, начиная с индекса start, на новые элементы (item1, ..., itemN).
#обучающийПост #JavaScript #array #splice
Он выполняет три основные функции: добавляет, удаляет и заменяет элементы в массиве.
Удаление
splice(start, deleteCount) - удалим элементы начиная с индекса start и количество deleteCount
Добавление
splice(start, 0, item1, ..., itemN) - добавляет элементы (item1, ..., itemN) в массив, начиная с индекса start, без удаления существующих.
Изменение
splice(start, deleteCount, item1, ..., itemN) - заменяет deleteCount элементов в массиве, начиная с индекса start, на новые элементы (item1, ..., itemN).
#обучающийПост #JavaScript #array #splice
👍12✍3
HTML с 0 до Профи. Полный курс + Практика
На YouTube канале вышло новое видео. В этом курсе понятно разобраны все темы HTML. Курс подойдет не только для новичков, он остается актуальным для всех уровней.
Полезно вспомнить все. Мне нравится такая цитата:
"Лучший способ научиться чему-то - научить других. Второй лучший способ научиться чему-то - сделать это самому."
От вас жду поддержку видео😌
На YouTube канале вышло новое видео. В этом курсе понятно разобраны все темы HTML. Курс подойдет не только для новичков, он остается актуальным для всех уровней.
Полезно вспомнить все. Мне нравится такая цитата:
"Лучший способ научиться чему-то - научить других. Второй лучший способ научиться чему-то - сделать это самому."
От вас жду поддержку видео😌
🔥25👍7❤1
Методы взаимодействия с вкладками браузера и синхронизации между ними
В случаях когда у нас открыто две вкладки одного и того же сайта, нам важно чтобы был обмен данными. Или бывает нужно отслеживать состояние вкладок для применения какой-то логики.
Local Storage:
Сохранение темы интерфейса (светлая/темная) в одной вкладке, а другая вкладка читает эту настройку, чтобы применить ту же тему.
Если мы поменяем тему в одной вкладке то она поменяется и в другой
Broadcast Channel API:
Оповещение всех вкладок о событиях, например, о выходе пользователя из системы.
Отправка сообщения 'logout' через канал и все вкладки, подписанные на этот канал, получают уведомление.
Window.postMessage():
Безопасный обмен данными между вкладками.
Вкладка отправляет сообщение другой вкладке, которая принимает и обрабатывает это сообщение.
События фокуса и блюра:
Отслеживание активности вкладок для управления контентом.
Пауза видео при потере фокуса вкладкой и возобновление воспроизведения при возврате фокуса
Visibility API:
Управление активностью вкладки в зависимости от ее видимости.
Приостановка обновлений на вкладке, когда она не видна
Shared Worker:
Совместное использование ресурсов и синхронизация действий между вкладками.
Обмен данными о новых сообщениях в чате через общего воркера
#обучающийПост #JavaScript #browser #event
В случаях когда у нас открыто две вкладки одного и того же сайта, нам важно чтобы был обмен данными. Или бывает нужно отслеживать состояние вкладок для применения какой-то логики.
Local Storage:
Сохранение темы интерфейса (светлая/темная) в одной вкладке, а другая вкладка читает эту настройку, чтобы применить ту же тему.
Если мы поменяем тему в одной вкладке то она поменяется и в другой
localStorage.setItem('theme', 'dark'); Broadcast Channel API:
Оповещение всех вкладок о событиях, например, о выходе пользователя из системы.
Отправка сообщения 'logout' через канал и все вкладки, подписанные на этот канал, получают уведомление.
const channel = new BroadcastChannel('user_channel'); channel.postMessage('logout'); Window.postMessage():
Безопасный обмен данными между вкладками.
Вкладка отправляет сообщение другой вкладке, которая принимает и обрабатывает это сообщение.
window.opener.postMessage('Hello', '*'); События фокуса и блюра:
Отслеживание активности вкладок для управления контентом.
Пауза видео при потере фокуса вкладкой и возобновление воспроизведения при возврате фокуса
window.addEventListener('blur', pauseVideo);
window.addEventListener('focus', playVideo); Visibility API:
Управление активностью вкладки в зависимости от ее видимости.
Приостановка обновлений на вкладке, когда она не видна
document.addEventListener('visibilitychange', handleVisibilityChange); Shared Worker:
Совместное использование ресурсов и синхронизация действий между вкладками.
Обмен данными о новых сообщениях в чате через общего воркера
new SharedWorker('worker.js'); #обучающийПост #JavaScript #browser #event
👍12🔥2👌2🆒1