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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
#todo Подписаться на 3 друзей в Github
👍2🔥2
Что такое GraphQL?

Примерно полгода назад, когда я активно искала новую компанию и проходила много собеседований, мне на каждом (и я не шучу) попадался этот вопрос. Спрашивала у Юры, он сказал, что у него это спрашивали через раз. Я никогда специально не изучала этот вопрос, но на моем старом проекте был очень крутой тимлид, который однажды предложил попробовать перейти на GraphQL, потому что это было бы отличным решением наших проблем на том проекте. Он показал документацию, как оно все работает и я в общих чертах поняла, что это собой представляет, поэтому знала, что ответить на собеседованиях. Если что, мы так и не использовали GraphQL.

Так вот, GraphQL - это язык запросов для API для получения данных. Это альтернатива REST API. Он позволяет клиенту точно указать, какие данные ему нужны. То есть, когда вы кидаете запрос, вы можете точно указать, что вы хотите получить. Например, на том проекте, о котором я говорила раньше, мне приходила кучу ненужных и сложных данных. Если бы мы юзали GraphQL, я бы могла просто точно указать, что мне нужно.

Если разбираться на покемонах, то на главной странице вам нужна только картинка и имя покемона. При запросе вы это указываете. А вот когда вы на персональной страницы покемона, тогда вам нужно сделать запрос, в котором вы будет указывать все детали.

Нашла вам хорошую статью, где вы сможете поподробнее почитать о GraphQL. Залетайте.

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

#interview #собеседование
👍32
2🔥2👍1
#todo Найти и скачать себе полезную книгу по программированию (можно отсюда)
👍2🤩2
Всем привет, Юра на связи.

Уже многим известно, что сейчас у меня есть активный проект на Svelte. Лично мое мнение о фреймворке я уже описывал выше, и пока что, оно не изменилось.

Также некие источники говорят, что Svelte один из самых любимых фреймворков для разработчиков за 2021 год. Так что, вроде, как популярность он набирает и возможно совсем скоро самый большой минус (по моему мнению) будет устранен.

Интересно еще то, что создатель Svelte - Rich Harris присоединился к Vercel (компания-создатель Next.js) чтобы “делать web”. Так что есть большие шансы, что скоро увидим еще что-то интересное.

Все же, на данный момент, React остается топ-1 инструментом для создания web-приложений, так что, я думаю, среди нас тут немало тех, кто с ним знаком. И сегодня я хочу чтобы вы использовали свои знания для того чтобы понять Svelte-код. На Medium вышла статья (только первая часть), в которой автор показал главные концепты React и их реализацию в Svelte. Как по мне, то получилось довольно информативно и понятно.

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

Для тех, кто хочет попробовать Svelte - Svelte Tutorial

#article #статья
🔥32
Пятница, конец недели, скоро отдых. Уже появляются люди, которые сдались и первыми убирают елку. Еще кто-то доедает последнюю тарелку оливье, другие строят планы, садятся на диету, начинают писать на своем уже чистом листе.

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

Так как в веб-разработке без javascript никуда, придется ставить себе на компьютер node. На официальном сайте две красивых кнопки - скачать LTS версию либо последнюю (ну-ка напишите в коменты разницу между ними).

И тут я посоветую вам не спешить и поставить себе уже не новую, но полезную утилиту nvm, что в переводе - менеджер версий node. Очень простая установка и использование, любая версия nodejs в любое время.

Также дам ответ на вопрос зачем:
- в случае обновления все происходит очень просто;
- бывает такое, что к вам попадает проект на старой версии node, а еще хуже, у вас одновременно будет два или больше проектов на разных версиях.

Репозиторий nvm
Репозиторий nvm для Windows (да да, для вас отдельная)

#tips #советы
👍21🔥1🤩1
ГРАМОТНОСТЬ - ЭТО ОЧЕНЬ ВАЖНО.

Да, это пишу я, которая может в одном предложении сделать больше ошибок, чем само предложение.

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

Поэтому мы с Юрой всегда ставим расширения для проверки орфографии. Ловите:

Для VS Code - открыть ссылку
Для Chrome - открыть ссылку

#tips #советы
👍42🤩1
Можно ли мутировать объект?

Поговорим немного о мутациях. Не о черепашках ниндзя, а о мутациях объектов в JS. Сам язык дает нам довольно много возможностей, одна из них - работа с объектами через ссылки на них. Ребята, которые работали на C++, немного больше понимают как это работает, но это сейчас не главное. Имея ссылку, мы можем делать почти все что угодно с данными, и главный вопрос - стоит ли перестать мутировать объекты, чтобы обезопасить себя от неожиданных “мутантов”?

Ниже я дам еще ссылку на статью, где вы сможете почитать о разных мнениях, но пока ловите мое.

Скорее всего вы работаете с библиотекой или фреймворком. Если да - слушайте тех, кто создавал их. Например, в React почти всегда лучше не мутировать данные. Redux также должен получать новый объект стейта (о Redux Toolkit читайте выше). А Svelte, например, будет ререндерить компоненту после нового присваивания и иногда можно увидеть такую интересную конструкцию:
someObject = someObject

Если хотите мутировать что-то, убедитесь, что данные локальные. Не мутируйте параметр функции, если уже надо что-то поменять - возвращайте новый объект, как результат функции.

Тут можете почитать статью, НО почитайте заодно и комментарии к ней. Статья только для того, чтобы было еще над чем подумать.

Читать статью
Читать вопрос к статье

#interview #собеседование
👍3🔥21
Что из следующего НЕ является допустимой единицей длины CSS?
Anonymous Quiz
39%
dm
25%
cm
11%
em
26%
mm
😱5🔥4👍3👏1🤯1
#todo Проголосовать за следующий полезный ответ на StackOverflow
👍21🥰1
Formik

На прошлой недели очень много работала с формами. И если бы не Formik - работала б до сих пор.

Formik - это библиотека, которая позволяет легко создавать формы в React.

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

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

Formik - это не единственная хорошая библиотека для форм. Поэтому будет интересно узнать, а как вы обрабатываете формы ⬇️

Читать документацию

#library
🤔2🤩2
На днях мне пришел емейл о том что Serverless Framework запустил бету 3 версии. З самим serverless я познакомился больше года назад, и потом надолго забыл о нем. Так вот, что такое этот Serverless и с чем его едят?

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

Serverless’у от вас нужен только код, набор функций, которые запускать на определенные запросы. И не нужно играть с всякими настройками сервера. Такой сервис дают вам все тех-гиганты (Amazon, Google, Microsoft). Пример - Firebase (о котором мы писали раньше) Cloud Functions - представитель serverless.

Еще коротко о том, что это такое можно посмотреть по ссылке ниже ⬇️
Также можете почитать, что такое Serverless Framework

Смотреть видео
Открыть сайт

#article #статья
🔥3👍2
Всем привет!

Сегодня понедельник - самый тяжелый день недели (ну для нас уж точно). Поэтому мы решили вас особо не напрягать (и самим не напрягаться :) ) и кинуть экстеншн с котиками для VS Code 😼

Ловите - https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

Хорошей и продуктивной вам недели 💛
7
Привет! Сегодня разберём вопрос, который, я лично, не понимаю, почему так любят на собеседованиях. И это - какая разница между call и apply?

Начнем с того, что же это такое. Как мы все знаем, в JavaScript функция тоже является объектом – объектом Function и тоже имеет прототип, свойства, методы, в том числе мощные методы call() и apply(). Эти методы позволяют вызывать функцию так, будто она является методом некоторого объекта. Первый аргумент методов call() и apply() – это объект, для которого выполняется функция. Этот аргумент становится значением ключевого слова this в теле функции.

Так какая же у них разница? Единственная разница между call и apply заключается в том, что call требует, чтобы аргументы передавались один за другим, а apply принимает аргументы в виде массива.

func.call(context, arg1, arg2, ...);
func.apply(context, [arg1, arg2, ...]);

Вот и все!)

Подробнее о данных методах можете почитать здесь - читать статью .

#interview #собеседование
👍6😱21