Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Веселая аркада с Печенькой для новогоднего настроения. Объезжайте препятствия, а подарки, варежки, конфеты и прочие приятности не объезжайте: они помогут набрать очки и установить новый рекорд.

Сноуборд

Спорт, Аркады, На ловкость

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Программирование + Самоучитель

С этим тегом используют

IT Программист IT юмор Разработка Python Картинка с текстом Юмор Английский язык Книги Голос Пение Вокал Музыка Все
17 постов сначала свежее
13
ZolVas
3 года назад
Web-технологии

Как поднять свой CORS-proxy сервер за 5 минут бесплатно⁠⁠

Просто. Нужно задеплоить на Heroku репозитарий GitHub.

1. Заходите / регистрируетесь на https://heroku.com

2. Входите в сервис, соглашаетесь с правилами и открываете ссылку:

https://heroku.com/deploy?template=https%3A%2F%2Fgithub.com%...

Появится что-то вроде такого (фото):

Как поднять свой CORS-proxy сервер за 5 минут бесплатно IT, Javascript, Программирование, Самоучитель, Пособие, Github, HTML, Web, Прокси, Длиннопост, Backend

3. Даёте название приложению и деплоите. Готово.


Пример для Пикабу:

https://pika-secret-ocean-49799.herokuapp.com/https://pastebin.com/raw/S3rjB3Sx



Чуть больше подробностей и техдеталей под катом.

I. Предисловие

Когда создаёшь небольшие приблуды, иногда сталкиваешься с проблемой ограничений на кросс-доменные запросы — различного рода Same-origin policy, Cross-origin domain sharing (или CORS).

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

Как поднять свой CORS-proxy сервер за 5 минут бесплатно IT, Javascript, Программирование, Самоучитель, Пособие, Github, HTML, Web, Прокси, Длиннопост, Backend

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

Как пример — вывод данных с pastebin.com без CORS (что доступно штатными средствами лишь с платной подпиской, а мы реализуем бесплатно)!


Мимоходом, чтобы немножко заинтересовать, добавим в pastebin код и попробуем его запустить, обойдя CORS!

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

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами

II. Proxy-сервер, обходящий CORS
Раньше были удобные растиражированные бесплатные сервисы https://cors.io/ или https://cors-anywhere.herokuapp.com/corsdemo/

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

II.1. ПОДБОРКА ПОКА РАБОТАЮЩИХ ОНЛАЙН-СЕРВИСОВ:
Но есть менее популярные сервисы, которые пока работают:


https://scrappy-php.herokuapp.com/?url=

https://api.allorigins.win/raw?url=

https://cors-get-proxy.sirjosh.workers.dev/?url=

https://secret-ocean-49799.herokuapp.com/

https://cors.eu.org/

https://cors-proxy﮳tk/?url=

https://pika-secret-ocean-49799.herokuapp.com/


В конце приведённой ссылки подставьте свой URL, который нужно CORS-обойти.

Например,

https://pika-secret-ocean-49799.herokuapp.com/https://pastebin.com/raw/5Sm88arP


Но высока вероятность, что перечисленные сервисы станут популярными.

И вскорости прикажут долго жить.


III. Что делать, когда пропадут перечисленные сервисы?
III.1. ВАРИАНТ-1: ИСКАТЬ ЕЩЁ АНАЛОГИ

Ссылка-1: https://github.com/topics/cors-proxy

Ссылка-2: https://github.com/search?q=CORS%20proxy&type=Repositories


Листайте, открывайте каждый, ищите... Вам может повезти. И в readme внизу или в описании справа найдёте работающую демо-версию сервиса!

Предыдущий список мне удалось собрать именно так, листая GitHub!

III.2. ВАРИАНТ-2: САМОСТОЯТЕЛЬНО СОЗДАТЬ СЕРВИС

1. Бесплатно заведите аккаунт на

heroku.com


2. Подтвердите свою учётную запись по email, который придёт на почту.


3. Авторизуйтесь на heroku.com и согласитесь с правилами.


4. Откройте ссылку ниже:

https://heroku.com/deploy?template=https://github.com/messier31/cors-proxy-server.git


5. Введите название приложения и нажмите Deploy app.

Созданный специально для статьи https://pika-secret-ocean-49799.herokuapp.com тоже может исчезнуть. Запасайтесь своими!


