К основному контенту

Поиск по этому блогу

Изучаем JavaScript

Разработка игры на React + SVG

Получить ссылку
Facebook
X
Pinterest
Электронная почта
Другие приложения

января 04, 2020

Демо https://p9o4oqpmz7.csb.app/
Часть 1 https://habr.com/ru/post/350274/
Часть 2 https://habr.com/ru/post/350278/
Часть 3 https://habr.com/ru/post/350946/

react

Получить ссылку
Facebook
X
Pinterest
Электронная почта
Другие приложения

Архив

2023 2
- мая 1
- февраля 1

2022 3
2020 25
2019 45
2018 1
- апреля 1
2017 119
2016 11
- декабря 11

Показать больше Показать меньше

Ярлыки

работа со скриптами
разное
си
слайдер
тесты
шрифты
bootstrap
css
freecodecamp
git

gulp
ItBursa
JavaScript для верстальщика
jQuery
js
js30
learn.javascript.ru
loftschool
node.js
os
react
Rolling Scopes School
svg
Visual Studio Code
WordPress

Показать больше Показать меньше

Популярні записи

Как связать папку на компьютере и репозиторий на github

октября 23, 2017

На гитхабе есть репозиторий https://github.com/irinainina/codewars На компьютере папка codewars Задача: связать папку и репозиторий, чтобы изменения в папке (добавление или удаление файлов) отображались в репозитории Решение 0. Открываем Git Bash 1. Склонировать репозиторий $ git clone https://github.com/irinainina/codewars Клонирование В результате на рабочем столе появилась папка codewars 2. Перейти в эту папку $ cd learn.javascript.ru Или зайти в папку кликнув по ней мышкой и внутри папки открыть Git Bash 3. Проверить текущий статус $ git status 4. Добавляем в папку нужные файлы, удаляем ненужные 5. Отследить изменения (точка в конце обязательна) $ git add . 5. Закоммитить изменения $ git commit -m . или $ git commit -m "пишем, что изменили, чтобы не запутаться" 6. Залить изменения на гитхаб $ git push -u origin master Результат Было Стало

Продолжить чтение

Работа со скриптами. Урок 02. Создание слайдера

июня 05, 2017

Скрипт слайдера мы скачали в прошлом уроке командой $ bower i slick.js Также его можно найти в Google - первая ссылка по запросу slick http://kenwheeler.github.io/slick/ Преимущества слайдера: - поддерживает touch events - можно просматривать с телефона, листая пальцем - поддерживает responsive - можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному Хорошая практика - подключение скриптов из папки bower_components <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/slick-carousel/slick/slick.min.js"></script> <script src="js/custom.js"></script> Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются. Что касается стилей, которые находят...

Продолжить чтение

Как изменить язык репозитория на гитхаб

октября 24, 2017

Вопросы о том как указать язык репозитория на github время от времени появляются в сети, например Как сменить язык git-репозитория?, Как изменить язык программирования у репозитория GitHub?, Гитхаб неверно определяет язык репозитория По первым двум ссылкам вместо ответов почему-то рассказывают, что менять язык не нужно, даже если он определяется неверно, а по третьей рабочий способ описывается запутанно и не особо понятно. На самом деле язык меняется в несколько кликов. Приведу пример для JavaScript, остальные меняются аналогично. Открываем Блокнот, копируем в него две строки: * linguist-vendored *.js linguist-vendored=false Сохраняем с именем .gitattributes (точка вначале нужна) Загружаем файл в репозиторий, в котором нужно сменить язык Результат. Обратите внимание что язык репозитория JavaScript 30 определяется как HTML из-за того, что js-код лежит внутри файла index-html Было Стало Решение нашла здесь stackoverflow.com

Продолжить чтение

React-приложение Прогноз погоды на 5 дней

августа 22, 2019

Приложение, которое показывает прогноз погоды на 5 дней для определённого населённого пункта. 1. Регистрируемся здесь https://openweathermap.org/forecast5 На почту приходит API key 2. Создаём приложение my-weather-app Для этого выполняем команду create-react-app my-weather-app 3. Создаём компонент WeekContainer import React from 'react'; class WeekContainer extends React.Component { render() { return ( <div> <h1>Hello World!</h1> </div> ) } } export default WeekContainer; 4. Добавляем компонент WeekContainer в App import React, { Component } from 'react'; import './App.css'; import WeekContainer from './WeekContainer'; class App extends Component { render() { return ( <div className="App"> ...

Продолжить чтение

Сodewars лайфхаки

февраля 17, 2019

