Рубрика «webdev»

Я занимаюсь разработкой фронтенда. Мне часто приходится слышать такой вопрос: «Надо ли мне изучить дизайн для того, чтобы стать фронтенд-разработчиком?».

Прежде чем я отвечу на этот вопрос — мне хотелось бы, чтобы читатели, которые тоже им задаются, понимали, что во многих компаниях есть собственные UX/UI-дизайнеры. Они рисуют интерфейсы, делают макеты, а программисты при этом занимаются исключительно своим делом. Задача программистов заключается в том, чтобы вдохнуть жизнь в макет страницы, сделать его интерактивным.

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

Фронтенд-разработчику: 7 основных принципов дизайна - 1

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

Здесь я собираюсь рассказать о 7 основных принципах дизайна, следование которым позволит вам создавать привлекательные интерфейсы и приложения.
Читать полностью »

Перевод статьи подготовлен специально для студентов курса «Python Web-Developer».


Вы запускаете тесты командой manage.py test, но знаете ли вы, что происходит под капотом при этом? Как работает исполнитель тестов (test runner) и как он расставляет точки, E и F на экране?

Читать полностью »

Картинка, которая одновременно является кодом на Javascript - 1

Изображения обычно хранятся как двоичные файлы, а файл Javascript по сути является обычным текстом. Оба типа файлов должны следовать собственным правилам: изображения имеют конкретный формат файла, определённым образом кодирующий данные. Для того, чтобы файлы Javascript можно было исполнять, они должны следовать определённому синтаксису. Я задался вопросом: можно ли создать файл изображения, одновременно являющийся допустимым синтаксисом Javascript, чтобы его можно было исполнять?

Прежде чем вы продолжите чтение, крайне рекомендую изучить эту песочницу кода с результатами моих экспериментов:

https://codesandbox.io/s/executable-gif-8yq0j?file=/index.html

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

https://executable-gif.glitch.me/image.gif
Читать полностью »

image

Я разрабатываю «Google Alerts» для сервиса GitSpo. Я не понял, что это точно такое, но сервис развивается быстро и людям он нравится. Большой частью GitSpo является сбор данных с различных социальных сетей: Twitter, LinkedIn и Stack Overflow. Я обратил внимание на одну вещь: Stack Overflow использует сервис Gravatar для аватарок в пользовательских профилях.
Читать полностью »

Массивы являются одной из самых популярных структур данных в JavaScript, потому что они используются для хранения данных. Кроме этого, массивы дают много возможностей для работы с этими самыми данными. Понимая, что для тех, кто находится в начале пути изучения JavaScript, массивы являются одной из самых основных тем, в этой статье я хотел бы познакомить вас с некоторыми полезными трюками, о которых вы могли не знать. Давайте начнем. Читать полностью »

Существует небольшая, но довольно важная разница между функцией, которая просто возвращает промис, и функцией, которая была объявлена с помощью ключевого слова async.

Взгляните на следующий фрагмент кода: Читать полностью »

image

Отличие между успешным использованием CSS и мучительными попытками справиться с ним, зачастую зависит от мелких деталей. На самом деле, в CSS очень много нюансов. Одна из наиболее часто встречающихся областей, где я часто замечаю такую борьбу — это стилизация макетов. Лично мне нравится изучать CSS-паттерны. Я заметил, что склонен использовать небольшое их количество для решения большинства проблем с макетом. Эта статья про те CSS-паттерны, которые я использую для преодоления проблем в вёрстке. Ситуации будут рассматриваться независимо от используемой CSS-методологии: будь то SMACSS, BEM или даже горячая тема CSS-in-JS, потому что все они сфокусированы на самих CSS-свойствах, а не на архитектуре, организации или стратегии.
Читать полностью »

Вот так не успеешь обернуться, а месяц уже стремится к своему завершению. Считанные дни остаются до запуска нового потока по курсу «Разработчик JavaScript», по традиции перед запуском курса делимся с вами переводом полезного материала.

Vanilla JavaScript не типизирован по своей натуре. Можно даже назвать его «умным», поскольку он способен вычислить, что является числом, а что строкой.

Это упрощает запуск JavaScript кода в браузере или при работе Node.js. Однако он уязвим для многочисленных ошибок во время исполнения (рантайм), которые могут испортить ваш пользовательский опыт использования.

Как система типов улучшает ваш код на JavaScript - 1

Если с вами когда-либо случалось то, что будет описано далее, то вы только выиграете, если будете применять систему типов.
Читать полностью »

Лень — двигатель прогресса или мой вариант создания окружения для веб разработки на основе VirtualBox

Всем веб-разработчикам так или иначе нужен какой-то сервер для разработки своих веб-приложений. Кто-то использует «Денвер», кто-то OpenServer, более продвинутые берут виртуальный сервер (VPS), а еще более продвинутые используют Vagrant, а кто-то просто ленивый. Под катом я расскажу, как разворачиваю веб-приложение для разработки с помощью VirtualBox, баша и кой-каких костылей. Для тех, кто ленив и не хочет смотреть под кат: описан один баш-сценарий, который монтирует расшареные папки в гостевую ОС и полу-демон, который запускает первый сценарий после запуска перед остановкой системы и реализует интерфейс демона.
Читать полностью »

Это вторая статья в серии, где я описываю свой опыт написания веб-приложения на Python с использованием микрофреймворка Flask.

Цель данного руководства — разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog.

Оглавление

Часть 1: Привет, Мир!
Часть 2: Шаблоны (эта статья)
Часть 3: Формы
Часть 4: База данных
Часть 5: Вход пользователей
Часть 6: Страница профиля и аватары
Часть 7: Unit-тестирование
Часть 8: Подписчики, контакты и друзья
Часть 9: Пагинация
Часть 10: Полнотекстовый поиск
Часть 11: Поддержка e-mail
Часть 12: Реконструкция
Часть 13: Дата и время
Часть 14: I18n and L10n
Часть 15: Ajax
Часть 16: Отладка, тестирование и профилирование
Часть 17: Развертывание на Linux (даже на Raspberry Pi!)
Часть 18: Развертывание на Heroku Cloud

Краткое повторение

Если вы следовали инструкциям в первой части, то у вас должно быть полностью работающее, но еще очень простое приложение с такой файловой структурой:

microblog
  flask
    <файлы виртуального окружения>
  app
    static
    templates
    __init__.py
    views.py
    tmp
    run.py

Для запуска приложения вы запускаете скрипт run.py, затем открываете url http://localhost:5000 в вашем браузере.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js