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

На гитхабе есть репозиторий 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"> <WeekContainer /> </div> ); } } export default App; 5. Для по

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

С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”.repeating(3) -> hello world hello

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

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. Важно не забывать, что

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