Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 5951 сообщений
Cообщения с меткой

браузеры - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Дайджест свежих материалов из мира фронтенда за последнюю неделю №259 (16 — 23 апреля 2017)

Воскресенье, 23 Апреля 2017 г. 23:33 (ссылка)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.





















Веб-разработка
CSS
Javascript
Браузеры
Занимательное


Веб Разработка





CSS





JavaScripts





Браузеры





Занимательное







Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.





Дайджест за прошлую неделю.

Материал подготовили dersmoll и alekskorovin.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/327200/

Комментарии (0)КомментироватьВ цитатник или сообщество
ermolenko_ludmila

Как очистить кэш браузера

Среда, 19 Апреля 2017 г. 13:14 (ссылка)


ПОЛЕЗНЫЕ СОВЕТЫ



 



Инструкция по очистке кэша в популярных браузерах



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



4877129__1_ (223x52, 2Kb)
Метки:   Комментарии (1)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] Нативные ECMAScript модули — первый обзор

Среда, 19 Апреля 2017 г. 10:45 (ссылка)

Бандлеры и компайлеры против нативных модулей



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



В 2016 году в браузеры и Nodejs было добавлено много интересных фич и полезностей из новых стандартов, в частности спецификации ECMAScript 2015. Сейчас мы сталкиваемся с ситуацией, когда поддержка среди браузеров близка к 100%:



Таблица совместимости EcmaScript 6



Также фактически в стандарт введены ECMAScript модули (часто называют ES/ES6 модули). Это единственная часть спецификации, которая требовала и требует наибольшего времени для реализации, и ни один браузер пока не выпустил их в стабильной версии.



Недавно в Safari 19 Technical Preview и Edge 15 добавили реализацию модулей без использования флагов. Уже близится то время, когда мы можем отказаться от использования привычных всем бандлов и транспиляции модулей.



Чтобы лучше понять, как мир фронтенда пришел к этому, давайте начнем с истории JS модулей, а затем взглянем на текущие преимущества и реализации ES6 модулей.



Немного истории



Было много способов подключения модулей. Приведу для примера наиболее типичные из них:



1. Просто длинный код внутри script тега. Например:







2. Разделение логики между файлами и подключение их с помощью тегов script:

/* js */

// module1.js
// module1 code

// module2.js
// module2 code







3. Модуль как функция (например: модуль функция, которая возвращает что-то; самовызывающаяся функция или функция конструктор) + Application файл/модель, которые будут точкой входа для приложения:



// polyfill-vendor.js
(function(){
// polyfills-vendor code
}());

// module1.js
function module1(params){
// module1 code
return module1;
}

// module3.js
function module3(params){
this.a = params.a;
}

module3.prototype.getA = function(){
return this.a;
};

// app.js
var APP = {};

if(isModule1Needed){
APP.module1 = module1({param1:1});
}

APP.module3 = new module3({a: 42});









Ко всему этому Frontend сообщество изобрело много разновидностей и новых способов, которые добавляли разнообразие в этот праздник анархии.



Основная идея заключается в том, чтобы обеспечить систему, которая позволит вам просто подключить одну ссылку JS файла, вот так:







Но всё свелось к тому, что разработчики выбрали сторону бандлеров — систем сборки кода. Далее предлагается рассмотреть основные реализации модулей в JavaScript.



Асинхронное определение модуля (AMD)



Такой подход широко реализуется в библиотеке RequireJS и в инструментах, таких как r.js для создания результирующего бандла. Общий синтаксис:



// polyfill-vendor.js
define(function () {
// polyfills-vendor code
});

// module1.js
define(function () {
// module1 code
return module1;
});

// module2.js
define(function (params) {
var a = params.a;

function getA(){
return a;
}

return {
getA: getA
}
});

// app.js
define(['PATH/polyfill-vendor'] , function () {
define(['PATH/module1', 'PATH/module2'] , function (module1, module2) {
var APP = {};

if(isModule1Needed){
APP.module1 = module1({param1:1});
}

APP.module2 = new module2({a: 42});
});
});


CommonJS



Это основной формат модулей в Node.js экосистеме. Одним из основных инструментов для создания бандлов для клиентских устройств является Browserify. Особенность этого стандарта — обеспечение отдельной области видимости для каждого модуля. Это позволяет избежать непреднамеренной утечки в глобальную область видимости и глобальных переменных.



Пример:



// polyfill-vendor.js
// polyfills-vendor code

// module1.js
// module1 code
module.exports= module1;

// module2.js
module.exports= function(params){
const a = params.a;

return {
getA: function(){
return a;
}
};
};

// app.js
require('PATH/polyfill-vendor');

const module1 = require('PATH/module1');
const module2 = require('PATH/module2');

const APP = {};

if(isModule1Needed){
APP.module1 = module1({param1:1});
}

APP.module2 = new module2({a: 42});


ECMAScript модули (ака ES6/ES2015/нативные JavaScript модули)



Еще один способ работы с модулями пришел к нам с ES2015. В новом стандарте появился новый синтаксис и особенности, удовлетворяющие потребностям фронтенда, таким как:




  • отдельные области видимости модулей

  • строгий режим по умолчанию

  • циклические зависимости

  • возможность легко разбить код, соблюдая спецификацию



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





Инструменты



На сегодняшний день в JavaScript мы привыкли к использованию различных инструментов для объединения модулей. Если мы говорим о ECMAScript модулях, вы можете использовать один из следующих:





Как правило, инструмент предоставляет CLI интерфейс и возможность настроить конфигурацию для создания бандлов из ваших JS файлов. Он получает точки входа и набор файлов. Обычно такие инструменты автоматически добавляют “use strict”. Некоторые из этих инструментов также умеют транспилировать код, чтобы заставить его работать во всех окружениях, которые необходимо (старые браузеры, Node.js и т.д.).



Давайте посмотрим на упрощенной WebPack конфиг, который устанавливает точку входа и использует Babel для транспиляции JS файлов:



// webpack.config.js
const path = require('path');

module.exports = {
entry: path.resolve('src', 'webpack.entry.js'),
output: {
path: path.resolve('build'),
filename: 'main.js',
publicPath: '/'
},
module: {
loaders: {
"test": /\.js?$/,
"exclude": /node_modules/,
"loader": "babel"
}
}
};


Конфиг состоит из основных частей:


  1. начинаем с файла webpack.entry.js

  2. используем Babel лоудер для всех файлов JS (то есть, код будет транспилироваться в зависимости от пресетов/плагинов + сгенерируется бандл)

  3. Результат помещается в файл main.js



В этом случае, как правило, файл index.html содержит следующее:






И ваше приложение использует бандлы/транспилируемый код JS. Это общий подход для работы с бандлерами, давайте посмотрим, как заставить его работать в браузере без каких-либо бандлов.



Как сделать так, чтобы JavaScript модули работали в браузере



Поддержка Браузеров



На сегодняшний день каждый из современных браузеров имеет поддержку модулей ES6:





Где можно проверить



Как вы видели, в настоящее время можно проверить нативные JS модули в Safari Technology Preview 19+ и EDGE 15 Preview Build 14342+. Давайте скачаем и попробуем модули в действии.



Safari Technology Preview с доступными ES модулями



Если вы используете MacOS, достаточно просто загрузить последнюю версию Safari Technology Preview (TP) с developer.apple.com. Установите и откройте его. Начиная с Safari Technology Preview версии 21+, модули ES включены по умолчанию.



Если это Safari TP 19 или 20, убедитесь, что ES6 модули включены: откройте меню «Develop» -> «Experimental Features» -> «ES6 Modules».



image



Другой вариант — скачать последнюю Webkit Nightly и играться с ним.



EDGE 15 — включаем ES модули



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



Просто выберите виртуальную машину (VM) «Microsoft EDGE на Win 10 Preview (15.XXXXX)» и, например, «Virtual Box» (также бесплатно) в качестве платформы.



