Pull to refresh
0
0
Send message

File upload на React.js шаг за шагом

Level of difficultyMedium
Reading time18 min
Views12K

В этой статье напишем компонент для загрузки файлов на сервер, который поддерживает:

Индикатор загрузки

Прерывание отправки

Drag and drop

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

Читать далее
Total votes 13: ↑12 and ↓1+11
Comments5

Не лайтхаусом единым: как проверить свой сайт со всех сторон

Reading time3 min
Views18K


Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.
Читать дальше →
Total votes 35: ↑33 and ↓2+31
Comments4

Inno Setup: создание инсталлятора на примере развертывания C# приложения

Reading time13 min
Views196K

Введение



Я не являюсь профессиональным программистом. В том смысле, что не зарабатываю денег этим ремеслом, а использую свои навыки в качестве инструмента для основной, научной, деятельности. Поэтому все мои «поделки» живут лишь отведенный им на решение конкретной задачи период и не выходят за пределы каталогов проекта. Кроме того, уже довольно давно я отошел от разработки под ОС Windows, ибо Linux для решения моих задач более удобен.

Однако ученым тоже хочется кушать, прилично одеваться и заправлять машину. Поэтому (правда довольно редко) возникает необходимость немного пофрилансить.

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

Созданием инсталляторов я не занимался никогда. Поэтому данный вопрос был основательно «загуглен», в числе прочего попалась и такая статья с Хабра. Выбор средств для подобной задачи довольно широк, и включает как проприетарные, так и открытые продукты. Вот список того, что я «пощупал»

  1. InstallShield — классика жанра, достаточно солидный проприетарный продукт
  2. Adnvanced Installer — проприетарный инструмент с широкими возможностями кастомизации через GUI. На сайте сказано, что если Вы блоггер и будете писать об этом продукте много хороших слов, то у Вас есть возможность получить Free License
  3. WiX — открытый бесплатный продукт, основанный на XML-скриптах. Мощная, хорошо документированная штука. Разбираться с ним я пока не стал, ибо время дорого (да и к XML душа лежит не очень). Возможно когда нибудь я к нему вернусь. Да, к нему есть плагины для Visual Studio, что несомненный плюс.
  4. Inno Setup — опенсорсный проект, код которого доступен на гитхабе. В силу бесплатности и низкого порога вхождения мой выбор остановился именно на нем, как инструменте позволившем выполнить работу быстро и качественно.


Так что в статье мы будем рассматривать пример использования Inno Setup, для которого имеется полезный фронтэнд Inno Script Studio, позволяющий выполнять создание простых инсталляторов с помощью мастера и менять настройки через GUI. GUI понадобился мне для первого знакомства, с продуктом, но мы не будем уделять ему большого внимания — мой «линукс головного мозга» в последнее время всё больше и больше уводит меня от желания использовать разного рода «мастера» (это субъективно, прошу не пинать). Мы рассмотрим хардкорный способ написания скрипта с чистого листа.

Поехали!
Total votes 20: ↑18 and ↓2+16
Comments14

Начинаем работу с Google Sheets на Python. От регистрации до чтения данных

Reading time11 min
Views183K
Довольно долго я обходился выгрузкой данных в Excel, но мода меняется, пользователи хотят в облака.

Начав переводить ряд проектов на Python, решил, что самое время сменить (или дополнить) Excel чем-то более современным.

Когда я впервые столкнулся с необходимостью работы c таблицами Google из Python, то пребывал в иллюзии, что все это можно сделать в пару кликов. Реальность оказалась менее радужной, но другого глобуса у нас нет.

Мне очень помогли статьи:


Как обычно – когда впервые за что-то берешься, то сталкиваешься с массой вопросов, которые потом вызывают лишь недоумение – как можно было об этом вообще задумываться. Элементарно же!

Возможно, я просто шел длинным путем – буду рад, если вы меня поправите.

Все действия выполнялись на компьютере с Windows + Python 3.6.6, также использовался Jupyter Notebook.

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

Код, использованный в статье, доступен в репозитории
Читать дальше →
Total votes 9: ↑9 and ↓0+9
Comments4

