Web Overflow 🇺🇦
4.42K subscribers
380 photos
40 videos
3 files
518 links
Затишний блог про веб-розробку і не тільки 💛

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
Personal Portfolios

Ребят, мы на выходных увидели видео с разными персональными портфолио. Теперь мы конкретно этим загорелись! Можно не кидать рекрутерам cv с банальным шаблоном, а уже немного показать на что ты способен в своем сайте о себе.

Оставляем видео с примерами и может вам тоже захочется когда-нибудь создать свой: https://youtu.be/BZqzhmlTkAc

#tips #советы
Ребяяяят, нас тут уже 100+! Это для нас с Юрой большая победа! Спасибо! 💛

И в честь этого мы придумали новую рубрику: interview. В ней мы будем рассматривать часто задаваемые вопросы на собеседованиях.

И так, начнём же прямо сейчас!

Что такое data-* атрибут?

Когда я первый раз услышала этот вопрос на одном из интервью, моей первой мыслю было: «Че?». А это оказывается очень просто: в теге можно создавать свои атрибуты для хранения произвольной информации - это и есть data атрибут. Например:

<p data-user=“Иван Иванов”>Пример</p>

Я их активно использовала до этого. На моем старом проекте был роутинг на беке (да, это плохая практика, но имеем, что имеем) и роут, данные к страницы мне передавались через data атрибуты. Но, что это так обзывается, я до этого интервью не знала :)

#interview #собеседование
А еще немного о фичах, которые можно использовать в JS, можете узнать ниже ⬇️

Читать статью

#article #статья
Привет, ребята. Как там проходят ваши будни?

Я тут работаю над проекте со Svelte фреймворком (о нем поделюсь в другой раз). На днях работал много со стилями и открыл для себя Tailwind. Для меня это шаг вперед в стилизации проекта. Многие уже наверное использовали(ют) его, так что для вас апдейт - только недавно вышла 3 версия фреймворка.

А для тех кто не в курсе о чем я: Tailwind - CSS фреймворк, который сильно поможет вам в работе со стилями, а именно только используя классы, вы сможете наверстать и простилизовать все, что угодно. Это что-то похожее на Bootstrap, но тут все более utility-first (разбито на мелкие части) и много настроек (но прекрасно работает на стандартных).

Из плюсов еще выделю то, что он просканирует вашы html, js файлы и не будет добавлять лишних классов.

Для удобной работы я б еще посоветовал вам поставить их плагин в VSCode, WebStorm или другой ваш редактор.

Открыть документацию

#article #статья
Удивительный факт - если посмотреть в календарь, то можно увидеть не 3 сентября, а то, что скоро Новый Год и праздники. Поздравления будут чуть позже, а пока поделюсь тем, что же я ожидаю от нового 2022.

На самом деле, думаю что громких изменений не будет. Будет так же много облак и контейнеров, используем все те же языки программирования: Python - для данных; Node, Python, Ruby, Java, C# - для бекенда; C, C++ для университета; JS для всего. Мне будет очень интересно посмотреть на Fleet, Github Copilot, появится ли блокчейн и криптовалюта у нас в повседневной жизни.

Но а подробней о том, что такое Web3 и с чем его есть, когда же все таки нас уничтожит ИИ и другое, можете посмотреть по ссылке ниже.

Смотреть видео

#article #статья
Сегодня мы разберем ну прям самый популярный и самый tricky вопрос на собеседованиях - что такое замыкания или closure?

С этим вопросом у меня есть маленькая история. Это было мое первое нормальное интервью. Я очень переживала и штудировала все, что только можно. И когда я дошла до замыканий - я не могла найти нормальное объяснение, которое на 100% мне сможет помочь разобраться. Что же я сделала? Как обычно, я написала Юре (в то время мы были просто друзьями) и моментально он мне ответил: “Ты что, хочешь менять работу?”. Я не хотела признаваться, но все уже и так было понятно. Этот вопрос меня спалил, потому что в обычной практике с ним если и сталкиваешься, то не особо заморачиваешься, как это работает и как это обзывается. Это понятие создано только для собеседований :)

Так вот, замыкание - это когда функция может использовать переменные из функции-оболочки, даже когда эта оболочка закончила выполнение. Использовать можно для того, чтобы скрыть состояние и дать доступ к какой-нибудь работе над ним.

По факту - практика проще теории, поэтому советую еще почитать статью ниже.

Читать статью.

#interview #собеседование
🔥2
Какой pseudo-class вы будете использовать для стилизации ссылок, которые никогда не посещались?
Anonymous Quiz
11%
:hover
26%
:visited
52%
:link
11%
:active
Где искать работу?

Спойлер: тут будут только те инструменты, которые реально помогли нам или нашим друзьям найти хорошую работу.

1. Djinni

“Djinni делает так, чтобы работа сама вас искала”, и это точно! Когда мы только зарегистрировались на этом сайте, с первой минуты нам уже начало приходить очееень много предложений. Благодаря ему, мы нашли компанию, в которой сейчас работаем!

Минус: не всегда рекрутеры проверяют информацию о вас и кидают предложения, которые подходят вашему стеку. Поэтому советуем заполнить поле “Вопросы к работодателю”. На них, они иногда смотрят и отвечают. Так вы сможете сразу отсеять компании, которые вам не подходят.

Вот пример наших вопросов: “Гибкий график? Можно работать ремоут?”.

2. Linkedin

Ну тут все понятно. Все знают, все там есть или будем.

