Задать вопрос
Demon83

Дмитрий Понькин

Изучаю веб разработку
Лайки

  • Знает ли кто-то как собрать сайт в 1 файл?

    @markak
    Frontend developer
    Можно, если стили из файла перенести в тэг style, изображения сконвертировать в base64 и заменить в соответствующих атрибутах src и значениях свойств background-*
    Например вот так:

    https://jsfiddle.net/71emtqoL/

    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>example</title>
  <style>
    .bg-img{
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
	    background-repeat:  no-repeat;
	    padding-top: 10px;
    }
  </style>
</head>

<body>
  <div>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
    <p>Изображение красной точки в base64 (img src)</p>
  </div>
  <div class="bg-img">Изображение красной точки в base64 (background-image)</div>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать

  • Как систематизировать знания?

    @AndromedaStar
    .Net - monkey
    Просто начните писать большой учебный проект, а ту теорию, которую вы учите попытайтесь синтетически включить в свой проект. Это самое лучшее решение по моему опыту.
    Ответ написан
    11 комментариев
    11 комментариев

  • Как систематизировать знания?

    @mletov
    Прочитайте какую-нибудь книгу, которая считается авторитетной в той области программирования, которую вы для себя избрали. Я вот, например, когда начинал писать на C#, бездумно копировал с SO примеры с использованием List<T>. Но при этом даже близко не понимал что это, еще и ругался про себя "опять эти непонятные уголочки, интересно, что они значат". А потом прочитал Албахари, ах вот что это, обобщенный класс, а их, оказывается, еще и свои можно писать. Как сколько нам открытий чудных...

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

  • Как систематизировать знания?

    Adamos
    @Adamos
    Да все мы самоучки и пропустили "небесный инструктаж", как это называет Ричард Бах.
    Ощущение неполного понимания обозначает границу между тем, что вы действительно освоили, и тем, что еще нет. По мере накопления опыта граница будет расширяться, но не исчезнет никогда. Комфортно и уверенно вы будете себя чувствовать только в задаче, которую решаете не в первый раз.
    Добро пожаловать в профессию ;)
    Ответ написан
    2 комментария
    2 комментария

  • Как систематизировать знания?

    sergiks
    @sergiks
    ♬♬
    есть ощущение, что какой-то большой пласт теоретических знаний упущен

    Это прекрасное чувство «голода» к знаниям.

    Порекомендую практику: писать (свой) проект, параллельно читая код другого «хорошего» проекта. Списывать, копировать — понимая.

    Если сталкиваетесь с невиданным явлением, термином, продуктом, паттерном — остановиться, погуглить, разобраться. Спросить.
    Ответ написан
    Комментировать
    Комментировать

  • Что такое баг 4px?

    @McBernar
    4-пиксельные отступы в дизайне — это просто удобно и стало неким стандартом. Больше вариативность, чем 5px и уж тем более удобнее 10px. Изначально пришло из мобильной разработки.

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

    К багу, о чем бы ни шла речь, это отношения не имеет.
    Ответ написан
    Комментировать
    Комментировать

  • Что такое баг 4px?

  • Какие книги читать по введению в программирование?

    maly222
    @maly222
    Бот
    Я пробовал читать очень много книг. Теория есть но практики почти 0.
    Да я тоже новичок. Новичкам главное привыкнут и начать делать проекты.

    У тебя есть идея? Там создать какой то сайт? Или приложение.
    Начни делать и по ходу ты будишь искать ответ на вопросы по книгам и по сайтам.
    Я пользуюсь этим подходом к обучение программирование.
    Ответ написан
    1 комментарий
    1 комментарий

  • Какие книги читать по введению в программирование?

    sarapinit
    @sarapinit
    Точу водой камень
    Архитектура компьютера | Таненбаум Эндрю
    Современные операционные системы | Таненбаум Эндрю
    Компьютерные сети | Таненбаум Эндрю, Уэзеролл Дэвид
    Совершенный код. Мастер-класс | Макконнелл Стив
    Структура и Интерпретация Компьютерных Программ | Абельсон Харольд
    Алгоритмы. Построение и анализ | Кормен Томас Х., Лейзерсон Чарльз И.
    Ответ написан
    Комментировать
    Комментировать

  • Какие книги читать по введению в программирование?

    @dmtrrr
    Backend developer
    1 Керниган, Пайк: Практика программирования
    2 книги Танненбаума
    3 Совершенный код: Практическое руководство по разработке программного обеспечения (не все главы могут быть актуальны, но те, что касаются кода, ок)
    Ответ написан
    2 комментария
    2 комментария

  • Где искать информации о основах основ программирования?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    То о чем Вы спрашиваете, называется Computer Science. Гуглофпомасч. :)
    Ответ написан
    Комментировать
    Комментировать

  • Где искать информации о основах основ программирования?

    @AleksKlepow
    Предисловие: далее будет лично мой опыт и скорее всего не верный, но тем не менее я тут и работаю по специальности.
    Для начала книги лично мне не помогли, начинал я в 14 лет и переварить тяжёлую терминологию и вбросы сложных терминов было просто не возможно. Для себя я тогда нашёл другой выход, начал смотреть полноценные университесткие лекции, уже не помню где их взял взял, вроде бы пиратил платные, благо мои 14 лет были не так уж и давно, и интернет тогда уже был неплохой. Лекции по 4-6 часов пересмотрел их штук 50, от базового до повышеного уровня. Преподаватель начинал с самых самых азов, к примеру, лекция по переменным начиналась с разбора принципа работы оперативной памяти. Курсы те были по конкретному языку, вроде C#. Но затрагивалось в них всё, и благо в языке куча всего были и классы, и интерфейсы, и потоки.
    В общем я советую, именно видео лекции, лучше искать не на ютубе, там много уроков рассчитаны на опытного человека, лучше искать на сайтах по лекциям.
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать плавающий блок, чтобы он не выходил за границы экрана?

    NikitaTratorov
    @NikitaTratorov
    CTO
    • Если у него абсолютное позиционирование относительно body, можно указать right: 0
    • Второй вариант, вложить его в прозрачный div, растянутый на весь viewport с position: relative, тогда дочерний элемент не полезет наружу.
    • JavaScript. Вероятнее всего, на сайте со скриншота именно JS. Кстати, Popover в Bootstrap умеет подыскивать себе удобное местоположение, не уходя за границы экрана
    Ответ написан
    Комментировать
    Комментировать

  • Где искать информации о основах основ программирования?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Петцольд - "Код Тайный язык информатики"
    Таненбаум - "Архитектура компьютера"
    Таненбаум - "Современные операционные системы"
    Таненбаум - "Компьютерные сети"
    Ответ написан
    2 комментария
    2 комментария

  • Может кто-нибудь узнает книгу по вычислительной технике?

  • Как стянуть ветку из удаленного репозитория?

    Krasnodar_etc
    @Krasnodar_etc
    fundraiseup
    Почему не получается?
    Только после checkout надо pull сделать
    Ответ написан
    1 комментарий
    1 комментарий

  • Как стянуть ветку из удаленного репозитория?

    @aol-nnov 
    git fetch origin
git checkout -b <название ветки> origin/<название ветки>


    документация тут: https://git-scm.com/book/en/v2
    Ответ написан
    Комментировать
    Комментировать

  • Как оживить картинку?

    Stalker_RED
    @Stalker_RED
    В svg фоном ставите свою картинку, поверх домов размещаете контуры
    вот элементарный пример:


    А вот здесь можно без SVG редактора просто мышкой покликать по картинке чтобы получить координаты для контура.
    jsfiddle.net/Stalk/kLvnc9ru
    Ответ написан
    Комментировать
    Комментировать

  • Как оживить картинку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В Adobe Illustrator нарисовать поверх корпусов контуры и таблички и инфой, сохранить копию как.. SVG. Взять код и вставить в HTML. Отображать поверх растровой картинки.

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

    JS может обращаться по этим id к элементам SVG как к обычным HTML-элементам, и слушать на них события. По наезду мышки подсвечивать контур, показывать табличку ярче:
    Ответ написан
    2 комментария
    2 комментария

  • Как оживить картинку?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Насоветуют... Менять бэкграунды - забудьте. HTML area - тоже похоронить.

    Берёте вашу картинку. Поверх зданий создаёте векторный путь (обводите здания).
    Размечаете нарисованные пути как вам удобно, достаточно будет повесить класс для дальнейшей стилизации по ховеру + в дата-атрибуты значимую информацию для тултипа/клика/что там ещё. 
    <svg ...>
  <path class="area" data-id="1" d="..." />
  <path class="area" data-id="2" d="..." />
</svg>


    Инлайните получившуюся конструкцию на страницу. Фон можно в отдельном элементе и карту поверх, можно прямо в SVG зашить - не суть важно.

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

    По клику на путь - достаёте его `data-id` и выводите какую-либо информацию.

    Вот пример статьи, где описано более подробно.
    https://css-tricks.com/svg-map-rollovers/
    В конце интерактивный пример есть.
    Принципиальная разница с вашей задачей - вам изначально нужны пути без заливки и изображение под ними.
    Ответ написан
    Комментировать
    Комментировать