• 15 HTML-методов элементов, о которых вы, вероятно, никогда не слышали

      От переводчика: Дэвид Гилбертсон (David Gilbertson) — известный автор, который пишет о веб- и криптовалютных технологиях. Он смог собрать большую аудиторию читателей, которым рассказывает о всяких хитростях и интересностях этих областей.



      Небольшое вступление

      Давайте обсудим разницу между HTML и DOM.

      Например, возьмем элемент table из HTML. Вы можете использовать его в файле с расширением .html. В нем мы указываем набор атрибутов, которые определяют внешний вид и «поведение» страницы.
      Читать дальше →
    • Безопасный OpenVPN на VPS за несколько минут

      Введение


      В связи с последними событиями и возможной блокировкой публичных VPN сервисов созрела идея облегчить жизнь людям и сделать скрипт для быстрой установки OpenVPN со всеми настройками и легким выпуском сертификатов.

      Скрипт позволяет одной командой создать работающий сервер и создать файлы конфигурации для клиентов в unified формате (то есть с сертификатами, включёнными в файл конфигурации). Кстати, эти файлы подходят для мобильных устройств.

      Скрипт создавался для машин с CentOS 7.x или Ubuntu Server 17.x, использование на Ubuntu 16.x. возможно, но там OpenVPN 2.3.x в репозиториях. При необходимости можно добавить другие дистрибутивы, но обычно при покупке VPS можно выбрать систему и это не так важно.
      Читать дальше →
    • Инструкция по обходу блокировки Telegram. Как активировать SOCKS 5

        В телеграм-канале tnews_ru опубликовали инструкцию по обходу возможной блокировки Telegram — популярного мессенджера, разработанного командой Павла Дурова. В статье описывается способ обхода, который основывается на использовании сетевого протокола SOCKS5. Этот протокол незаметно пересылает пакеты данных от клиента к серверу через прокси-сервер.
        Читать дальше →
      • Самые полезные приёмы работы в командной строке Linux

        • Translation
        Каждый, кто пользуется командной строкой Linux, встречался со списками полезных советов. Каждый знает, что повседневные дела вполне можно выполнять эффективнее, да только вот одно лишь это знание, не подкреплённое практикой, никому не приносит пользы.

        Как выглядят типичные трудовые будни системного администратора, который сидит на Linux? Если абстрагироваться от всего, кроме набираемых на клавиатуре команд, то окажется, что команды эти постоянно повторяются. Всё выходит на уровень автоматизма. И, если даже в работе есть что улучшать, привычка противится новому. Как результат, немало времени уходит на то, чтобы делать так, как привычнее, а не так, как быстрее, и, после небольшого периода привыкания – удобнее. Помнить об этом, сознательно вводить в собственную практику новые полезные мелочи – значит профессионально расти и развиваться, значит – экономить время, которое можно много на что потратить.

        image

        Перед вами – небольшой список полезных приёмов работы с командной строкой Linux. С некоторыми из них вы, возможно, уже знакомы, но успели их позабыть. А кое-что вполне может оказаться приятной находкой даже для знатоков. Хочется надеяться, что некоторые из них будут вам полезны и превратятся из «списка» в живые команды, которыми вы будете пользоваться каждый день.
        Читать дальше →
      • Тонкости модульной системы ECMAScript 2015 (ES6)

          Уже около полугода я пишу на ES6 (который в итоге назвали ES-2015) и ES7, с использованием бабеля в качестве транслятора. Писать мне приходилось в основном серверную часть, соответственно, использование модулей было само собой разумеющимся: до ES6 — с помощью модульной системы самой ноды, а теперь — с помощью стандартизированной семантики самого языка. И мне захотелось написать статью, в которой расписать тонкости, плюсы, подводные камни и необычности новообретенной модульной системы языка: отчасти — чтобы другим было проще, отчасти — чтобы разобраться во всём окончательно самому.

          Я разберу, что такое модуль, как происходит экспорт сущностей, как происходит импорт сущностей, чем система модулей ES6 отличается от системы модулей в NodeJS.
          Итак, начнем.
        • Лучшие головоломки, про которые не знает никто*

          *почти

          Бодрый день, дамы и господа. Я наконец решил, что негоже мне сидеть в рид-онли, когда у меня в голове зреет столько полезных и нужных комментариев, и пора получить инвайт. А значит, надо писать пост. О чём? Конечно же, о том, что я люблю и знаю — об играх. Конкретно — о головоломках.

          Огромный недостаток головоломки по сравнения с какими-нибудь ММОРПГ — очень малая реиграбельность. Я всегда думал, что технология стирания памяти в «Вечном сиянии чистого разума» использовалась не по назначению. Вместо того, чтобы изжить из воспоминаний какую-то женщину, не лучше ли забыть своё прохождение любимой игры, а потом пройти её заново? К сожалению, пока что это фантастика. Поэтому всё, что я могу — изнывая от ностальгии, в письменной форме вспоминать все эти прекрасные вещи, вернуться к которым мне, увы, не суждено.

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



            Дмитрий Дудин (xbSoftware)


            Сегодня я вам расскажу про технологию nw.js, большинство слайдов моей презентации будет посвящено ей. Это технология позволяет разрабатывать десктопные приложения и писать их на html, javascript и css. Причем приложение будет кроссплатформенное — под Windows, Linux и Mac. Можно их сбилдить и они будут иметь доступ к графическому интерфейсу системы, т.е. смогут еще работать с менюшками и т.д.
            Читать дальше →
          • JavaScript-тренды, на которые стоит обратить внимание в 2017-м

            • Translation
            image

            Я решил написать этот материал после того, как увидел твит Дэна Абрамова, за который хочу сказать ему огромное спасибо. Дэн задал своим подписчикам вопрос о самых интересных событиях в мире JavaScript, которые достойны внимания широкой общественности.


            Любители JS на вопрос откликнулись, под твитом собралась целая гора ответов. Каждый говорил о том, на что, по его мнению, стоит обратить внимание в 2017-м году. В результате получилась весьма занимательная подборка, из которой я выбрал всё лучшее и добавил пояснения.
            Читать дальше →
          • В Беларуси начались блокировки Tor


              Вкратце, Tor — программное обеспечение для создания анонимного и защищенного от прослушивания подключения. Tor позволяет скрыть ваш серфинг в Интернете от провайдера и получить доступ к заблокированным в вашей стране ресурсам.

              Постановление о блокировке Tor в Беларуси было принято еще в начале 2015-го года.


              11. Государственная инспекция при выявлении интернет-ресурсов, средств обеспечения анонимности (прокси-серверы, анонимные сети типа Tor и другие), позволяющих пользователям интернет-услуг получать доступ к интернет-ресурсам, идентификаторы которых включены в список ограниченного доступа, добавляет в список ограниченного доступа идентификаторы этих
              интернет-ресурсов, средств обеспечения анонимности.
              ...
              Читать дальше →
            • ZeroNet — По настоящему распределенная сеть: Социальная сеть,Wiki движок (изменения за полгода)



                Кто о чем а shifttstas о распределенных сетях Прошёл почти год, с последнего обзора сети ZeroNet, за это время в сети произошло много интересного.

                В этом выпуске:

                • Какие изменения были в ядре
                • ZeroWiki — распределенная википедия
                • Распределенная соц-сеть (больше похожа на твиттер, но без ограничения символов)
                • Локализация+русификация и пусть никто не уйдёт обиженным
                • Сборки сети для удобной установки в один клик
                • Что не хватает сети?
                • Что будет дальше

                Читать дальше →
              • $mol: reactive micromodular ui-framework

                  Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?


                  Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
                  Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
                  Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

                  Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?


                  ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
                  Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
                  Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
                  Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

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


                  Синхронная параллельная загрузка ресурсов


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


                  Читать дальше →
                • Обзор базовых возможностей ES6

                  • Translation

                  JavaScript сильно изменился за последние годы. Вот 12 новых возможностей, которые можно начать использовать уже сегодня!


                  История


                  Новые добавления в язык называются ECMAScript 6. Или ES6 или ES2015+.


                  С момента появления в 1995, JavaScript развивался медленно. Новые возможности добавлялись каждые несколько лет. ECMAScript появился в 1997, его целью было направить развитие JavaScript в нужное русло. Выходили новые версии – ES3, ES5, ES6 и так далее.



                  Как видите, между версиями ES3, ES5 и ES6 есть пропуски длиной в 10 и 6 лет. Новая модель – делать маленькие изменения каждый год. Вместо того, чтобы накопить огромное количество изменений и выпустить их все за раз, как это было с ES6.

                  Читать дальше →
                • JavaScript 2016, а можно попроще?

                  • Tutorial

                  Последние полгода много пишут о неоправданной сложности клиентского JavaScript. Недавняя статья How it feels to learn JavaScript in 2016 и ее перевод на хабре вызвали много внимания, критика во многом справедливая, но...


                  Усложнять просто, упрощать сложно. (Один из законов Мерфи)


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


                  Как пример используется приложение для работы с коллекцией фильмов. Фильмы отображаются в списке с постраничной выборкой, поиском, сортировкой, редактированием и удалением.


                  Использованный стек: create-react-app как сборщик для клиента, React, bootstrap, API с json-server или json-заглушки.



                  Работающее демо здесь: Movies List.

                  Читать дальше →
                • Еще раз про обещания

                  Про обещания (promises) уже много написано. Эта статья — просто попытка собрать наиболее необходимые на практике приемы использования обещаний с достаточно подробными пояснениями того, как это работает.


                  Общие сведения об обещаниях


                  Сначала несколько определений.


                  Обещания (promises) — это объекты, позволяющие упорядочить выполнение асинхронных вызовов.


                  Асинхронный вызов — это вызов функции, при котором выполнение основного потока кода не дожидается завершения вызова. Например, выполнение http-запроса не прерывает выполнение основного потока. То есть выполняется запрос, и сразу, не дожидаясь его завершения, выполняется код следующий за этим вызовом, а результат http-запроса обрабатывается после его завершения функцией обратного вызова (callback-функцией).


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


                  Читать дальше →
                • JavaScript Performance, базы данных и поиски «серебряной пули»: видеозаписи ТОП-5 докладов HolyJS 2016

                    Меньше трех месяцев прошло с HolyJS 2016 Piter, шутка ли, даже лето еще не кончилось, а доклады с конференции уже лежат в открытом доступе. Под катом вы найдете 5 лучших докладов, куда вошли как хардкорные вещи о JS-компиляторах, так и «антихипстерский» soft talk о трудностях выбора инструмента JS-разработчиком.




                    Кроме того, появились трое новых докладчиков в программе HolyJS 2016 Moscow.

                    Читать дальше →
                  • Как по маслу, или анимируем со скоростью 60 FPS на CSS 3

                    • Translation
                    • Tutorial

                    Изображения и текст принадлежат их авторам.


                    Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.


                    Сегодня кто только не использует CSS 3 анимацию в своих проектах, тем не менее не только лишь все, но мало кто может делать это правильно. Даже описаны так называемые «лучшие практики», но люди продолжают делать всё по-своему. Скорее всего потому, что просто не понимают, почему всё устроено именно так, а не иначе.


                    Читать дальше →
                  • 20+ Моих любимых AngularJS помощников

                    В этой статье я решил собрать более чем 20 AngularJS инструментов, которые ежедневно облегчают мой процесс разработки на AngularJS вот уже на протяжении нескольких лет. Когда я перешел с чистого JavaScript на AngularJS, я хотел быть в курсе всех новинок AngularJS и для этого я сделал исследование. Для меня было очень важно быть на правильном пути. По моему опыту когда ты знаешь и пользуешься всеми новинками то освоение этого JS фреймворка идёт быстрее. После всего этого исследования на протяжении двух лет я успел попробовать следующие инструменты. Здесь вы найдете инструменты для тестирования, front-end разработки, IDE, текстовые редакторы, библиотеки, модули, расширения, генераторы кода, Grid-инструменты и другое.

                    Перейдем к списку.

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

                    1. Karma

                    image

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


                      Мысли Криса Койера


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

                      От переводчика


                      Всем привет, с вами Максим Иванов, и сегодня мы поговорим на довольно острую тему в сфере веб-разработки. Как утверждает Крис Койер, frontend-разработчик должен разбираться в очень многих вещах, о которых не все даже и задумываются. Конечно, мы должны понимать, что frontend-разработчик не главный в процессе разработки любого онлайн-сервиса или ПО в целом. На ту же позицию frontend-разработчика вы найдете больше откликов на вакансию, чем на позицию backend-разработчиком. Но почему же тогда Крис Койер считает, что работать frontend-разработчиком сложнее, ибо ты должен специализироваться во всем. Конечно, ситуаций в жизни очень много, разные компании по-разному используют своих специалистов, но в чем наверняка должен разбираться frontend-разработчик? Об этом мы сегодня и поговорим. Жду комментариев на эту тему, а сейчас приступим.
                      Читать дальше →
                    • ES6 по-человечески

                      От переводчика:
                      Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по ES6. В нём можно ознакомиться с основными понятиями стандарта.
                      Оригинальный текст в некоторых случаях был дополнен или заменён на более подходящий источник. Например, часть определения ключевого слова const является переводом документации с MDN.
                      Чтобы лучше разобраться в некоторых концепциях (для выполнения качественного перевода) использовалось описание стандарта на сайте MDN, руководство "You Don't Know JS: ES6 & Beyond" и учебник Ильи Кантора.


                      Перевод выложил на Гитхаб: https://github.com/etnolover/ES6-for-humans-translation. В случае нахождения ошибок пишите, исправлю.
                      Ссылка на оригинальный текст: https://github.com/metagrover/ES6-for-humans


                      Update 22.07.2016: добавил опрос про const


                      Содержание



                      Читать дальше →
                    • Собираем ваш первый WebAssembly-компонент

                      • Translation
                      Когда я впервые услышал о технологии WebAssembly — она сразу показалось мне крутой вещью и мне сразу захотелось попробовать её в деле. От первого желания, до чего-то работающего мне, однако, пришлось потратить немало времени и порой испытать кое-какие разочарования. Для того, чтобы сохранить ваше время и ваши нервы, если вам захочется повторить тот же путь, и написана данная статья.

                      image
                      Предупреждение читателю

                      Эта статья написана 24-го июня 2016-го года. Поскольку WebAssembly очень молодая и динамично развивающаяся технология, со временем многие описанные в данной статье вещи устареют или полностью изменятся — учитывайте это.

                      А теперь поехали.

                      Что такое WebAssembly?

                      Официальная документация говорит следующее: «WebAssembly или wasm это новый портабельный, эффективный по размеру и скорости загрузки формат компиляции для веба». Эм-м-м-м… Что? Формат чего? Текстовый или бинарный? Да, это откровенно плохое описание. Так что убирайте уже ваши баззворд-бинго карточки и я, на основе моего опыта, дам своё определение:

                      «WebAssembly или wasm это спецификация байткода для написания производительных, браузеро-независимых компонентов для веба». Это определение, тоже, конечно, не вершина эпистолярного жанра, но я попробую его дополнить. WebAssembly позволяет повысить производительность с помощью использования статически типизированных переменных, которые обходятся на рантайме значительно дешевле динамических. WebAssembly разрабатывается W3C Community Group и планируется быть внедрённым во все основные браузеры. И с этого момента на стол выкладывается киллер-фича: вы сможете писать код веб-компонентов на любом языке программирования.

                      Теперь звучит лучше, неправда ли?
                      Читать дальше →