Минус (как для поиска работы): мы с Юрой уже давно наблюдаем резкие перепады активности предложений. Мне, например, могут всю неделю никто не писать, а в один день - 5 предложений.

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

3. Старый, добрый и проверенный вариант - друзья.

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

Огромный плюс такого поиска: ваши друзья там работают или работали, и уж точно смогут вам честно рассказать, нужно ли туда соваться.


Если знаете другие инструменты, которые помогли вам устроится на роботу - ⬇️

#experience #опыт
Svelte

Ни для кого не секрет, что в мире фронтенда существует 3 гиганта - React, Angular и Vue.

Не так много времени назад мне выпала возможность поработать на новой технологии, да еще и с нуля. Говоря о Svelte, можно понять что он реально стоит того, чтобы обратить на него внимание. Но все же, он немного не успел занять свое место среди выше перечисленных. За 2 месяца реального проекта на этом фреймворке у меня сложились некоторые впечатления:

- хорошая структура, в одном файле есть все необходимое для компоненты. Чем то напоминает Vue. Может быть страшно когда в файле по миллиону строк, старайтесь разделять все на небольшие компоненты и будет вам счастье.

- по настоящему реактивный - а значит и быстрый. Нету никакого дополнительного DOM, после компиляции все работает напрямую с документом.

- хорошая документация и туториал в рамках работы чисто на Svelte. Чтобы освоится в работе на этом фреймворке мне понадобилось не больше пары дней.

- с помощью SvelteKit можно настроить много функций, например adapter - способ запуска приложения (например через NodeJS), использовать ли SSR в вашем проекте.

- нету супер-большой популярности и как следствие - недостаток библиотек, плагинов. Что использовать для работы с формами, где найти библиотеку компонент - вопросы на которые пока-что трудно ответить. Тот же VSCode не всегда все понимает в Svelte, когда добавляете плагин или, например, фреймворк стилей, не всегда есть официальная документация.

- еще не очень надейтесь найти решения на все проблемы на StackOverflow и других сайтах. С той же проблемой на React можно будет найти в 5 раз больше информации.


Очень рекомендую попробовать этот фреймворк для своих pet-проектов, как минимум получите новый опыт и знания. Для более комплексных проектов, я пока остаюсь на стороне проверенного React.

#experience #опыт
Всем привет! Мы никуда не пропали - у нас просто были выходные!)

Сегодня вторник, поэтому ловите новый, часто задаваемый вопрос на собеседованиях - что такое SOLID?

Впервые я узнала о SOLID в универе перед экзаменом. Это был третий курс, я уже начала работать по специальности, поэтому учеба меня мало волновала. Но диплом нужно было привезти родителям, поэтому я старалась все закрывать хоть как. Так вот: прямо перед сдачей устной компоненты, я открыла лекции с конца и увидела эти пять правил. Я была уверена, что это мне точно не попадется, поэтому не особо их запомнила, тем более они были на английском (тогда я еще не очень с ним дружила). Ну и что же произошло: преподаватель сразу же сказал, я уверен, что до конца лекций мало кто дошел, поэтому расскажи - что такое SOLID. Я начала очень уверенно, но прям с очень плохим английским рассказывать. Позор длился не долго, он меня остановил, проорал, поставил 4 за старание и отпустил. Я ушла и думала, что больше никогда это мне не пригодится. Но через пару месяцев я пыталась поменять работу и на собеседование опять этот вопрос. А потом опять и опять... Тогда я все таки решила, что нужно изучить SOLID и после этого поняла, что их важно знать каждому программисту.

Так вот, SOLID - это аббревиатура пяти основных принципов проектирование в ООП.

Расшифровка:

Single responsibility — принцип единственной ответственности - означает, что каждый объект должен иметь одну обязанность и эта обязанность должна быть полностью инкапсулирована в класс.

Open-closed — принцип открытости / закрытости - декларирует, что программные сущности (классы, модули, функции и т. п.) должны быть открыты для расширения, но закрыты для изменения.

Liskov substitution — принцип подстановки Барбары Лисков - «функции, которые используют базовый тип, должны иметь возможность использовать подтипы базового типа не зная об этом».

Interface segregation — принцип разделения интерфейса - говорит о том, что слишком «толстые» интерфейсы необходимо разделять на более маленькие и специфические.

Dependency inversion — принцип инверсии зависимостей - модули верхних уровней не должны зависеть от модулей нижних уровней, а оба типа модулей должны зависеть от абстракций; сами абстракции не должны зависеть от деталей, а вот детали должны зависеть от абстракций.

Вот как-то так. Всем продуктивной последней рабочей недели в этому году!

#interview #собеседование
Какой файл есть обязательным для компиляции всего TypeScript проекта?
Anonymous Quiz
25%
tsconfig.js
11%
web.config
15%
аpp.json
48%
tsconfig.json
😐1
Ребят, кто еще не видел, вышло новое обновление create-react-app 5.0.

Если вы еще не делали eject, будет довольно просто обновиться на 5 версию. Всё, что нужно поправить - версия react-scripts в package.json. Тут у вас уже будет webpack 5 версии, который скорее всего вам будет нужен, если ваш проект еще собирается жить какое-то время.

Подробнее обо всех изменениях можно узнать тут: читать статью.

#tips #советы
👍3
Ребят, поздравляем вас с наступающим Новым Годом! Желаем побольше интересных проектов, добрых заказчиков и поменьше багов!

Спасибо, что вы с нами! Дальше только лучше 💛
2👍2🎉2🔥1🤩1