1. Как увидеть с какими аргументами запускаются функции в проверочных тестах? Просто верните этот аргумент function isValidIP(str) { return str; } 2. Как узнать какие ката уже пройдены, какие нет Для кат. которые ещё ни разу не проходились, будет написано Train , если кату уже пытался решать – Train Again . Если ката уже решена вами, под катой есть надпись View Solutions , и на странице решений можно посмотреть своё – My Solutions . Если ката не решена вами, надпись будет Unlock Solutions . Кроме того, решённые и нерешённые каты можно увидеть в своём профиле вкладка Solutions 3. kata scan Быстро увидеть пройденые ката из списка позволяет сайт https://auseika.github.io/kata-scan/ В левое окно копируем список ката и свой юзернейм из адресной строки codewars В правом окне появляются отметки о решённых и нерешённых ката

Продолжить чтение

Добавить hover-эффект svg background

ноября 01, 2017

Демо: https://codepen.io/irinainina/full/gXpRZB/ Код: https://codepen.io/irinainina/pen/gXpRZB Как изменить цвет svg-изображения при наведении, если svg добавлено в качестве фона через background-image. Все известные мне источники утверждают, что это невозможно. Ни одного решения данного вопроса (а задают его достаточно часто, например: Как заменить заливку svg при hover? SVG игнорирует hover, как его заставить работать? ) найти не удалось. Все предложенные решения Css SVG hover color ; How do I make an SVG image change color when hover предлагают или вставлять svg в html, что выглядит не очень хорошо с точки зрения понятности, читаемости, лаконичности html-кода, или использовать два svg с разным цветом для разных состояний элемента, но это лишние файлы и при наведении иконки меняются не мгновенно, может быть заметная задержка, когда изображение исчезает, а потом появляется другого цвета, а это, очевидно, не тот эффект, на который мы рассчитываем. Тем не менее, решение ес...

Продолжить чтение

Смена цвета у svg иконки при наведении

декабря 15, 2016

html <img width = 200 src = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" > css img:not(:hover) { transition: 2s; filter: saturate(0%); -webkit-filter: saturate(0%); } img:hover { transition: 1s; } Демо Источник

Продолжить чтение

Этапы загрузки компьютера

декабря 19, 2016

Давным-давно загрузка компьютера начиналась с установки и считывания перфоленты. Сейчас перфоленты ушли в прошлое, но проблема осталась. Заключается оно в том, что компьютер может выполнять только программы, находящиеся в оперативной памяти, а операционная система установлена на жестком диске. Решением проблемы является постоянная память ПЗУ или ROM установленная на материнской плате и записанная в ней программа BIOS, которая запускает установку операционной системы. ПЗУ не очищается при перезагрузке компьютера, а программа BIOS в ней записывается только один раз - на заводе изготовителе. Можно и перепрошить (перезаписать) BIOS, но если в процессе перезаписи отключится электричество, включить компьютер уже не удастся. Этапы загрузки компьютера

Примеры вопросов Rolling Scopes School

мая 20, 2019

Примеры вопросов: https://github.com/rolling-scopes-school/tasks/blob/2018-Q3/tasks/interview-corejs.md Типы данных в JS. Приведение типов ● Введение в типы данных ● Преобразование типов Что такое hoisting? ● hoisting Let vs var. Const ● Let vs var. Const Передача данных по ссылке и по значению. Примеры ● Передача данных по ссылке и по значению {a: 10} == {a: 10}. Что вернет код? ● Передача данных по ссылке и по значению Что такое this? ● Открытый бесплатный вебинар об ООП в JavaScript Apply, call, bind. Для чего используются? В чем отличия? ● Открытый бесплатный вебинар об ООП в JavaScript Замыкание. Приведите пример. ● Замыкания (Кантор) Sum(1)(2) ● Функции высшего порядка Prototype. Отличия proto от prototype. Пример наследования ● Конструкторы, прототипы Как создать объект без прототипа? ● Object.create(null) Методы массива, перебирающие элементы массива ● Методы массивов + стрелочные функции “hello world”.repeati...

Продолжить чтение

React. Как подключить css

июля 04, 2019

Подключаем Bootstrap Проходим по адресу https://www.bootstrapcdn.com/ Копируем ссылку Complete CSS: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css Заходим в папку publiс проекта, файл index.html и добавляем в блок head такой код <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> Подключаем Font Awesome Проходим по адресу: https://www.bootstrapcdn.com/fontawesome/ Копируем ссылку Font Awesome CSS https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css Заходим в папку publiс проекта, файл index.html и добавляем в блок head такой код <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Теперь мы можем в JSX добавлять элементам классы, которые присутствуют в Bootstrap, и элемент будет стилизоваться так, как это предполагают стили Bootstrap. Важно не забывать, что...

Продолжить чтение