Разбор: зачем нужны анимации на сайтах + 7 полезных инструментов и библиотек для их создания

Reading time3 min
Views9.1K


Источник: Dribbble

Анимации в вебе полезны в большом количестве ситуаций. В этом материале мы разберем, зачем конкретно они нужны, и какие инструменты создания анимированных сайтов стоит использовать в 2020 году.
Total votes 11: ↑6 and ↓5+1
Comments20

5 библиотек для Vue.js, без которых мне не обойтись

Reading time10 min
Views31K
Опытные разработчики знают о том, что иногда, пытаясь сэкономить время и решить какие-то задачи своего проекта с помощью пакета, созданного кем-то другим, можно, в итоге, потратить больше времени, чем было сэкономлено. Библиотеки, жёстко регламентирующие реализацию неких механизмов и не позволяющие решать с их помощью необычные задачи, выходящие за рамки того, что кажется правильным их авторам, заставляют нас, буквально сразу же после их установки, жалеть о том, что мы вообще решили их попробовать.



Хотя со мной такое случалось довольно часто, у меня, всё же, есть небольшой список любимых библиотек, которые я использовал во множестве проектов, и которые за долгое время доказали свою крайнюю полезность. Я испытал множество подходов к решению тех задач, которые решают эти библиотеки. На мой выбор повлияло удобство работы с библиотекой, разнообразие её возможностей, хороший внешний вид того, что получается при её применении. В итоге у меня и появился тот список, которым я хочу с вами поделиться.
Читать дальше →
Total votes 45: ↑43 and ↓2+41
Comments26

19 полезных возможностей файла .htaccess

Reading time14 min
Views106K
19 полезных возможностей файла .htaccess


Спорим, о некоторых вы не подозревали. Мы собрали варианты применения .htaccess для улучшения работы сайта. Он часто используется оптимизаторами для корректной настройки 301 редиректов. Но этим возможности файла не ограничиваются. Тут и безопасность, и оптимизация, и параметры отображения — с помощью .htaccess вебмастер может сделать много полезного, чтобы сайт работал корректно.

Читать дальше
Total votes 28: ↑17 and ↓11+6
Comments16

Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы

Reading time3 min
Views16K

Приветствую. Представляю вашему вниманию перевод статьи «Keep the Footer at the Bottom: Flexbox vs. Grid», опубликованной 8 апреля 2020 года автором Stephanie Eckles



Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.


В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

Total votes 8: ↑8 and ↓0+8
Comments12

Lamptest.ru: 5 лет, 3500 ламп, новые возможности

Reading time3 min
Views10K
Пять лет назад стартовал проект Lamptest.ru. За это время я протестировал более 3500 моделей ламп и светильников. Недавно на Lamptest были добавлены новые параметры ламп и ещё кое-что.


Читать дальше →
Total votes 75: ↑75 and ↓0+75
Comments26

Проверка сайта на уязвимости своими силами с использованием Wapiti

Reading time6 min
Views27K

image
В прошлой статье мы рассказали о Nemesida WAF Free — бесплатном инструменте для защиты сайтов и API от хакерских атак, а в этой решили сделать обзор популярного сканера уязвимостей Wapiti.


Сканирование сайта на уязвимости — необходимая мера, которая, вкупе с анализом исходного кода, позволяет оценить уровень его защищенности от угроз компрометации. Выполнить сканирование веб-ресурса можно с помощью специализированно инструментария.


Nikto, W3af (написан на Python 2.7, поддержка которого закончилась) или Arachni (с февраля более не поддерживается) — наиболее популярные решения, представленные в бесплатном сегменте. Разумеется, есть и другие, например, Wapiti, на котором мы решили остановимся.

Читать дальше →
Total votes 10: ↑8 and ↓2+6
Comments2

Как в Sports.ru писали свой WYSIWYG-редактор

Reading time13 min
Views13K
В середине 2018 года в Sports.ru задумались о переезде на новый WYSIWYG-редактор текста для пользовательских постов. С июня 2019 года редактор работает в режиме бета-версии. За это время мы решили множество проблем, связанных как с проектированием архитектуры всего сервиса, так и с реализацией самого редактора в браузере на основе библиотеки ProseMirror, и решили поделиться своим опытом.


