Все потоки

HTML *

Стандартный язык разметки web-страниц

СтатьиПостыНовостиАвторыКомпании

Get-Web 2 фев 2019 в 17:18

Кастомный виджет googleTranslate для сайта

5 мин

64K

HTML * JavaScript * Веб-разработка *

Из песочницы

Перед тем как преступить к написанию данной статьи, я решил посетить страницу где генерируется Google Translate Widget, чтобы узнать о возможных изменениях и увидел данное сообщение:

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

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

Не сложно догадаться какой браузер имеет ввиду Google, но речь не об этом. Самое главное, что плагин все также остается рабочим и мы можем им пользоваться. Кроме того, за неимением возможности генерировать виджет, данная тема становиться еще более актуальной, ведь потребность в машинном переводе никуда не исчезла, а Google Translate, на мой взгляд, один из самых мощных инструментов для этого.

Как будет выглядеть наш пример:

Читать дальше →

+15

Rapprogtrain 1 фев 2019 в 17:35

Создание своего jsfiddle, часть 2

4 мин

3.2K

CSS * HTML * JavaScript *

Привет всем читателем Habr. В данной статье мы будем продолжать писать свой онлайн редактор кода.

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

Изменения кода с первой части

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

Читать дальше →

+4

alexzfort 27 янв 2019 в 21:43

Дайджест свежих материалов из мира фронтенда за последнюю неделю №349 (21 — 27 января 2019)

4 мин

13K

Веб-разработка * JavaScript * HTML * CSS *

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

Читать дальше →

+29

O_Kompah 25 янв 2019 в 19:35

Полупрозрачный фон

1 мин

55K

Из песочницы

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (html):

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<title>
			Полупрозрачный фон
		</title>
	</head>
		<body>
			<div class="mid">
				<p>Ваш текст</p>
				Ваш текст. Ваш текст.
			</div>
		</body>
</html>

Строчка "" подключает файл стилей CSS.

Читать дальше →

-49

SSul 23 янв 2019 в 07:14

Как мы тестировали drag&drop в HTML5

6 мин

7.8K

Блог компании SimbirSoftТестирование веб-сервисов * Java * HTML * Angular *

Так или иначе, все сталкивались с ситуациями, когда в банальной обстановке вдруг происходило что-то необычное. Примерно такой случай произошел с нами при тестировании нового приложения на проверенном сто раз окружении. Сюрпризом для нас стало использование некоторых возможностей HTML5 в работе front-end’а, а точнее невозможность стандартными средствами Selenium WebDriver автоматизировать тестирование drag&drop операций. Об этом опыте мы хотим рассказать.

Читать дальше →

+6

Spawnet 21 янв 2019 в 14:53

Оптимизация сайта для GooglePage Speed (учтены все особенности после его обновления) Часть 1

4 мин

53K

CSS * HTML * JavaScript *

Из песочницы

Эта статья будет интересна, кто столкнулся с разного рода проблемами после обновления Google PageSpeed и претензиям со стороны заказчиков или начальника, почему упал бал или возникло такое количество замечаний. А так же тем, кто производит оптимизацию сайтов.
В первую очередь стоит упомянуть, что вот в этой статье, на мой взгляд, всё очень грамотно и доступно расписано.

Я же от себя добавлю больше практических советов, а так же будет интересно послушать вашу точку зрения и увидеть ваши наработки.

Читать дальше →

+17

alexzfort 20 янв 2019 в 21:51

Дайджест свежих материалов из мира фронтенда за последнюю неделю №348 (14 — 20 января 2019)

4 мин

12K

CSS * HTML * JavaScript * Веб-разработка *

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

Читать дальше →

+24

max-optic 20 янв 2019 в 11:38

Thimble (Mozilla) переезжает на Glitch

2 мин

5.1K

JavaScript * HTML * CSS *

Из песочницы

С середины декабря 2018 года на сайте проекта Thimble от Mozilla появилось объявление о переезде на платформу проекта Glitch. Переезд должен полностью состояться до 16 декабря 2019 года.

Обе платформы уже обсуждались на Хабре. Статьи о Thimble – статья 1, статья 2. Статья о Glitch.

Читать дальше →

+9

ru_vds 17 янв 2019 в 10:51

Electron: разработка настольных приложений с использованием HTML, CSS и JavaScript

8 мин

150K

Блог компании RUVDS.comCSS * HTML * JavaScript * Веб-разработка *

Перевод

Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.

Читать дальше →

+18

alexzfort 13 янв 2019 в 21:40

Дайджест свежих материалов из мира фронтенда за последнюю неделю №347 (7 — 13 января 2019)

3 мин

13K

CSS * HTML * JavaScript * Веб-разработка *

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

Читать дальше →

+24

EpicLegend_gg 11 янв 2019 в 16:14

Элементарный Canvas

3 мин

25K

Canvas * HTML * JavaScript *

Туториал

Если вы изучаете веб совсем недавно, но уже успели увидеть различные красивые эффекты на сайте, по типу системы частиц или какие либо игры разработанные на canvas'e и вас это заинтриговало, но изучать что-то новое очень страшно, то я вам готов продемонстрировать, как за 50 строк js кода можно сделать что-то интересное на canvas'e.

Скажу сразу, я хочу объяснить логику работы с canvas'ом. Код очень простой, я надеюсь, это подтолкнет вас к изучению такого инструментария как canvas. А так же это очень хорошая практика для начинающего JS программиста.

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

Что нам нужно сделать?

+12

alexzfort 6 янв 2019 в 21:32

Дайджест свежих материалов из мира фронтенда за последнюю неделю №346 (1 — 6 января 2019)

3 мин

13K

Веб-разработка * JavaScript * HTML * CSS *

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

Читать дальше →

+13

alexzfort 30 дек 2018 в 23:09

Дайджест свежих материалов из мира фронтенда за последнюю неделю №345 (24 — 30 декабря 2018)

3 мин

13K

Веб-разработка * JavaScript * HTML * CSS *

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

Читать дальше →

+18

glebmachine 27 дек 2018 в 11:26

Grid Layout как основа современной раскладки

15 мин

37K

Блог компании Конференции Олега Бунина (Онтико)CSS * HTML * Веб-дизайн * Веб-разработка *

В темные века верстальщики строили сайты на таблицах. Потом они освоили float и flexbox, и тьма отступила. В 2017-м наступила эпоха Просвещения с приходом CSS Grid Layout.

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

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

Об этом расшифровка доклада Сергея Попова на Frontend Conf: про спецификацию, про то, почему верстальщики боятся Grid и как решиться применять сетку в своих проектах, чтобы «Make your website great again!».

+34

alexzfort 23 дек 2018 в 23:00

Дайджест свежих материалов из мира фронтенда за последнюю неделю №344 (17 — 23 декабря 2018)

3 мин

12K

CSS * HTML * JavaScript * Веб-разработка *

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

Читать дальше →

+25

alexprozoroff 18 дек 2018 в 14:05

Предиктивное поведение веб-интерфейса

6 мин

18K

Веб-дизайн * JavaScript * HTML *

Из песочницы

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

Читать дальше →

+38

alexzfort 16 дек 2018 в 21:19

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

3 мин

13K

Веб-разработка * JavaScript * HTML * CSS *

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

Читать дальше →

+30

Petrovich_Z 11 дек 2018 в 02:01

«CMS» на базе Google Spreadsheets для статических сайтов

2 мин

11K

JavaScript * HTML * Google API * CMS *

Туториал

Все чаще для рассказа о мероприятии/товаре/услуге компании создают сайты на базе каких либо конструкторов. Либо своими силами, либо привлекая дизайнеров и без участия программиста. Современные конструкторы позволяют собрать классный, яркий, эффектный сайт, но статичный. Любые изменения нужно вносить «ручками в редакторе» и перепубликовать страницу. Но что делать, если данные меняются очень часто или хочется добавить немного автоматизации — вот тут и могут помочь Гугл Таблицы и Charts Query Language (и знакомы программист).

Читать дальше →

+13

alexzfort 9 дек 2018 в 21:40

Дайджест свежих материалов из мира фронтенда за последнюю неделю №342 (3 — 9 декабря 2018)

4 мин

13K

CSS * HTML * JavaScript * Веб-разработка *

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

Читать дальше →

+20

EpicLegend_gg 6 дек 2018 в 06:15

Разбор таска по верстке (sass, pug, gulp, bem)

3 мин

9.5K

Для Junior’ов, для junior’ов… а то начнут тут… да мы, да это…

Доделал проект(сайт) pug+sass+es6+gulp+BEM. Во время разработки столкнулся со многими трудностями. Эта статья рассчитана на новичков, на тех, кто не знает об отрицательных маржинах, слышали о методологии именования БЭМ, но не пробовали ее, для тех, кто не имеет огромного опыта в разработке. Надеюсь, вам здесь будет интересно. Если же вы читаете это на работе, сидя у 4-ех мониторов и одной рукой пишите код для ИИ, а второй листаете хабр, то я бы хотел у вас услышать конструктивную критику о методах, которые были использованы здесь.

Отрицательные margin и width 110%

Про такой фокус я знаю давно, но на практики применял лишь впервые. В макете было ограничение(wrapper = width: 1170px, красная граница). Справа контент соответствовал ограничению и прилегал к границе, а вот слева картинка вылезала за границу. Сначала это может пугать, но стоит подробней узнать о работе margin-letf: -100px и вы уже знаете, как решить поставленную задачу. К слову, это flex и желтым я отметил границы объектов.

Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)

Читать дальше →

+2

1 2 ...

54

55 56 ...