ИТОГО, ПЕРЕАДРЕСАЦИЯ РАБОТАЕТ:

https://jsfiddle.net/apwv8hs7/


Текст и фото мои, можете свободно использовать — CC0.

Показать полностью 2
[моё] IT Javascript Программирование Самоучитель Пособие Github HTML Web Прокси Длиннопост Backend
14
1
DimaG3
DimaG3
3 года назад

Настало время изучать языки программирования⁠⁠

Разбирал книги и понял, что настало время Pascal.

Настало время изучать языки программирования Pascal, Самоучитель, Программирование, Языки программирования

Кто-нибудь учился по этим книгам?

Pascal Самоучитель Программирование Языки программирования
33
9
ZolVas
4 года назад

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами⁠⁠

Запускать JavaScript (или JS) код в браузере — обычный навык.

Если когда-то хотели апробировать свой первый JS-код, но боялись, этот пост для вас.


Цель поста для читателей — мочь самостоятельно запускать нужный код.

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


Друзья, которые читают. Если вы это видите, вероятно, вы только что получили код и конкретный пункт из этого пособия. Перечитайте пункт и установите скрипт по аналогии самостоятельно!


ПОМНИТЕ: не устанавливайте JS-код из сомнительных источников и когда не понимаете, что код делает!
Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

§ I. ГДЕ запускать JavaScript код?


Рис. 0.1.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.1. Через консоль браузера.

Чтобы открыть консоль нужно нажать ctrl+shfit+K или ctrl+shift+L.

Вставляете код, нажимаете enter, он сработает.


Рис. I.1.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.2. Через адресную строку браузера.

Это строка, где написан адрес сайта.

Стираете адрес сайта, вместо вставляете код, нажимаете enter, он сработает.

Рис. I.2.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.3. Через bookmarklet, или букмарклет, или «закладурку».

Это закладка браузера, в которой вместо сайта стоит JS-код.

Создаёте любую новую закладку. Затем находите закладку и исправляете её: вместо адреса сайта, который должен открываться, вставьте JS-код и сохраните.

Нажимаете на эту вкладку, срабатывает JS-код.

ПРИМЕЧАНИЕ: это один из удобнейших «многоразовых» способов запускать JS-код, в том числе в браузере смартфона!


Рис. I.3a.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

Рис. I.3b.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

Рис. I.3c.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.4. Через обычный блокнот, сохранённый как HTML.

Открываете новый блокнот (notepad).

Вставляете туда нужный HTML с JS.

Нажимаете «Сохранить как», откроется меню. Тип файла — меняете «Текстовые документы (*.txt)» на «Все файлы (*.*)». Имя файла — мойкод.html. Его и открывать в браузере.

ПРИМЕЧАНИЕ: удобный «многоразовый» способ запускать JS-код на компьютере (без Интернета).


Рис. I.4.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

СПРАВОЧНО: HTML — это язык гипертекстовой разметки.

Файл расширения .html — это обычный файл в виде текста, прочитав который браузер поймёт, как визуально показать страницу (и внутри .html может храниться JS-код, который может быть запущен).

Любая открытая web-страница в браузере в общем случае — HTML.


Рис. 0.2.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.5. Через блокнот в браузере (внося изменения в web-страницу).

Преимущества (многоразовое использование и не требуется Интернет), а также подход похожи на [I.4].

Открываете блокнот в браузере в качестве новой вкладки:

data:text/html;charset=utf-8, <html contenteditable>

Затем в консоли находите элементы (HTML-код): открываете консоль (ctrl+shift+K или ctrl+shift+L), переходите в Elements.

Изменяете HTML-код, вставляя туда нужный HTML с JS.

Сохраняете страницу, закрываете её.

После сохранения её и открывать в браузере.

ПРИМЕЧАНИЕ: кстати, сам упомянутый браузерный блокнот удобен для своих заметок, которые можно потом сохранять в специальной папке (ctrl+s).


Рис. I.5a.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

Рис. I.5b.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.6. Через онлайн компилятор/интерпретатор.

Например, один из удобнейших — jsfiddle.net.

Вставляете HTML и JavaScript в соответствующие поля, нажимаете «Save» для сохранения страницы с уникальным адресом (или «Run» для предпросмотра).