Читать дальше →
Total votes 32: ↑31 and ↓1+30
Comments41

Как послать провайдера подальше, и включить DNS по HTTPS в любом браузере

Reading time5 min
Views182K

Поддержка DoH уже встроена во все основные браузеры. Пользователям нужно её только включить и настроить.


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

Этот протокол является одной из самых обсуждаемых тем этого года. Он позволяет браузеру прятать DNS-запросы и ответы внутри обычного на первый взгляд HTTPS-трафика.

Это делает DNS-трафик пользователя невидимым для сторонних наблюдателей за сетью, например, провайдеров. Однако если пользователи обожают DoH и считают его благом для конфиденциальности, провайдеры и производители средств кибербезопасности его ненавидят.

Британский провайдер назвал Mozilla «интернет-злодеем» за планы компании по внедрению DoH, а группу лоббистов от Comcast уличили в подготовке документа касательно DoH, который они планируют представить законотворцам Британии, надеясь предотвратить более широкое распространение протокола.
Читать дальше →
Total votes 68: ↑62 and ↓6+56
Comments219

Как я случайно раскрыла мошенничество национального масштаба на Airbnb

Reading time18 min
Views81K

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




Перевод статьи Элли Конти, журналистки, ранее работавшей в журнале Vice

Звонок раздался минут за 10 до того, как мы планировали заселиться в найденную на Airbnb квартиру. Я сидела в пивной, находившейся прямо за углом от съёмной квартиры на Норт-Вуд стрит в Чикаго, когда звонивший сказал, что запланированный въезд не состоится. Он пояснил, что предыдущий постоялец смыл в туалет что-то не то, и всю квартиру затопило. Он извинился, и пообещал разместить нас в другой его квартире, пока он не вызовет сантехника.

Мы с двумя друзьями прилетели в этот город в надежде расслабиться на хвосте у уходящего лета. Мы купили билеты, чтобы пойти на сентябрьский музыкальный фестиваль Riot Fest, где должны были выступать Blink-182 и Taking Back Sunday. Но путешествие не задалось ещё до этого звонка. Примерно за месяц до этого первый хозяин квартиры с Airbnb уже отменил нашу бронь, и у нас оставалось немного времени на замену. Пытаясь найти что-то ещё, я обнаружила квартиру, выставленную парой, Беки и Эндрю. Да, на фотографиях дом выглядел простеньким, но достаточно милым, особенно учитывая поджимавшее время – он был наполнен светом, просторным, и располагался близко к синей ветке метро.
Читать дальше →
Total votes 107: ↑98 and ↓9+89
Comments161

Puppetry 3: автоматизированное тестирование без единой строки кода

Reading time2 min
Views8.4K
Я думаю, нет смысла убеждать кого-либо в значимости автоматизированного тестирования. Тем не менее, функциональные тесты зачастую крайне сложны в написания и еще более в поддержке. Существует немало решений, призванных упростить разработку тестов. Я хочу рассказать об одном из них — Puppetry. Это настольное приложение (Windows/Linux/Mac), которое по сути является конструктором тестов, не требуя при этом написания какого-либо кода. QA-инженер может просто записать пользовательский сценарий во встроенном браузере, расширить сгенерированные тесты браузерными командами и тестовыми утверждениями, настроить структуру и запустить тесты на выполнение. Puppetry транслирует тестовую спецификацию из удобного для чтения человеком формата (Gherkin) в проект Jest/Puppeteer. Далее он запускает проект и показывает отчет. По сути такой проект может быть включен в цепь непрерывной интеграции «как есть»

Набор тестов

Тестовый отчет

Читать дальше →
Total votes 10: ↑10 and ↓0+10
Comments26

Выбираем проводные внутриканальные наушники бюджетного сегмента

Reading time5 min
Views22K
Поездка на велосипеде в выходной день или долгая дорога в метро по будням? Тренировка перед важными соревнованиями или спокойный вечер в постели? Может быть, утренняя пробежка или бессонная ночь? В современном мире многие люди не могут представить себе свой досуг без верных друзей – наушников.
Читать дальше →
Total votes 19: ↑12 and ↓7+5
Comments15

Parcel — мой любимый сборщик проектов

Reading time7 min
Views22K
Сегодня мы поговорим о сборщиках проектов (о бандлерах), об инструментах, которые облегчают жизнь разработчиков. Суть работы бандлеров заключается в том, что они берут JavaScript-код, содержащийся во множестве файлов, и упаковывают его в один или несколько файлов, определённым образом упорядочивая и подготавливая к работе в браузерах. Более того, благодаря различным подключаемым модулям (плагинам) и загрузчикам, код можно минифицировать, можно упаковывать, помимо кода, и другие ресурсы (вроде CSS-файлов и изображений). Бандлеры позволяют использовать препроцессоры, умеют разделять код на фрагменты, загружающиеся тогда, когда в них возникнет необходимость. Но их возможности этим не ограничиваются. Фактически, речь идёт о том, что они помогают организовывать процесс разработки.

image

Существует множество бандлеров. Например — Browserify и webpack. Хотя эти сборщики проектов представляют собой замечательные инструменты, лично я обнаружил, что их сложно настраивать. С чего начать настройку? Этот вопрос особенно актуален для новичков, для тех, кого может немного испугать такое понятие, как «конфигурационный файл».

Именно поэтому я, как правило, пользуюсь сборщиком проектов Parcel. Я наткнулся на этот бандлер случайно, когда смотрел одно учебное видео на YouTube. Там давались советы по ускорению разработки. Показанная в этом видео рабочая среда была сильно завязана на Parcel. После этого я решил, что и мне стоит попробовать этот бандлер.
Читать дальше →
Total votes 42: ↑40 and ↓2+38
Comments28

5 полезных плагинов для webpack

Reading time5 min
Views21K
Привет, Хабр!

У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!


Читать дальше →
Total votes 31: ↑31 and ↓0+31
Comments5

PHP, YII2 и формирование больших excel-файлов

Reading time3 min
Views14K

Начало


Одна поддерживаемая нашей компанией учетно-отчетная система начала очень быстро разрастаться в количестве хранимых данных. Система написана на PHP с использованием фреймворка Yii2. Изначально отчеты строились через библиотеку PhpSpreadsheet, которая пришла на смену, уже давно ставшему deprecated, PhpExcel.

Среди разного вида отчетности был один очень крупный – фактически полный набор всех хранящихся в БД данных должен выгружаться в одну excel-таблицу. На начальном этапе проблем не возникало, но когда объем стал превышать многие сотни тысяч записей, то скрипт формирования выгрузки стал отваливаться в timeout limit.
Читать дальше →
Total votes 30: ↑27 and ↓3+24
Comments37

Гепатит С: «ласковый убийца»

Reading time4 min
Views34K

Когда мы говорим о тяжёлых инфекционных заболеваниях, приводящих к смерти и подвергающихся наибольшей стигматизации, обычно имеется в виду ВИЧ. Среди других же заболеваний особенно выделяется гепатит C. Большая часть людей, инфицированных вирусом гепатита C, приобретают хроническую инфекцию, протекающую бессимптомно и приводящую к циррозу и раку печени, а впоследствии, соответственно, смерти. Из-за этих своих особенностей гепатит C получил прозвище „ласковый убийца“.


Гепатит C и ВИЧ часто упоминаются вместе, и это не случайность: сегодня они являются наиболее опасными стремительно распространяющимися инфекционными заболеваниями. Оба этих заболевания передаются через контакт крови; однако заражение гепатитом C через половой контакт гораздо менее вероятно.

Читать дальше →
Total votes 59: ↑57 and ↓2+55
Comments37

Делаем таймер обратного отсчета в гугл таблицах

Reading time2 min
Views30K
Если в ожидании нового проекта вам нечем заняться, а под рукой есть только гугл таблицы — можно сделать таймер обратного отсчета, чтобы, например, узнать сколько свободного времени у вас осталось.
Читать дальше →
Total votes 8: ↑6 and ↓2+4
Comments0
1
23 ...

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity