Web Overflow 🇺🇦

#quiz

Як зробити preview зображень для <input type="file" />?

Завантаженням зображень на веб-сторінках сьогодні нікого не здивуєш. А як показати зображення, ще до того, як воно було оброблене? Адже в нас є тільки файл, а не src у текстовому форматі. Логічно виходить, що нам потрібно перетворити даний файл у текст.

Перший спосіб - URL.createObjectURL.

// Дістанемо файл, наприклад отак:
const file = event.target.files[0]

const url = URL.createObjectURL(file)

// Додамо цей url в src-атрибут для img
img.src = url

Після цього - не забудьте звільнити цей URL за допомогою URL.revokeObjectURL().

Інший спосіб - використати FileReader. Знайти приклади з ним - ваше домашнє завдання 🤓. Лише додамо, що якщо вам потрібно зробити щось таке у service worker - цей метод спрацює, на відміну від першого.

👉 Відкрити документацію URL.createObjectURL
👉 Відкрити документацію FileReader.readAsDataURL

Ну і звісно не без приколів. Стандартний формат зображень на iPhone - HEIF/HEIC, який поки не підтримується більшістю браузерів. Тому, якщо вам необхідно підтримувати і цей формат, зверніть увагу на бібліотеку heic2any.

👉 Відкрити документацію heic2any

#interview

#how_to скопіювати текст в буфер обміну з допомогою JavaScript 📋

👉 Відкрити посилання

Welcome!

Let's practice our English! So...

👉 Dogs or cats?

Have a nice #english_friday 💛

#todo пройти опитування Stack Overflow 2024 Developer Survey.

Насправді це дуже важливо, адже так ми можемо показати, що в Україні є багато класних ІТ-спеціалістів. Минулого року з нашої країни долучилось лише 873 особи, що складає 1% від всіх опитуваних. Цього року потрібно покращити результат!

#quiz

Мусимо вам зізнатись, що...

ми вже дуже давно не були ні на яких співбесідах. Ми знайшли комфортний проєкт і вже більше року з нього не вилазимо. Тому поняття не маємо, що зараз питають і вимагають від кандидатів.

Але дуже добре, що в нашому чаті завжди знайдуться люди, які поділяться своїм досвідом. І ось @Yurets7777 зібрав список питань для співбесіди, які він для себе вивів за період квесту із пошуку роботи. А ми, зі свого боку, сформували їх в окрему статтю, щоб всім було зручно.

Зберігайте і готуйтесь до співбесід якісно. Також можете написати в коментарі питання, які було б цікаво розібрати 💛

👉 Відкрити посилання

#interview

Кристал вкрадений вкрали 💎

Сьогодні в чаті @VladNukem поділився книгою Simplified JavaScript for Very Important Programmers. Власне сам коментар можна знайти отут. Про книгу ми також чули, має бути цікаво, та і видана вона лише в минулому році.

Може це і не дуже добросовісно, але ми все ж таки поділимось PDF-файлом. Але заодно і додаємо посилання на блог автора, можливо, хтось захоче придбати паперовий варіант або ж просто підписатись.

👉 Відкрити посилання

#tips

Welcome!

Let's practice our English! So...

👉 How do you see yourself ten years from now?

Have a nice #english_friday 💛

#quiz

Welcome!

Let's practice our English! So...

👉 If you could return to school, what would you change in your behavior/study?

Have a nice #english_friday 💛

React Compiler 🐌

Вчора React показали новий компілятор для (як не дивно) React. Про це знали вже давно, але ось, нарешті, можна глянути код і, навіть, погратись в пісочниці.

Сам компілятор написаний на Rust. Тож, як мінімум, компілюватись воно має швидко.

👉 Відкрити пост у Twitter

👉 Відкрити playground

Ну і звісно діліться своїми думками щодо такого оновлення ⬇️

#news

#todo написати функцію на будь-якій мові програмування, яка приймає три параметри: сума вкладу (невідʼємне), річна відсоткова ставка (невідʼємне), кількість років (ціле, невідʼємне). Функція має повернути суму, яка буде після завершення строку депозиту.

#quiz

Тут мав би бути пост про нові анонси від OpenAI та про ChatGPT 4o 🤭

Але @Yurets7777 шустро написав про це в чаті.

Тому, якщо хочете взяти участь в обговоренні цих новин - долучайтесь!

Welcome!

Let's practice our English! So...

👉 What did you do with your first salary? What'd you do with it now? 💸

Have a nice #english_friday 💛