Category: Уроки програмування

Як завантажувати CSS файли асинхронно

Одним з найбільш ефективних способів підвищити продуктивність та швидкість завантаження сторінок сайту є асинхронне завантаження CSS файлів. При використанні цього способу не буде відбуватися зайва затримка для завантаження сторінки через рендеринг цих файлів. Затримка пов’язана з тим, що за замовчуванням браузери завантажують підключені CSS-файли синхронно – зупиняючи весь рендеринг сторінки, поки кожен CSS-файл завантажується та аналізується. Звичайно, хоча б невелика частина CSS стилів сайту повинна бути завантажена до того, як сторінці буде дозволено розпочати рендеринг....

Уроки JavaScript – приклади використання випадковості

В JavaScript досить часто потрібно використовувати випадковість або випадкове поводження. Найпростішим прикладом буде отримання випадкового числа для проведення жеребкування. Або, наприклад, уявити можливий результат кидка монети. Але існує багато різних видів випадковості, і для різних додатків потрібно підбирати свій вид випадкового результату.     Найпростіша випадковість Найпростішою формою випадковості, яка вбудована в JavaScript, є функція Math.random(). Щоб побачити її в дії, наберіть в консолі браузера (виклик консолі Ctrl+Shift+I) функцію: Math.random(); //0.2735944957535754 – приклад результату  ...

Уроки PHP – як робити сортування даних в масиві

В сьогоднішньому уроці ми розглянемо основні моменти, які стосуються сортування даних масиву в PHP. Ви дізнаєтеся найбільш важливі вбудовані в PHP функції, які призначені для сортування масивів.     Введення в сортування масивів в PHP Досить часто доводиться сортувати дані в масивах. Можливо, вам потрібно це робити в алфавітному або числовому порядку, в порядку зростання або зменшення. Для цього PHP надає декілька корисних функцій. У наступному розділі ми покажемо вам, як використовувати ці функції. Для...

Основні моменти для безпеки HTML і CSS

Якщо ви розробник і пишете на HTML/CSS, вам потрібно знати основні моменти, які стосуються безпеки. Хтось може сказати, що HTML і CSS не можуть бути об’єктом атаки зловмисників, але з розвитком веб-технологій у них для атаки з’являються все більше можливостей. В сьогоднішній статті ми розглянемо найважливіші моменти, на які слід звернути увагу кожному розробнику. Вони допоможуть слідувати кращим методикам безпеки та уникнути вразливостей.     Кращі практики для безпеки Ретельно перевіряйте залежності, використовувані в вашому...

Ознайомлення з операторами AND і OR в MySQL

Із сьогоднішньої практичної статті ви дізнаєтеся, як за допомогою операторів AND і OR в MySQL об’єднувати кілька логічних виразів для фільтрації результатів в базі даних.     Оператор AND в MySQL Оператор AND (І) – це логічний оператор, який об’єднує два або більше логічних вирази і повертає true (істина), тільки якщо обидва вирази мають значення true. Оператор AND повертає false (хиба), якщо одне з двох виразів оцінюється як false.   Нижче представлений синтаксис оператора AND:...

Що таке ключове слово this в JavaScript

Якщо вас бентежить ключове слово this в JavaScript, знайте, що ви не самотні. Спочатку це бентежить усіх програмістів. Але це не означає, що вам не потрібно розібратися в цьому. Ключове слово this використовується так часто в підручниках і в коді JavaScript, що вам потрібно в ньому розібратися. Як тільки ви освоїте ключове слово this, ви зрозумієте, що це набагато простіше, ніж ви думали. З цієї статті ви дізнаєтеся, що таке ключове слово this в JavaScript,...

Основи чуйної (responsive) типографії у веб-дизайні

Адаптивний або чуйний веб-дизайн – це не тільки стовпці, сітки, картинки та іконки. Все це не матиме сенсу без текстового контенту. Як одного разу сказав Білл Гейтс: «Контент – це король». Тому, адаптивна типографія – це той важливий фактор, який не повинен залишати поза увагою кожен веб-дизайнер і веб-розробник. У сьогоднішній статті ми обговоримо основи створення адаптивної веб-типографіки, а також ті фактори, які впливають на це.     Основи типографії Гарна типографія – це правильний...

Як працювати з базою даних MySQL в PHP

В сьогоднішній практичній статті ми розглянемо все, що потрібно знати початківцям про роботу з базою даних MySQL в PHP. Тут ви знайдете докладну інформацію про те, як створити базу даних, як підключатися до бази даних, як вставляти, оновлювати і видаляти дані в базі даних MySQL за допомогою PHP.     Основи по роботі з базою даних MySQL в PHP Як ви знаєте, за допомогою PHP ви можете створювати динамічний контент сайту. Динамічний контент не обов’язково...

Як домогтися багатоколірного фону тільки за допомогою CSS

Вже понад 5 років в веб-дизайні лідируючі позиції займає плаский дизайн (flat design). Після того, як в 2010 році корпорація Microsoft випустила ОС Windows 8, в якій користувацький інтерфейс витриманий в стилі плаского дизайну, цей дизайн почав стрімко набирати популярність. Flat design представлений у вигляді протилежності реалізму і, за задумом, повинен підкреслювати ефект «чарівної простоти» і витонченості. Крім цього плаский дизайн привніс барвистість в традиційний дизайн. Сьогодні яскраві кольори відіграють основну роль у всіх сучасних...

Ознайомлення з оператором WHERE в MySQL

У сьогоднішньому уроці ми розглянемо на практиці те, як використовувати умову WHERE в операторі SELECT для фільтрації рядків з набору результатів в MySQL.     Основи використання умови WHERE в MySQL Умова WHERE дозволяє задати умову пошуку для рядків, які повертаються в запиті. Нижче показаний синтаксис умови WHERE: SELECT select_query FROM table_name WHERE condition;     Умова condition – це комбінація одного або декількох тверджень, які використовують логічний оператор AND, OR і NOT. В MySQL...

Як використовувати HTML форми в PHP

У сьогоднішній практичній статті ми розглянемо все, що потрібно знати початківцям про HTML форми в PHP. Тут ви знайдете докладну інформацію про форми: основи використання, компоненти форми, обробку помилок за допомогою PHP, а також вихідний код повністю робочої форми.     Основи використання форм в PHP Якщо ви вже деякий час займаєтеся веб-програмуванням, ви, ймовірно, вже зустрічалися з формами. Форми – це спеціальні компоненти, які дозволяють відвідувачам вашого сайту взаємодіяти з сайтом або додатком. Форми...

Як домогтися адаптивності картинок з допомогою CSS

У сьогоднішній статті ми на практиці розглянемо техніку, за допомогою якої зможемо досягти адаптивності для картинок на своєму сайті. Ми розглянемо 2 способи, які дозволять зробити картинки адаптивними з використанням невеликої кількості CSS.     Побудова адаптивного макета картинок Для початку припустимо, що у нас є така проста HTML розмітка: <div class="images-box"> <a href="image-URL"> <figure> <img src="image-URL" alt="альтернативний текст картинки"> </figure> </a> <!-- наступні картинки ... --> </div>     На великих екранах наша галерея...

Ознайомлення з оператором ORDER BY в MySQL

У сьогоднішньому уроці ми розглянемо на практиці те, як сортувати результати вибірки з бази даних за допомогою оператора ORDER BY в MySQL.     Основи оператора ORDER BY в MySQL Коли ви використовуєте інструкцію SELECT для запиту даних з таблиці, результуючий набір не сортується. Це означає, що рядки в наборі результатів можуть бути в будь-якому порядку. Щоб впорядкувати набір результатів, вам потрібно додавати умову ORDER BY в інструкцію SELECT. Нижче показаний синтаксис умови ORDER BY:...

Ознайомлення з оператором SELECT в MySQL

З даного уроку ви дізнаєтеся, як використовувати базову форму оператора SELECT в MySQL для запиту даних з таблиці. Ви можете використовувати даний оператор, наприклад, при роботі з інструментом для баз даних phpMyAdmin.   Оператор SELECT дозволяє зчитувати дані з однієї або декількох таблиць бази даних. Інструкція SELECT в MySQL має наступний синтаксис: SELECT select_query FROM table_name;   Тепер давайте розберемо кожну складову даного запиту. Спочатку використовується ключове слово SELECT. Це називається ключовим словом, тому що...

Як створити прості кнопки за допомогою CSS3

У сьогоднішньому уроці ми на практиці зробимо кілька класних, але простих, кнопок за допомогою CSS3 стилів. Ви можете їх використовувати для красивого оформлення користувацького інтерфейсу своїх проектів. Отже, приступимо…   Крок №1 – HTML код (каркас) Каркасний HTML-код дуже простий, ми створимо 3 тега для посилання (<a>) з класом button, і, оскільки ми будемо використовувати три різних колірних стилів, дамо кожному посиланню свій клас для кольору. <html> <body> <div id="buttons"> <a href="#" class="button green">кнопка 1</a>...