Для демонстрации сохранённого можно вставить в конец адреса «/show», будет видна просто страница:

jsfiddle.net/Lz0mtuqx/show

ПРИМЕЧАНИЕ: удобнейший «многоразовый» способ запускать JS-код (когда есть Интернет).


Рис. I.6.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

I.7. Через специально установленные расширения (addon) браузера.

Tampermonkey (для Google Chrome) или Greasemonkey (для Firefox).

Вставляете код, сохраняйте. На соответствующих страницах должно работать.

ПРИМЕЧАНИЕ: удобно автоматически запускать JS-код сразу после загрузки (например, на конкретных сайтах с помощью @match).


Рис. I.7.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

§ II. ОСНОВНЫЕ ВИДЫ запуска JavaScrpt-кода?

Здесь речь будет идти о простейшем коде, запускающем окошко с текстом.

alert('hi');

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

II.1. Чистый код.

alert('hi');

Применение: [I.1] консоль.

II.2. Протокол: немедленно вызываемая функция (или IIFE) объявляется и запускается.

javascript:(function(){var func1=function(){alert('hi');};func1();})();

Применение: [I.2] адресная строка браузера;

[I.3] букмарклет.

II.3. Userscript для Tampermonkey / Greasemonkey.

// ==UserScript==
// @name Script Name
// @license CC0; https://creativecommons.org/publicdomain/zero/1.0/deed.ru
// @match http*://*.wikipedia.org/*
// @run-at document-idle
// ==/UserScript==

(function() {
var func1=function(){alert('hi');};
func1();
})();

Применение: [I.7] специальные аддоны Tampermonkey / Greasemonkey.

II.4. Созданный или изменённый файл .html.

Применение: [I.4] файл .html, сохранённый, например, из блокнота;

[I.5] файл .html, сохранённый из отредактированной браузерной страницы;

[I.6] через jsfiddle.

II.4.1. Файл .html, код внутри файла, запуск после загрузки страницы.

<script type="text/javascript">window.onload=function(){var func1=function(){alert('hi');};func1();};</script>
<div id="textDivId1></div>

II.4.2. Файл .html, код по ссылке, запуск после загрузки страницы.

<script type="text/javascript" src="http://codepad.org/AXduOuGF/raw.txt"></script>
<div id="textDivId1></div>

II.4.3. Файл .html, код внутри файла, запуск по кнопке.

<script type="text/javascript">var func1=function(){alert('hi');};</script>
<div id="btnDivId1" style="position: relative; z-index: 99999;">
<button id="btnId1" onclick="javascript:func1();">Click</button>
</div>

II.4.4. Файл .html, код по ссылке, запуск по кнопке.

<script type="text/javascript" src="http://codepad.org/2NJ2YB3V/raw.txt"></script>
<div id="btnDivId1" style="position: relative; z-index: 99999;">
<button id="btnId1" onclick="javascript:func1();">Click</button>
</div>

II.5. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать.

Применение: [I.4] файл .html, сохранённый, например, из блокнота;

[I.5] файл .html, сохранённый из отредактированной браузерной страницы.

II.5.1. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код на странице.

javascript:(function(){var func1a=function(){

var scr1 = document.createElement('script');
scr1.setAttribute('type','text/javascript');
scr1.textContent="var func1=function(){alert('hi');};";
document.documentElement.getElementsByTagName('*')[0].appendChild(scr1);

var btnDiv1 = document.createElement('div');
btnDiv1.id = 'btnDivId1';
btnDiv1.style.position = 'relative';
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement('button');
btn1.innerHTML = 'Click';
btn1.id = 'btnId1';
btn1.setAttribute("onclick", "javascript:func1();");

btnDiv1.appendChild(btn1);
document.documentElement.getElementsByTagName('*')[0].insertAdjacentHTML('afterend', btnDiv1.outerHTML);

};func1a();})();

II.5.2. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код по ссылке.

javascript:(function(){var func1a=function(){

var scr1 = document.createElement('script');
scr1.setAttribute('type','text/javascript');
scr1.setAttribute('src','http://codepad.org/2NJ2YB3V/raw.txt');
document.documentElement.getElementsByTagName('*')[0].appendChild(scr1);

var btnDiv1 = document.createElement('div');
btnDiv1.id = 'btnDivId1';
btnDiv1.style.position = 'relative';
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement('button');
btn1.innerHTML = 'Click';
btn1.id = 'btnId1';
btn1.setAttribute("onclick", "javascript:func1();");

btnDiv1.appendChild(btn1);
document.documentElement.getElementsByTagName('*')[0].insertAdjacentHTML('afterend', btnDiv1.outerHTML);

};func1a();})();

