Введите текст для поиска

воскресенье, 3 мая 2020 г.

Полезные сочетания клавиш и плагины для sublime text 3

Горячие клавиши sublime text 3 (Список будет пополняться)

  1. Перенос строк, т.е. переносить длинные строки, а не включать слайдер прокрутки внизу окна: Menu - > Preferences - > Settings - > word-wrap: true -> Ctrl+S -> Ctrl+W
  2. Сразу же Ctrl+S - сохранить файл
  3. Ctrl+W - закрыть вкладку
  4. Предположим, есть такой код:
    $('.portfolio').animate({"left": '+=330px'}, 1000);
    $('.iframe-wrapper').animate({"margin-left": '+=330px'}, 1000);
    $('.left').animate({"margin-left": '+=330px'}, 1000);
    $('.right').animate({"margin-left": '+=330px'}, 1000);

    Нам нужно выделить все значения "1000" в функциях и изменить их одним разом. Для этого ставим курсор на нужную последовательность символов или щелкаем однократно мышью по значение "1000". Затем нажимаем Ctrl+D, при каждом нажатии будет выделяться следующее вхождение искомой последовательности символов. Затем можно редактировать их оптом. 

Плагины для javascript в sublime text 3

  1. Console Wrap - позволяет выводить в консоль значения переменных, функций и тд. Работает в js, phyton, php. Для вывода переменной необходимо навести курсор на переменную (или выделить), затем нажать CTRL + SHIFT + Q. Строкой ниже появится вывод в консоль в формате "название переменной значение". Повторным нажатием на сочетание, меняем тип вывода на console.info, console.warn, console.error. Из контекстного меню по клику правой кнопкой доступно "закомментировать все логи", "удалить все закомментированные логи", "удалить все логи" и "показать все логи". 
  2. Sublime-HTMLPrettify - позволяет отформатировать код (отступы и тд). Для работы нужен установленный Node.js. В настройках нужно указать, где находится файл node.exe. Для форматирования кода нужно выбрать соответствующий пункт из контекстного меню. 
  3. ColorHighlighter - как понятно из названия, плагин предназначен для подсвечивания цветов. Обнаружив обозначение цвета, плагин подсвечивает его. Цвета в формате #aaa, он подсвечивает тонкой линией снизу. При фокусе курсора на цвет, он выделяется подсветкой фона. Также в контекстном меню можно выбрать цвет с палитры. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

суббота, 2 мая 2020 г.

Полезные замечания по js, css


  1. Если стили/скрипты не применяются, обновляйте страницу через Ctrl+F5. Браузер кеширует скрипты/стили, поэтому при их изменении, может не применять их. Html браузер не кеширует. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

четверг, 1 июня 2017 г.

Почему меня бесит PHP?

Добрый день, друзья!
Хотел бы рассказать, почему меня бесит php. Сейчас, насколько я знаю, все рекомендуют работать с базой данных через PDO. PDO  - это класс для работы с базой данных. У него есть некие методы и тд.
У меня установлен xampp в качестве локального сервера. Я не обновляю его каждую декаду года.
Беру некоторый код из интернета, пытаюсь запустить и получаю ошибку -

Как оказалось, $pdo -> bind_param и $pdo->bindParam методы не существует в моей версии PDO.
Ок, пытаюсь понять, как мне найти версию PDO, которая установлена на моём сервере, чтобы понять какие методы есть, а каких нет)). Вот ссылка в гуглопоиск -

  1. на русском - https://goo.gl/j7sZEl
  2. на английском - https://goo.gl/7PdDh2
Посмотрите все ссылки, я их пересмотрел. Ответа на свой вопрос не нашел. 
К примеру, посмотрите, как узнать версию javascript, которую вы используете? Вот ссылки:
  1. на русском - https://goo.gl/B9UlLx
  2. на английском - https://goo.gl/hc3Xms
Как вы сами видите, по первым ссылкам, уже видно ссылки на совместимость браузеров с версиями javascript, т.е. поскольку js-интерпретатор встроен в браузеры, вы как бы смотрите, какую версию javascript использует ваш браузер, а значит и вы. 
Я уже не говорю про куцые описания в документации методов PDO. Типичный пример, у вас есть таблица и объект, в который вы занесли все данные, например:
  1. Таблица 'users' в базе данныx, поля - 'id', 'name', 'lastName', 'email', 'pass' и тд. 
  2. Объект (или массив) без разницы вида 'ключ' -> 'значение', например {'id' = 1, 'name' = 'vasya', 'lastName' = 'pupkin', 'email' = 'some@mail.ru', 'pass' = 'kdjfkjdf' }
Я хочу сохранённые значения положить в соответствующие поля в базе данных. В js я бы это сделал, написав небольшой цикл и перебрав там все значения (например, из сохранённого объекта передавать значения в форму). Как это сделать в PDO - по-видимому дано знать только избранным, поскольку примеры, которые приводятся в документации - рассчитаны либо на очень умных, либо на инсайдеров.

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

воскресенье, 14 мая 2017 г.

Идеи приложений (для мобильных)

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

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

среда, 29 марта 2017 г.

Быстрая настройка Sublime text 3 для верстки сайтов

У кого канал толстый - видео 
Кто любит читать текст:

  1. Заходим в Сублайм текст 3. 
  2. Нажимаем Ctrl+Shift+P. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

пятница, 16 декабря 2016 г.

Изучаем JS - задания для начинающих на JS с ответами

Привет, друзья!
Поскольку надо прокачивать скил по js поискал учебные задания для новичков по javascript.
Нашел на одном англоязычном ресурсе - Задания по javascript. Кстати, если интересно, там есть задания не только по js, но и по jQuery, php, phyton, mySQL, C, C#, Java и тд. В общем практически по всем самым распространённым языкам программирования и некоторым фреймворкам.
В этой записи выложу перевод этих заданий.
Каждую запись в последствии сделаю ссылкой на её решение.

Задания по Javascript (сложность - основы)

  1. Вывести на экран текущую дату и время в указанном формате:
    Сегодня: Пятница
    Текущее время: 4PM:50:22 (pm - время от 0 часов до 12 часов дня, am - время соответственно с 12 часов дня до 24 часов)
  2. Написать программу для печати содержимого текущего окна. 
  3. Напишите программу для получения текущей даты:
    Формат вывода даты:
    м-д-год, м/д/год или д-м-год, д/м/год
  4. Напишите программу вычисления площади треугольника по трем сторонам, которые равны 5, 6 и 7. (Возможное усложнение - длину сторон получать от пользователя - мои примечания). 
  5. Напишите программу, которая периодически вращает надпись "w3resourse" в правом направлении, удаляя по одной букве с конца и добавляя по одной букве с начала. 
  6. Напишите программу, которая определяет, является ли год високосным или нет. 
  7. Напишите программу, которая находит в какие года между 2014 и 2050 воскресенье приходится на 1 января. 
  8. Напишите программу, которая загадывает случайное число в интервале от 1 до 10. После этого программа должна принимать ваш ответ, какое число загадано. Если пользователь угадал это число, программа должна отобразить "Хорошая работа!", если не угадал - "Не попал))". 
  9. Напишите программу, которая рассчитывает количество дней, которое осталось до следующего рождества (Возможные усложнения - можно сделать текстовое поле для ввода текущей даты и выпадающий список, в котором можно выбрать до какого праздника вы хотели бы посчитать дни).  
  10. Напишите программу для умножения и деления двух чисел, принимаемых через текстовые поля. Интерфейс программы ниже:
  11. Напишите программу для перевода температуры из/в градусов Цельсия и Фаренгейта. Формула для расчёта - c/5 = (f-32)/9 (где - c: градусы Цельсия, f: градусы Фаренгейта
  12. Напишите программу, которая показывает текущий адрес страницы. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

понедельник, 12 декабря 2016 г.

Изучаем JS - события, атрибуты

Привет, друзья!
В этот раз мне захотелось сделать так, чтобы у меня была кнопочка <button>, по клику на которой у нас бы:
1. Менялся весь цвет текста на странице
2. Менялся весь цвет фона на странице
3. Менялась надпись на кнопочке. Т.е. если у нас на странице - ночной режим, - > на кнопочке отображаем "Сделать день", в обратном случае на кнопочке - > "Включить ночь".
4. Вместе с заменой текста на кнопочке - надо, чтобы менялся и бекграунд и цвет надписи на кнопочке. Будет это всё выглядеть примерно так день - :
это день
А здесь - ночь
это ночь
Для реализации задуманного будем использовать следующее:

  • Стили текста будем оформлять с помощью соответствующих классов: для body class = 'day/night', для кнопки - class = 'btnDay/btnNight'. Можно было бы прописывать все свойства css вручную, но это же тупо, согласитесь)). Проще прописать класс css, и его динамически присвоить при помощи js. Также, если вам надо будет изменить позже оформление, то как и положено - вы идёте в css и меняете оформление, а не копаете js. 
  • getElementById () - чтобы взять конкретный элемент (в нашем случае это будет кнопочка)
  • getAttribute('class') - этим методом получим текущий класс элемента body
  • innerHTML - свойство элемента, меняем текст внутри кнопки
  • setAttribute('class', 'day') - устанавливаем новый атрибут class который равен в данном случае 'day'. 
  • И самое интересное - addEventListener() - метод элемента, прочитайте о нем отдельно, поскольку я так понял, это самый правильный метод назначения реакции на события (клик мышью, клик правой кнопкой, нажатие на клавиатуре и тд)
Все эти методы  и тд легко гуглятся. Если интересно, набирайте в методах - то, что написано до скобок, например для getElementById ()  - в поисковике - 'js getelementbyid',  для свойств соответственно просто  - для innerHTML - в поисковике - js innerhtml.
Итак, html


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая JS страница</title>
        <style>
            .day {
                color:#393337;
                background-color: white;
            }
            
            .night {
                color:#d9dbda;
                background-color: #252525;
            }

            .btnDay {
                color:#393337;
                background-color: white;
            }

            .btnNight {
                color:#d9dbda;
                background-color: #252525;
            }
            

            .wrap{
                background-image: none;
                z-index: 5;
            }


            .center-align{
                width:800px;
                margin:0 auto;
                text-align: justify;
                text-align: center;
                
            }
            p {
                text-align: justify;
                text-indent: 5%;
                font-size: 18px;
                margin-left: 25px;
                margin-right: 20px;
                
            }
        </style>
 </head>
 <body>
    
    <div class="wrap">
        <div class="center-align">
        
                <button id= 'changeColor' class = 'btnNight'>Включить ночь</button>
                <h1>Привет, тебе случайный посетитель!</h1>
                <p>Товарищи! постоянный количественный рост и сфера нашей активности требуют определения и уточнения систем массового участия. Разнообразный и богатый опыт начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Идейные соображения высшего порядка, а также укрепление и развитие структуры влечет за собой процесс внедрения и модернизации позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке новых предложений. Задача организации, в особенности же новая модель организационной деятельности способствует подготовки и реализации направлений прогрессивного развития.</p>

<p>Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание систем массового участия. Задача организации, в особенности же реализация намеченных плановых заданий позволяет оценить значение существенных финансовых и административных условий. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации существенных финансовых и административных условий. Таким образом рамки и место обучения кадров позволяет оценить значение направлений прогрессивного развития.</p>

<p>Задача организации, в особенности же реализация намеченных плановых заданий играет важную роль в формировании новых предложений. Таким образом дальнейшее развитие различных форм деятельности играет важную роль в формировании систем массового участия. Равным образом сложившаяся структура организации влечет за собой процесс внедрения и модернизации новых предложений. Таким образом начало повседневной работы по формированию позиции в значительной степени обуславливает создание форм развития. С другой стороны начало повседневной работы по формированию позиции позволяет оценить значение системы обучения кадров, соответствует насущным потребностям.</p>
        </div>  
    </div>
    
    <script src="test1.js"></script>
    </body>
</html>
и сам test1.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* 
* Суперфункция для изменения изменения класса body страницы
* и изменения надписи на кнопочке. 
*/


;'use strict';

var el, btn, elHasClass, bdClass;
el = document.body;  /*присваиваем класс day или night всему body, 
                            чтобы изменить фон и текст страницы*/
btn = document.getElementById('changeColor'); /* Дергаем кнопочку, чтобы менять текст на ней*/

 btn.addEventListener('click', function (event) {
    elHasClass = el.getAttribute('class'); // узнаем значение class у body


    bdClass = isDayOrNight (elHasClass); /* передаем предыдущий параметр, 
                                            чтобы перевести его в число*/
          switch (bdClass){
                case 0:
                case 1: // если класс пустой (по умолчанию) или день - day
                    el.setAttribute('class', 'night');
                    btn.innerHTML = 'Сделать день';
                    btn.setAttribute ('class', 'btnDay');
                    break;
                case 2: // если ночь - night
                    el.setAttribute('class', 'day');
                    btn.innerHTML = 'Включить ночь';
                    btn.setAttribute ('class', 'btnNight');
                    break;
                } 
                        }
                                               );


function isDayOrNight (status){
    if (status=== null){ // если у нас нет класса у body
        return 0;
        }
    else if (status=== 'day'){ // если у body класс равен day
        return 1;
    }
    else if (status=== 'night'){ // если у body класс равен night
        return 2;
    }
    else { // это просто защита от ошибок))
        return 'error';
    }
}
Предвосхищая вопросы - подсветка кода осуществлена с помощью сервиса hilite.me. Эта цветовая схема  - называется 'fruity'. Мне понравилось, чем-то sublime напоминает. 

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!