<optgroup> - Этот тег используется для группировки связанных параметров в раскрывающемся списке.
<abbr> - Этот тег используется для определения аббревиатуры или акронима.
<address> - Этот тег используется для определения контактной информации
<datalist> - Этот тег определяет список предопределенных параметров для элемента <input>
<wbr> - Этот тег указывает, где в тексте можно добавить разрыв строки при изменении размера;
<time> - Этот тег определяет удобочитаемую дату / время. Этот тег может помочь поисковым системам создавать более интеллектуальные результаты поиска.
<template> - Этот тег скрывает содержимое от клиента, содержимое можно сделать видимым и отображать позже с помощью JavaScript и отображать несколько раз.
<sup> - Этот тег определяет надстрочный текст. Надстрочный текст появляется на полсимвола над нормальной строкой
Алгоритмы и структуры данных, которые должен знать каждый программист.
📌 Алгоритмы сортировки 📌
Сортировка - это наиболее изученная концепция в компьютерных науках. Идея состоит в том, чтобы расположить элементы списка в определенном порядке. Хотя каждый основной язык программирования имеет встроенные библиотеки сортировки, они пригодятся, если вы знаете, как они работают. В зависимости от требований вы можете использовать любой из них.
Что еще более важно, нужно знать, когда и где их использовать. Вот несколько примеров, в которых вы можете найти прямое применение методов сортировки:
-Сортировка по цене, популярности и т. Д. На сайтах электронной коммерции
📌 Алгоритмы поиска 📌
Двоичный поиск (в линейных структурах данных)
Двоичный поиск используется для очень эффективного поиска в отсортированном наборе данных. Временная сложность O (log2N). Идея состоит в том, чтобы многократно разделить пополам часть списка, которая может содержать элемент, пока мы не сузим его до одного возможного элемента. Некоторые приложения:
Когда вы ищете название песни в отсортированном списке песен, он выполняет двоичный поиск и сопоставление строк, чтобы быстро вернуть результаты. Используется для отладки в git через git bisect
Поиск в глубину / ширину (в структурах данных Graph)
Приложения:
-Используется поисковыми системами для веб-сканирования -Используется в искусственном интеллекте для создания ботов, например шахматного бота. -Поиск кратчайшего пути между двумя городами на карте и многие другие подобные приложения
📌 regex и анализ строк 📌
Сопоставление / поиск по образцу - одна из самых важных проблем в компьютерных науках. По этой теме было проведено множество исследований, но мы укажем только два основных предмета, необходимых любому программисту.
Алгоритм KMP (сопоставление строк)
Алгоритм Кнута-Морриса-Пратта используется в тех случаях, когда нам нужно сопоставить короткий шаблон с длинной строкой. Например, когда мы Ctrl + F ключевое слово в документе, мы выполняем сопоставление с образцом во всем документе.
Регулярное выражение (анализ строк)
Часто нам приходится проверять строку, анализируя заранее заданное ограничение. Он широко используется в веб-разработке для синтаксического анализа и сопоставления URL-адресов.
📌 Экспонентация 📌
Допустим, вы хотите вычислить 2 в 32 степени. Обычно мы выполняем итерацию 32 раза и находим результат. Что, если бы я сказал вам, что это можно сделать за 5 итераций?
Возведение в степень возведения в квадрат или возведение в степень двоичного возведения в степень - это общий метод быстрого вычисления больших положительных целых степеней числа в O (log2N). Мало того, этот метод также используется для вычисления степеней многочленов и квадратных матриц.
Пример использования:
Вычисление больших степеней числа чаще всего требуется при шифровании RSA. RSA также использует модульную арифметику наряду с двоичным возведением в степень.
JavaScript предоставляет удивительно гибкие возможности по работе с функциями: их можно передавать, в них можно записывать данные как в объекты, у них есть свои встроенные методы… Шаблон декоратора динамически расширяет (украшает) поведение объекта. Возможность добавления нового поведения во время выполнения достигается с помощью объекта Decorator, который «оборачивается» вокруг исходного объекта. Несколько декораторов могут добавлять или переопределять функциональность исходного объекта. Примером декоратора является управление безопасностью, где бизнес-объектам предоставляется дополнительный доступ к привилегированной информации в зависимости от привилегий аутентифицированного пользователя. Например, менеджер по персоналу приступает к работе с объектом сотрудника, к которому добавлена (то есть украшена) запись о зарплате сотрудника, чтобы можно было просматривать информацию о зарплате.
Декораторы обеспечивают гибкость статически типизированных языков, позволяя вносить изменения во время выполнения, а не наследование, которое происходит во время компиляции. Однако JavaScript - это динамический язык, и возможность расширения объекта во время выполнения встроена в сам язык. 🚀Вот пример использования декоратора в JavaScript: function User(name) { this.name = name, this.print = () => console.log(this.name) }
const jane = new User ('Jane Doe') jane.print() // 'Jane Doe'
function DecorateWithCity(user, city) { user.city = city user.print = function() { console.log (`${this.name} from ${this.city}`) } }
DecorateWithCity(jane, 'NewYork') jane.print(); //'Jane Doe from New York'
Что объединяет фотохостинг Pinterest и приложение для планирования Trello? Оба они написаны на JavaScript. Если английский — это основной язык современного мира, то JS — это основной язык современного интернета, ведь на нем написано большинство сайтов, которые вы посещаете каждый день.
Для тех, кто хочет погрузиться в разработку сайтов и веб-приложений SkillFactory запустили курс «Frontend-разработчик». За 6 месяцев обучения вы освоите HTML, CSS и Flexbox, кроссбраузерную и адаптивную верстку, JavaScript и React и добавите в своё портфолио 5 проектов; дополнительный модуль про soft skills поможет подготовиться к собеседованиям.
За время обучения вы создадите собственный сайт-визитку, разработаете аналог канбан-доски Trello и немного погрузитесь в backend.
🚀✅Каждому разработчику нужно постоянно тренировать свое мышление и приспасабливать её к алгоритмическому мышлению. Такого результата можно достигнуть периодично тренируясь в решении задач по программированию. Мы представим 5 задач для практики алгоритмического мышления.
1. Кумулятивная сумма - написать функцию, которая возвращает массив arr, гдe элемент под индексом i является суммойarr[0] + arr[1] + ... + a[i]
2. Последовательность Фиббоначи - написать функцию которая вовращает n - ый элемент последовательности, в которой каждый элемент равен сумме двух предыдущих элементов.
3. Сечение двух массивов - Даны два массива целых чисел arr1 и arr2, создайте функцию, которая возвращает массив, содержащий их общие элементы (без дубликатов).
4. Анаграмные строки - Даны 2 строки str1 и str2, состоящие только из строчных букв, создайте логическую функцию, которая проверяет, являются ли они анаграммами (состоящими из тех же букв с одинаковым количеством повторений)
5. Учитывая строку s_ и целое число k_, создайте функцию, которая разбивает ее на фрагменты по k_ символов (последний фрагмент может содержать меньше k_ символов, если необходимо)
🍪Что такое cookie? Файл cookie - это небольшой файл с максимальным размером 4 КБ, который веб-сервер хранит на клиентском компьютере.
После того, как cookie был установлен, все последующие запросы страниц повторно возвращают имя и значение cookie. Файл cookie может быть прочитан только из домена, из которого он был выпущен. Файл cookie, созданный пользователем, может быть виден только им, другие пользователи не могут видеть его значение. В большинстве веб-браузеров есть опции для отключения файлов cookie, файлов cookie третьей стороны или того и другого.
💻Что такое session? Session - это глобальная переменная, хранящаяся на сервере. Каждому сеансу присваивается уникальный идентификатор, который используется для извлечения сохраненных значений.
Каждый раз, когда создается сеанс, на компьютере пользователя сохраняется файл cookie, содержащий уникальный идентификатор сеанса, и возвращается с каждым запросом на сервер;
если клиентский браузер не поддерживает файлы cookie, в URL-адресе отображается уникальный идентификатор сеанса Значения сеанса автоматически удаляются при закрытии браузера. Если вы хотите сохранить значения постоянно, вам следует сохранить их в базе данных.
🍪Зачем и когда использовать файлы cookies. Файлы cookie позволяют нам отслеживать состояние приложения с помощью файлов, хранящихся на стороне пользователя; Путь, по которому хранятся файлы cookie, зависит от браузера.
💻Зачем и когда использовать Sessions. Для более безопасного хранения важной информации, такой как идентификатор пользователя, на сервере, где злоумышленники не могут смириться с ними. ***Сеансы используются для передачи значений с одной страницы на дpугую.*** он также используется, если вам нужна альтернатива файлам cookie в браузерах, которые не поддерживают файлы cookie.
Frontend-разработчики — пожалуй, самые востребованные IT-специалисты здесь и сейчас. Освоить фронтенд — не так уж сложно, особенно если есть хорошие учителя, удобная программа, наставники, кураторы и чат поддержки.
Образовательная экосистема GeekBrains от Mail.Ru Group набирает студентов на новый поток факультета Frontend-разработки для всех, кто хочет найти себя в IT!
Вы сделаете пять проектов для портфолио, получите год опыта frontend-разработки для вашего резюме (от GeekUniversity) и освоите престижную специальность. GeekBrains гарантирует трудоустройство после успешного окончания курса!
⚛️Как использовать события (events) в ReactJS.👨🏻💻 Для начала: Что такое Событие. - Событие - это все, что происходит в браузере. -Например: 1.Клики мышкой 2.Движение мышкой 3.Печать текста 4. Прокрутка страницы и так далее...
Синтаксис: В React - e те же самые события, что и в HTML: - click, - change - mouseover и т.д Но в синтаксисе они разнятся. - В React события пишутся в верблюжем регистре.(camelCase). - B React Обработчики событий пишутся внутри фигурных скобок.
//Обработка события в HTML <button onClick = "handleClick()"> Click </button>
//Обработка события в React <button onClick = {handleClick}> Click </button>
⚠️Памятка для JS Передавай аргументы как один объект и сделай коллег счастливыми. Все согласятся что довольно сложно разобратся в таком коде: const createUser = (username, date, isAdmin, isMod)=>{ //create user } createUser('Ivan', '16-02-2021', false, true);
А на примере ниже можно отчетливо в уме рассортировать аргументы по значениям. const createUser = ({username, date, isAdmin, isMod})=>{ //create user } createUser({ username:'Ivan', date: '16-02-2021', idAdmin: false, isMod: true }); ------------------------------------------------------------------------------------ Используйте это в вашем коде и порадуйте ваших коллег. ------------------------------------------------------------------------------------
PRE.AX — цифровая платформа, работает по модели Talent-as-a-Service. Мы оказываем IT-услуги силами молодых специалистов, которые работают под наблюдением опытных наставников.
Вечером, 25 февраля, мы начинаем отбор JUNIOR специалистов Front-end. Необходимы базовые знания HTML, CSS, JS и React.JS.
Всем участникам — много практики и разборов результатов выполнения заданий, финалистам — бонусы и скидки, победителю — бесплатная стажировка на платформе PRE.AX.
🚀RESTful API для фронтенд разработчика В двух из трех вакансиях для фронтеда требуют знания REST / RESTful API. Разберемся что это и в чем разница.
📄Что такое REST?
REST (Representational state transfer) — общие принципы организации взаимодействия приложения/сайта с сервером по HTTP. Сервер не запоминает состояние пользователя между запросами. В запросах передаётся информация, идентифицирующая пользователя (например токен) и параметры для выполнения операции.
⚠️Разница между REST и RESTful REST — архитектурный стиль, а RESTful это сервис который следует этому стилю. Т.е если у вас на сервере REST API, а на клиенте вы делаете запросы к этому API, то у вас RESTful приложение/сайт. Как это работает?
✅Взаимодействие с пользователем Веб-сайт Веб-сайт предоставляет визуальный и текстовый контент, который пользователь может просматривать и читать, но не влияет на его работу.
Веб-приложение В веб-приложении пользователь не только читает содержимое страницы, но также управляет данными с ограниченным доступом.
✅Аутентификация Веб-сайт Для информационных сайтов аутентификация не обязательна. Пользователя могут попросить зарегистрироваться, чтобы получать регулярные обновления или получить доступ к дополнительным параметрам.
Веб-приложение Веб-приложениям требуется аутентификация, поскольку они предлагают гораздо более широкий набор возможностей, чем веб-сайты.
✅Задача и сложность Веб-сайт Веб-сайт отображает собранные данные и информацию на определенной странице.
Веб-приложение функции веб-приложений намного выше и сложнее по сравнению с веб-сайтом
✅Предназначен для Веб-сайт Bеб-сайт в основном состоит из статического контента. Он общедоступен для всех посетителей
Bеб-приложение Bеб-приложение предназначено для взаимодействия с конечным пользователем
✅Компиляция Веб-сайт Предварительная компиляция веб-сайта не требуется.
Bеб-приложение Перед развертыванием веб-приложение необходимо предварительно скомпилировать.
📦 Что такое npm? Гайд по Node Package Manager для начинающих. Как установить, опубликовать и проверить JavaScript-пакеты на уязвимость с помощью npm – менеджера пакетов Node.js. Программная платформа Node.js появилась в 2009 г., и с тех пор на ней были построены сотни тысяч приложений. Одной из причин успеха стал npm – популярный пакетный менеджер, позволяющий JS-разработчикам быстро делиться пакетами. На момент написания статьи в npm содержится 1.3 млн пакетов с общим количеством скачиваний 16 млрд. Подробнее...