§ III. ОСНОВНЫЕ ТИПЫ запускаемых Javascript-кодов?

III.1. ТЕОРИЯ.

Разумеется, типов множество, но некоторые мы разобрали.

Это:

а) запускаемый сразу;

б) запускаемый после загрузки страницы;

в) запускаемый по кнопке;

г) запускаемый каждые N секунд — изучите самостоятельно!


Первые три вы знаете и видели.

Четвёртый нужно изучить самостоятельно, сделав по аналогии. И, если не выходит, пользуясь поиском в google. Или задавая вопросы на профильных сайтах, например, на stackoverflow или в соответствующих чатах.

III.2. ПРАКТИКА.

Задание-1: чтобы закрепить знания, совет — проверить, «пощупать» каждый кусок кода, который приведён выше и удостовериться, что он работает.



Задание-2: измените КАЖДЫЙ приведённый выше кусок кода и удостоверьтесь, что он работает так, чтобы код запускался каждые 3 секунды.


Как это сделать?

Если обобщить, то измените в каждом куске

alert('hi');

на

setInterval(function(){alert('hi');},3*1000);

Как вы поняли, [II.1] уже сделан. Попробуйте сделать остальные.

Если у вас не получилась практика / иные причины, возможно, «маякните» в комментариях на предмет того, нужны ли «спойлеры» / ответы (хотя это несложно).

§ IV. ДОПОЛНЕНИЕ.

[Доп.советы, чуть более углублённые мелочи]

IV.1. О том, где может храниться JavaScript.

Он может быть как внутри самого файла HTML, так и быть внешним (ссылкой на код).


Во втором случае, то есть для хранения внешних, использовался сайт codepad.org, хотя есть и аналоги [но некоторые аналоги могут на уровне не давать возможность его подгружать в браузер, давая ошибку «CORS»; сейчас неважно, но просто учтите].


Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).


Рис. IV.1a.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

Рис. IV.1b.

Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами IT, Javascript, Программирование, Самоучитель, Букмарклет, Пособие, HTML, Мобильные телефоны, Длиннопост

На этом достаточно исчерпывающее пособие по запуску JavaScript подходит к концу.

Спасибо за чтение.

Лицензия на текст, код и скрины: CC0.

UPD: ВНИМАНИЕ: В связи с закрытием сайта codepad.org просьба учитывать изменения, описанные в комментарии #comment_199553464

Показать полностью 14
[моё] IT Javascript Программирование Самоучитель Букмарклет Пособие HTML Мобильные телефоны Длиннопост
5
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
Allorn
7 лет назад

Учебник С# с заданиями⁠⁠

Всем привет!
Решил немного заняться своим развитием и выбор пал на изучение языка С#.
Сейчас изучаю видео курсы на сайте майкрософт + приложение на свой смарт поставил, но не хватает учебника.
Точнее их много, но желательно, что бы после пройденный главы были задачи на выполнение.
Посоветуйте что то подобное :)
Ну и ресурсы где можно еще поучить данное направление :)
Заранее спасибо!

Программирование Самоучитель Курсы Книги Текст
14
creatingy
7 лет назад

Ох уж эта Java⁠⁠

Ох уж эта Java
Программирование Java Пиво Самоучитель
8
4
scratchbook
scratchbook
8 лет назад
Лига образования

Запросто научить детей делать свои игры.⁠⁠

Запросто научить детей делать свои игры.
[моё] Дети Книги Школьники Кот Самоучитель Новинки Программирование
7
26
RoadReload
RoadReload
8 лет назад

Введение в JavaScript⁠⁠

Введение в JavaScript IT, Программирование, Web-программирование, Javascript, Самоучитель, Саморазвитие, Верстка, Длиннопост