Установите и запустите виртуальную машину, далее откройте браузер EDGE.



Зайдите на страницу about:flags и включите флаг «Включить экспериментальные функции JavaScript» (Enable experimental JavaScript features).







Вот и все, теперь у вас есть несколько сред, где вы можете играть с нативной реализацией модулей ECMAScript.



Отличия родных и собранных модулей



Давайте начнем с нативных особенностей модулей:




  1. Каждый модуль имеет собственную область видимости, которая не является глобальной.

  2. Они всегда в строгом режиме, даже когда директива «use strict» не указана.

  3. Модуль может импортировать другие модули с помощью import директивы.

  4. Модуль может экспортироваться с помощью export.



До сих пор мы не увидели особенно серьезные отличия от того, к чему мы привыкли с бандлерами. Большая разница в том, что точка входа должна быть предусмотрена в браузере. Вы должны предоставить script тег с конкретным атрибутом type=«module», например:

  


Это говорит браузеру, что ваш скрипт может содержать импорт других скриптов, и они должны быть соответствующим образом обработаны. Главный вопрос, который появляется здесь:

Почему интерпретатор JavaScript не может определять модули, если файл и так по сути является модулем?


Одна из причин — нативные модули в строгом режиме по умолчанию, а классические script-ы нет:




  1. скажем, интерпретатор анализирует файл, предполагая, что это классический сценарий в нестрогом режиме;

  2. потом он находит «импорт\экспорт» директивы;

  3. в этом случае, он должен начать с самого начала, чтобы разобрать весь код еще раз в строгом режиме.



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



Определение типа ожидаемой загрузки файла открывает множество способов для оптимизации (например, загрузка импортируемых файлов параллельно/до парсинга оставшейся части файла html). Вы можете найти некоторые примеры, используемые движками Microsoft Chakra JavaScript для модулей ES.



Node.js способ указать файл как модуль



Node.js окружение отличается от браузеров и использовать тег script type=«module» не особо подходит. В настоящее время все еще продолжается спор, каким подходящим способом сделать это.



Некоторые решения были отклонены сообществом:




  1. добавить «use module» к каждому файлу;

  2. метаданные в package.json.



Другие варианты все еще находятся на рассмотрении (спасибо @bmeck за подсказку):


  1. определение, если файл является ES модулем;

  2. новое расширение файла для ES6 Модули .mjs, которое будет использоваться в качестве запасного варианта, если предыдущая версия не сработает.



Каждый метод имеет свои плюсы и минусы, и в настоящее время до сих пор нет четкого ответа, каким путем Node.js будет идти.



Простой пример нативного модуля



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












Вот файл модуля:

// main.js
import utils from "./utils.js";

utils.alert(`
JavaScript modules work in this browser:
https://blog.whatwg.org/js-modules
`);


И, наконец, импортированные утилиты:

// utils.js
export default {
alert: (msg)=>{
alert(msg);
}
};


Как вы могли заметить, мы оставили расширение файла .js, когда используется директива import. Это еще одно отличие от поведения бандлеров — нативные модули не добавляют .js расширения по умолчанию.



Во-вторых, давайте проверим область видимости у модуля (демо):

var x = 1;

alert(x === window.x);//false
alert(this === undefined);// true


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

// module.js
var x;
delete x; // !!! syntax error

alert(`
THIS ALERT SHOULDN'T be executed,
the error is expected
as the module's scripts are in the strict mode by default
`);

// classic.js
var x;
delete x; // !!! syntax error

alert(`
THIS ALERT SHOULD be executed,
as you can delete variables outside of the strict mode
`);


Строгий режим нельзя обойти в нативных модулях.



Итого:




  • .js расширение не может быть опущено;

  • область видимости не является глобальной, this ни на кого не ссылается;

  • нативные модули в строгом режиме по умолчанию (больше не требуется писать «use strict»).





Встроенный модуль в тег script



Как и обычные скрипты, вы можете встраивать код, вместо того, чтобы разделять их по отдельным файлам. В предыдущем демо вы можете просто вставить main.js непосредственно в тег script type=«module» что приведет к такому же поведению:



Итого:




  • script type=«module» можно использовать как для загрузки и выполнения внешнего файла, так и для выполнения встроенного кода в тег script.





Как браузер загружает и выполняет модули



Нативные модули (асинхронные) по умолчанию имеют поведение deffered скриптов. Чтобы понять это, мы можем представить каждый тег script type=«module» с атрибутом defer и без. Вот изображение из спецификации, которое объясняет поведение:





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



Главное отличие нативных модулей от обычных скриптов заключается в том, что обычные скрипты загружаются и выполняются сразу же, блокируя парсинг html. Чтобы представить это, посмотрите демо с разными вариантами атрибутов в теге script, где первым будет выполнен обычный скрипт без атрибутов defer \ async:
















Порядок загрузки зависит от реализации браузеров, размера скриптов, количества импортируемых скриптов и т. д.



Итого:




  • модули по умолчанию асинхронны и ведут себя как deffered скрипты



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



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



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



Честно говоря, когда я пробовал нативные модули в первый раз, и они заработали в браузере, я почувствовал то, чего не чувствовал с появлением таких языковых фич, как const/let/arrow functions и прочих новомодных фишек, когда они начали работать непосредственно в браузерах. Я надеюсь, что вы будете, как и я, рады добавлению нативного механизма работы с модулями в браузеры.



Другие статьи автора по данной теме





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



Я Frontend разработчик в команде Авиа в Tutu.ru. Сейчас у нас в проектах используется Webpack в качестве бандлера. Есть легаси код и старые проекты с RequireJS. Нативные модули очень интересны и ждем их с нетерпением, тем более мы уже перевели все наши проекты на HTTP/2. Конечно, совсем без бандлеров обходиться мы не собираемся, так как у нас большое количество модулей во всех проектах. Но приход нативных модулей мог бы поменять воркфлоу сборки и деплоя.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/326716/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Дайджест свежих материалов из мира фронтенда за последнюю неделю №258 (10 — 16 апреля 2017)

Понедельник, 17 Апреля 2017 г. 21:05 (ссылка)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Кстати, на прошедшей неделе дайджесту исполнилось 5 лет. Спасибо, что читаете.





















Веб-разработка
CSS
Javascript
Браузеры
Занимательное


Веб-разработка





CSS





JavaScript





Браузеры





Занимательное





Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.





Дайджест за прошлую неделю.

Материал подготовили dersmoll и alekskorovin.
Original source: habrahabr.ru.

https://habrahabr.ru/post/326700/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

K-Meleon 76 Pro — новая русская сборка браузера для олдфагов и истинных ценителей

Воскресенье, 16 Апреля 2017 г. 18:35 (ссылка)

И снова здравствуйте!



Безумно много времени прошло с момента нашей последней публикации, приуроченной к возрождению российской Pro-сборки K-meleon.

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



Увы, разработка K-Meleon'a стагнировала по ряду объективных причин, главная из которых — зависимость от единственного разработчика. У нашего «отца-разработчика» Дориана случилось подряд несколько проблем, что самым негативным образом повлияло на разработку, вкупе с бурными революциями в коде движка Мозилла, о которых сообщество уже давно отбурлило и теперь продолжает лишь тихо подвывать.



Тем не менее, нельзя сказать, что разработка встала совсем — наша сборка основана на коде, выпущенном в декабре 2016 года. Правда, это по-прежнему релиз-кандидат 76-й версии, основанной на Gecko 38 ESR, так что браузер заведомо перешел в разряд олдфагового инструментария, актуального для обладателей устаревшего и слабого оборудования.



Нет, он по-прежнему прекрасно работает и на современном оборудовании, но модерн-вебдизайн стремительным домкратом обрушивает на нас все новые и новые фишки популярных сайтов (часто написанные вопреки всем веб-стандартам), которые разработчикам браузеров просто ПРИХОДИТСЯ поддерживать. Ибо куда им (даже таким как Google) бодаться с тем же фейсбуком — себе дороже. Проше вставить в код костыль.



Тем не менее 76-я версия нашего браузера — это вполне рабочая лошадь, осиливающая подавляющее большинство сайтов. А кое-где уже и мы подставляем свои костыли.



Но хватит прелюдий: мы представляем новую российскую Pro-сборку, и я расскажу о ее основных фишках.

Как и прежде, наши сборки нацелены на то, чтобы сделать K-Meleon максимально дружелюбным, функциональным и удобным продуктом.



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

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

image



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



Давайте к нему и перейдем.



1) Для размещения дополнительных функций мы создали новый пункт меню «Pro», куда и будут помещаться команды, отвечающие за новые функции. Что-то подобное (и очень навороченное) было в разных сборках старой Оперы (например, Opera LE). У нас пока все скромно, но именно это меню и будет расти в дальнейшем. Также пункты этого меню могут дублироваться в актуальных для той или иной фичи контекстных меню.



2) Мы переместили в это меню кое-какие уже имевшиеся в прежней Pro-сборке фичи — например, открытие ссылки в новом приложении (раньше она называлась «Открыть в другом браузере», но т.к. она может передать ссылку в любую программу, способную принимать ссылки напрямую, то мы ее переименовали). Кроме браузеров, сюда очень удобно добавлять, например, медиаплейеры для проигрывания аудио и видеофайлов.

Еще из старенького в этом меню теперь живут настройки IE-вкладок и выбор менеджера загрузок (старый добрый oGet).

Также сюда выведен и быстрый доступ к about:-страницам.



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

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



4) Выключатель HTML5-медиа. Это расширение быстро деактивирует html5-проигрыватель медиафайлов, давая возможность желающим (мы же знаем, что они есть) принудительно перейти на флеш-плейер. Олдфажить так олдфажить!



5) Здесь же есть команды для быстрого перевода страниц с помощью Гугла и Яндекса. Сей функционал также продублирован в контекстных меню страницы, ссылки и фрейма.



6) Видеосейвер — средство интеграции сервисов сохранения видео, размещенного на различных сайтах — от классического Ютубика до Рутьюба и Твиттера (ибо в самом твиттере видео воспроизводится только в самых мейнстримных браузерах — такая вот фигня).



В целом 76-я ветка, хоть и является формально релиз-кандидатом, давно используется в сообществе. А так как Pro-сборка пользуется заметной — по меркам нишевого малоизвестного продукта — популярностью (последнюю версию 75.10 Pro скачали более 30000 раз), то теперь русскоязычным (и не только — у нас готова и английская Pro-сборка) пользователям есть большой резон обновиться. Главное, что в 76-й версии отсутствует злокозненный просочившийся в прошлую версию баг, рушивший браузер на кириллических доменах.



Теперь никаких левых падений на сайте Президент.рф! ;-)



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



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

Здесь стоит отметить, что для столь неравномерно развивающегося продукта мы все же имеем очень неплохую динамику развития: да, пока известность K-Meleon'a оставляет желать много лучшего, но нас уже заметили и разработчики некоторых ОСей, и кодеры отдельных проблемных сайтов, и даже авторы некоторых расширений для Firefox. Конечно, эту динамику надо сохранять и усиливать, чтобы можно было говорить о серьезном продукте, но именно этому и посвящены наши думы.



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



Пока это сотрудничество носит чисто исследовательский характер. Никакой монетизации в этом нет, а возможна ли она — покажет как раз жизненный цикл нашей новой сборки, K-Meleon 76 Pro.

Пока что она публикуется (как и официальная ее база) в статусе релиз-кандидата. По ходу обкатывания в нее будут вноситься необходимые исправления и дополнения.



Скачать сборку 76 Pro RC

Original source: habrahabr.ru.

https://habrahabr.ru/post/326618/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<браузеры - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda