Обновить
512K+

JavaScript *

Прототипно-ориентированный язык программирования

253,92
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Создаем CRUD API на Express и MySQL: часть вторая

Время на прочтение7 мин
Охват и читатели8.3K
Всем привет. В преддверии старта курса «Разработчик Node.js», хотим поделиться продолжением материала, который был написан нашим внештатным автором.





Всем еще раз привет. Мы возвращаемся к созданию приложения на Node.js и MySQL для небольшого todo — приложения на Node.js для React. С прошлого раза я немного пересмотрел структуру нашего приложения, и теперь решил добавить дополнительную колонку в базу данных под названием inner_key, которая будет необходима нам для отрисовки уникальных ключей для каждого отдельного дела (в списке повторяющихся элементов React нужен уникальный ключ на каждый элемент для его обработки в Virtual DOM. Если это по прежнему вызывает у вас вопросы, вам стоит изучить эту статью).
Читать дальше →

Что фронтенд разработчики должны знать о бэкенде?

Время на прочтение5 мин
Охват и читатели16K

Подавляющее большинство вещей, которые должны делать фронтенд разработчики, можно сделать не зная ничего о бэкенде кроме API.


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


Ниже представлен краткий список того, о чем должен знать разработчик интерфейсов.

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №405 (2 — 8 марта 2020)

Время на прочтение4 мин
Охват и читатели10K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Обработка изображений ReactJS — NodeJS

Время на прочтение5 мин
Охват и читатели17K
Доброго времени суток.

Разбор полетов провожу на Reactjs (сторона клиента) и Nodejs (сторона сервера).

Недавно в моем маленьком проекте встал вопрос, как легко и просто можно обмениваться изображениями по типу клиент — сервер.

Сегодня мы научимся отправлять бинарные данные (конкретно изображения ) со стороны клиента и обрабатывать их на сервере. Добро пожаловать в под кат.
Читать дальше →

YouTube — Ошибка. Повторите попытку позже. Идентификатор воспроизведения: <...>

Время на прочтение3 мин
Охват и читатели317K


Чуть больше месяца назад стал замечать, что почти каждая попытка посмотреть видео с YouTube на десктопном компьютере начинается с сообщения об ошибке.

В этом нет ничего фатального, так как видео все же начинает воспроизводится после одного-двух-трех обновлений страницы. По факту, можно и вообще ничего не делать, так как ошибка пропадает «сама собой» через некоторое время. Достаточно просто немного подождать и видео начнет воспроизводиться самостоятельно.

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

Под катом — причина возникновения ошибки (для тех, кому лень читать, это AdBlock), и что с этим можно сделать. Конечно, кроме отключения самого блокировщика рекламы.
Читать дальше →

Как «взломать» RedBull

Время на прочтение4 мин
Охват и читатели12K
На самом деле правильнее назвать статью «как накрутить себе баллы в конкурсе, чтобы выиграть целый холодильник RedBull». У нас, кстати, в офисе уже стоит такой холодильник с напитками.



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

Настало ли время покинуть виртуальный дом [React'a]?

Время на прочтение4 мин
Охват и читатели11K
Аудио версия на русском (яндекс.музыка) / iTunes

Разберём что не так с фреймворками как подходом и каким может быть следующий этап развития фронтенд архитектуры.

Картинка в посте, смысловой нагрузки не несёт
Читать дальше →

Создаем свою CRUD API на Express и MySQL: часть первая

Время на прочтение6 мин
Охват и читатели33K
Всем привет. В преддверии старта курса «Fullstack разработчик JavaScript», хотим поделиться небольшим материалом, который был написан нашим внештатным автором.



Express один из самых популярных веб-фреймворков, который поддерживает роутинг, миддлвейрс и систему шаблонов. Делать бэкенд на Node.js без Express в 2020 году — довольно странное занятие, ведь Express де-факто — каркас для создания веб-приложения на Node.js.
Сегодня мы попробуем создать несложное CRUD API используя базу данных MySQL. Опытный в Node.js читатель спросит, а где же MongoDB, с которым Node.js обычно применятся в паре но, скажу сразу, это статья больше для PHP разработчиков, которые хотят немного потрогать Node.js, и чтобы смягчить переход в новую экосистему мы воспользуемся MySQL. API мы будем создавать для несложного Todo приложения, на тот случай, если кто-то захочет к своей todo (и даже неважно, написанной с помощью React или нет), присоединить немного бэка и поиграть с ним.
Читать дальше →

Уйти от jQuery к Svelte, как это было

Время на прочтение7 мин
Охват и читатели6.3K
Всем привет.

Это отчёт в продолжение статьи "Уйти от jQuery к Svelte, без боли".

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

Введение


Я планировал переписывать фронтэнд по кусочкам, это не то что бы совсем не получилось, получилось не совсем — переписывать пришлось большими кусками.

Во первых потому что подход jQuery — императивный, подход Svelte — декларативный.

Во вторых потому, что с использованием jQuery у нас область видимости всегда глобальная, из любой строчки кода нам доступны все элементы веб-страницы, мы к ним обращаемся по ID или CSS селектору, в то время как Svelte рекомендует использование компонентов и внутри компонента мы видим только сам компонент, ни внешних элементов ни внутренних у нас нет, и мы не имеем возможности обратиться к ним напрямую.

Со Svelte получается настоящее ООП: мы не можем внести изменения сами, мы можем только сообщить компоненту о необходимости изменений. Как эти изменения будут сделаны, знает только код внутри компонента.

И это прекрасно :)
Читать дальше →

5 малоизвестных возможностей JSON.stringify()

Время на прочтение4 мин
Охват и читатели37K


Доброго времени суток, друзья!

В этой небольшой заметке я хочу рассказать вам о некоторых редко используемых возможностях JSON.stringify(). Возможно, они окажутся вам полезными.

JSON.stringify() часто используется при отладке для преобразования объекта или обычной строки в строку в формате JSON. Но как данный метод используется, и можем ли мы обойтись toString()? Давайте попробуем это сделать.

// создаем объект user
const user = {
    name: 'Harry Heman',
    age: 29,
    job: 'developer'
}

// преобразуем объект в строку, используя стандартный метод toString(), и выводим результат в консоль
console.log(user.toString()) // [object Object]

[object Object] — это не совсем то, что мы хотели увидеть, не правда ли?

Не спрашивайте, зачем мы вообще используем toString(). Предположим, что нам жизненно необходимо перевести объект в строку.

Теперь попробуем использовать JSON.stringify():

console.log(JSON.stringify(user)) // {"name":"Harry Heman","age":29, "job": "developer"}

Мы сделали это, Карл!

Однако возможности JSON.stringify() этим не исчерпываются.
Читать дальше →

Как потерять всех пользователей вашего телеграм-бота. Краткая инструкция

Время на прочтение2 мин
Охват и читатели13K
Эта поучительная история произошла в прекрасный день 8 декабря 2019 года. В этот день я вспомнил, что телефон, на который заведен наш бот, оформлен на участливую продавщицу из Евросети и, в случае чего, в одночасье исчезнет за невозможностью его восстановить и утащит с собой в небытие наш бот.

Нужно было в похвальном упреждающем режиме перебросить бот на другой телефон.
Прогнав удаление тестового бота в одном аккаунте и мгновенную регистрацию в другом, мы убедились, что все работает как ожидается и повторили процедуру на боевом. Вот как это выглядело:
Читать дальше →

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 3

Время на прочтение20 мин
Охват и читатели16K


Как и обещал продолжаем.


В этой части:


  • создадим блоки товаров "С этим товаром также покупают" и "Интересные товары"
  • создадим иконку корзины с количеством товаров
  • подключим модальное окно с товарами в корзине
  • перепишем всю логику store
Читать дальше →

История о том, как я разработал язык программирования

Время на прочтение10 мин
Охват и читатели15K

Привет Хабр! Меня зовут Ильдар. Мне 29 лет. Программирую с 2003 года. За свою жизнь создал 4 фреймворка и язык программирования. В этом посте я поделюсь своим опытом, инсайтами, которые я получил при разработке языка программирования BAYRELL Language. Заранее прощу прощения за возможные синтаксические и пунктуационные ошибки в тексте и отсутствие картинок.

Читать дальше →

Ближайшие события

Как Амплифер использует Logux — инструмент для связи клиента и сервера

Время на прочтение10 мин
Охват и читатели6.2K

Logux — инструмент для связи клиента и сервера


Меня зовут Виталий Ризо, я старший фронтенд-разработчик в «Амплифере». Поделюсь, как мы применяем Logux в веб-приложении: организуем обмен данными в реальном времени, уведомления об ошибках без перезагрузки страницы, общение между вкладками браузера и интеграцию с Redux.

Читать дальше →

Проекция контента в Angular или затерянная документация по ng-content

Время на прочтение5 мин
Охват и читатели51K
При изучении Angular очень часто упускают или уделяют недостаточное внимание такому понятию, как проекция контента. Это очень мощный инструмент для создания гибких и переиспользуемых компонентов. Но в документации о нем упоминается лишь пару абзацев в разделе Lifecycle hooks. Попробуем исправить данное упущение.


Читать дальше →

Асинхронное программирование с async/await

Время на прочтение9 мин
Охват и читатели33K
Доброго времени суток, друзья!

Сравнительно новыми дополнениями JavaScript являются асинхронные функции и ключевое слово await. Эти возможности в основном являются синтаксическим сахаром над обещаниями (промисами), облегчая написание и чтение асинхронного кода. Они делают асинхронный код похожим на синхронный. Данная статья поможет вам разобраться, что к чему.

Условия: базовая компьютерная грамотность, знание основ JS, понимание азов асинхронного кода и обещаний.
Цель: понять, как устроены обещания, и как они используются.
Читать дальше →

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 2

Время на прочтение13 мин
Охват и читатели18K


Первая часть тут


Продолжаем разработку нашего интернет магазина. В этой части будет:


  • нормальная загрузка картинок по статическим адресам
  • генерация хлебных крошек на клиенте
  • страница товара
  • шапка
  • рабочая кнопка купить с синхронизацией товаров между вкладками (и сессиями)
Читать дальше →

$mol: 4 года спустя

Уровень сложностиСредний
Время на прочтение30 мин
Охват и читатели41K

nano


Здравствуйте, меня зовут Дмитрий Карловский и я… люблю плевать против ветра. Утираться и снова плевать. Хобби у меня такое. И всё, что я создаю, делаю я без оглядки на тенденции, стараясь решать проблемы системно, а не как привычно. Зачастую бывает, что основная сложность даже не в том, чтобы придумать решение, а в том, чтобы объяснить другим, что проблема вообще существует.


Знаю, я всех уже заколебал, но сегодня, хотелось быть рассказать про разработанный мной 4 года назад фреймворк, какой путь он прошёл, где он сейчас, и куда прокладывает новые пути. Пройдёмся мы и по конкурентам, и по крупным игрокам, и даже по мне самому. Так что никто не уйдёт не обиженным. Статья, как обычно, длинная. Мужайтесь.

Читать дальше →

JavaScript библиотека Webix глазами новичка. Часть 6. Взаимодействие с сервером

Время на прочтение5 мин
Охват и читатели2.2K


Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix. Я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.
Читать дальше →

Хабр Конвертер: чтобы версталось легко

Время на прочтение3 мин
Охват и читатели14K
Наверняка многие из вас хотя бы однажды пользовались хабраконвертером, который официально рекомендован администрацией Хабра — https://shirixae.github.io/habraconverter-v2/. Несколько лет назад его создал хабравчанин meta4, а потом доработал Shirixae. Принцип простой: открываете гуглодок с постом, Ctrl-A, Ctrl-C и вставляете в окно конвертера. Нажимаете кнопку «Конвертировать» и получаете готовый код вёрстки, который можно вставлять в редактор Хабра и публиковать. Только перед этим нужно пройтись и поправить кое-какие мелочи.

И всё бы хорошо, если верстать приходится не слишком часто. Или посты небольшие, несложные. Но если вы верстаете помногу, и в постах есть и картинки, и таблицы, и куски кода, то из раза в раз приходится делать рутину: вставлять нужные пустые строки и убирать лишние, заменять теги <sоurce> на <cоde>, и т.д. и т.п. Мы решили потратить день, чтобы потом долетать за час, и допилили конвертер.

Новая версия лежит тут, а под катом — перечисление доработок.
Читать дальше →