Этот пост посвящён главному языку будущего - JavaScript. Благодаря своей гибкости используется в браузере, на серверах, в мобильных приложениях, на десктопе и практически во всех видах программирования. Удобный синтаксис позволяет легко писать на нём, а высокая производительность делает его отличным выбором для решения любых задач - от небольших магазинов до огромных highload проектов. JavaScript по праву является самым популярным в мире языком. На каждом сайте есть браузерный JavaScript, а JavaScript на сервере используется такими крупными корпорациями, как Amazon, Yahoo, HP, NASA, Walmart и многие другие.


Часто задаваемые вопросы


В: Что это за язык такой?


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



В: Какие возможные направления для разработки существуют?


О: Практически все! Можно писать Front-end, Back-end, GameDev, 2D/3D графику, разрабатывать мобильные и десктопные приложения. Список инструментов для различных целей



В: Можно выучить только один фреймворк/библиотеку и всё писать на нём?


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



В: Существуют ли стайл-гайды для JavaScript?


О: Да. Стайл-гайд для Node.js, стайл-гайд для Front-end



В: Какие новые возможности добавил ES6?


О: Вот здесь можно почитать на русском



В: Я хочу писать на ES6, но многие браузеры не поддерживают новые возможности. И вообще, надоел геморрой с браузерным зоопарком. Неужели нет способа обойти это?


О: Конечно есть! Чтобы код одинаково хорошо работал во всех браузерах и все возможности ES6 и будущих стандартов нормально работали необходимо собрать код с помощью сборщика. Сборщик компилирует весь код в один файл и делает его полностью кроссбраузерным. Наиболее удобен в использовании Webpack, хотя существуют и аналоги. Потребуется некоторое время на изучение, но результат себя окупит. Сборщики нужны только во Front-end, Node.js и так поддерживает все новые возможности.



В: Зачем нужны CoffeeScript и TypeScript?


О: Это особые варанты JS для любителей других языков. CoffeeScript подходит для любителей Ruby и Python, TypeScript - для сторонников строготипизированных языков вроде C# или Java. Если ты новичок в программировании, то учи оригинал, а диалекты попробуешь, когда уже будет опыт.



В: Зачем нужны таск-раннеры, такие как Gulp или Grunt?


О: Они позволяют одной консольной командой запустить выполнение заранее прописанного процесса, который может содержать множество команд и который неудобно каждый раз выполнять вручную. Пример - компиляция JS с помощью Webpack, сборка LESS стилей в CSS и многое другое. Ещё раз - таск-раннер не замена сборщику, Gulp - не конкурент Webpack, они выполняют совершенно разные задачи и зачастую используются вместе.



В: Можно ли писать фронт на других языках?


О: Да, существуют компиляторы различных языков в JS, такие как ScalaJS, PyJS и другие. Но стоит помнить, что у них есть масса недостатков и использовать их стоит только если на чистом JS (также CS и TS) не получается писать совершенно. Они предназначены прежде всего для тяжёлых приложений вроде браузерных 3D игр в классических Front-end целях не очень удобны.



В: Я слышал про какой то WebAssembly, который заменит JS. Это правда? Что это такое?


О: Нет, неправда. WebAssembly (WASM) практически не имеет отношения к классическому Front-end. Это особая технология, позволяющая выполнять в браузере бинарный код, компилируемый из различных языков. Он предназаначен для выполнения в браузере тяжёлых приложений вроде трёхмерных онлайн-игр и никак не связан с привычными задачами JS. Более того, учитывая развитую инфраструктуру JS, множество фреймворков и библиотек на все случаи жизни, большое количество профессиональных разработчиков, огромное количество легаси-кода, выполнение WASM иных задач, не связанных с различными высокопроизводительными трёхмерными приложениям, видится невозможным. Кроме того, WASM не затрагивает серверную и мобильно-десктопную часть JavaScript, которые уже успели стать довольно популярными.


В: С чего начать изучение?



Материалы для изучения



Книги про JavaScript



Марейн Хавербек - "Выразительный JavaScript" — Вводная книга по JavaScript и программирование в целом.

Онлайн на русском | Онлайн на английском


Дэвид Фленеган - "JavaScript: Подробное руководство"

PDF на русском


Дуглас Крокфорд "JavaScript: сильные стороны"

PDF на русском


Стефанов С. - "JavaScript. Шаблоны"

PDF на русском


Джон Резиг - "Секреты JavaScript ниндзя"

PDF на русском


Николас Закас - "JavaScript. Оптимизация производительности"

PDF на русском


Джон Резиг, Расс Фергюсон - "JavaScript для профессионалов"

На русском


Dr. Axel Rauschmayer - "Speaking JavaScript: An In-Depth Guide for Programmers"


Онлайн на английском | PDF на английском


Discover Meteor — Книга по Meteor.js - одному из самых лёгких и функциональных фреймворков.

Онлайн на русском


Node.js



М. Кантелон , М. Хартер - "Node.js в действии"

PDF русском | Материалы к книге


Кирилл Сухов - "Node.js. Путеводитель по технологии"

PDF на русском


Дэвид Хэррон - "Node.js. Разработка серверных веб-приложений"

PDF на русском


Front-end


Тодд Мотто - "Учебник AngularJS"

Онлайн на русском | Онлайн на английском


Max P - "Курс по React.js для начинающих"

PDF на русском


Эдди Османи - "Разработка Backbone.js приложений"

PDF на русском


Эрл Каслдайн, Крэйг Шарки - "Изучаем JQuery"


Адам Фримен - "jQuery для профессионалов"


И не забываем читать официальную документацию для каждого фреймворка.



Онлайн сообщества



learn.javascript.ru - Самый главный русскоязычный сайт по JavaScript. Других таких подробных уроков не найти. Начинать строго с него.


node-center.ru - Второй по важности сайт. Ориентирован на Node.js, но мелькает материал и по Front-end. Сборник всей нужной информации, перевод официальной документации, список книг и ссылок.


jstherightway.org - Огромный англоязычный гайд. Есть книги, статьи, список фреймворков и многое другое. По сути, этот текст - краткий аналог этого гайда.


nodeguide.ru - Большое количество переведённых статей по Node.js



Блоги и новостные ленты


dailyjs.com - DailyJS


weblog.bocoup.com - Bocoup Weblog


perfectionkills.com - Perfection Kills


reddit.com/r/javascript - subreddit на reddit.com


toddmotto.com - Todd Motto, Lead front-end @appsbroker. Developer Expert @google.



Онлайн курсы



Изучая только теорию язык усваивается плохо. Наиболее важна практика, которую можно получить на онлайн-курсах.


CodeSchool


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


CodeAcademy


Уже не такой сильный, но все еще интересный проект, также обязателен для улучшения навыка.


Udacity


Дает хорошее представление о замыканиях.


Прошёл курсы, прочитал книги и думаешь, что знаешь JS? Теперь изучи тонкости и особенности языка. Сделать это можно здесь - https://shamansir.github.io/JavaScript-Garden/





Список инструментов для различных целей


Front-end: jQuery, Angular, React, Backbone(ru), Meteor(ru)

Back-end: Node.js(ru), Express, Koa, Sails, Total, Strapi, Hapi


Десктопные приложения: NW.js, Electron, WinJS


Мобильные приложения: Cordova, NativeScript, React Native, Phonegap, Ionic


GameDev: Phaser, Cocos, Pixi, Unity, Atomic Game Engine


Тестирование: Mocha, Chai, Jasmine, Sinon, Karma


Continuous Integration: Semaphore, Shippable


Auto deploy: Sanelotto, ShipIt, Fabric, Capistrano


CMS: KeystoneJS, PencilBlue, Apostrophe, Ghost


Генераторы статичных сайтов: DocPad, Metalsmith, Harp, Brunch


Imageboard engine: Hanako, Doushio, live4chan


Бесплатные хостинги: OpenShift, Heroku


IDE/редактор: WebStorm, Atom, Brackets


Task-runner: Gulp, Grunt, Broccoli

Показать полностью
IT Программирование Web-программирование Javascript Самоучитель Саморазвитие Верстка Длиннопост
22
Партнёрский материал Реклама
specials
specials

Кешбэк прямиком из Римской империи⁠⁠

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

Реклама Реклама. ПАО «Банк ВТБ», ИНН: 7702070139

Калькулятор Выгода
22
0sennijLis
0sennijLis
8 лет назад
Лига Сисадминов

А так же "Системное администрирование за пол часа"⁠⁠

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

А так же "Системное администрирование за пол часа" Самоучитель, Android, C++, Программирование
А так же "Системное администрирование за пол часа" Самоучитель, Android, C++, Программирование
Показать полностью 2
Самоучитель Android C++ Программирование
11
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии