Блог о продвижении сайтов. Заметки по SEO для личного использования и экспериментов в поиске.
6 июня 2025 г.
10 июля 2021 г.
5 июня 2021 г.
Сетка CSS-Grid
Сетка CSS-Grid
https://tympanus.net/codrops/css_reference/grid/#section_grid-lines
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
Create Button
https://tympanus.net/Development/CreativeButtons/
Media Queries
https://tympanus.net/codrops/css_reference/media-queries/
Media Queries Level 4
https://www.w3.org/TR/mediaqueries-4/#media-types
Модуль макета таблицы сетки CSS Уровень 1
Редакторский проект, 24 марта 2017 г.
https://drafts.csswg.org/css-grid/#order-accessibility
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Полное руководство по CSS-сетке
https://tympanus.net/codrops/css_reference/grid/#section_grid-container
Основные понятия компоновки сетки
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Области шаблона сетки
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
Реализация общих макетов с использованием CSS Grid Layout
3 июня 2021 г.
Hardening Wordpress
Hardening Recommendations
Caution: The following recommendations are for server administrators with knowledge of how these files work. If you do not feel comfortable with these suggestions, we recommend using a website firewall that includes virtual hardening instead.
4.1 - Basic .htaccess Configurations
The .htaccess file is what most vendors will modify when they say they are hardening your environment.
This critical configuration file is specific for web servers running on Apache. If you’re running your WordPress instance on a LAMP stack using Apache, then we recommend hardening your site by updating your .htaccess file with the following rules.
Note
Some of the rules below are dependant on the version of Apache you are running. In those cases, we have included instructions for both versions 2.2 and 2.4 of Apache Server.
/.HTACCESS
Rule Explanation
- # BEGIN WordPress
- # Rewrite rule
- <IfModule mod_rewrite.c>
- RewriteEngine On
- RewriteBase /
- RewriteRule ^index\.php$ - [L]
- RewriteCond %{REQUEST_FILENAME} !-f
- RewriteCond %{REQUEST_FILENAME} !-d
- RewriteRule . /index.php [L]
- </IfModule>
- # END WordPress
Rewrite Rule:
This rule is generated by WordPress if it has write access to your server, most notably to fix issues with pretty permalinks.
If it isn’t at the top of your file, place at the top of your .htaccess file. Any other rules should go after the # BEGIN WordPress and # END WordPress statements.
- # Block IPs for login Apache 2.2
- <files /wp-login.php>
- order deny, allow
- allow from MYIP
- allow from MYIP2
- deny from all
- </files>
- # Block IPS for login Apache 2.4
- <Files "wp-login.php">
- Require all denied
- </Files>
Restrict Logins to IP Range
This rule restricts access to wp-login.php to an IP, protecting you from unauthorized login attempts in other locations. Even if you do not have a static IP, you can still restrict logins to your ISP common range.
Use this same entry on other authenticated URLs that you’d like to restrict, including /wp-admin. If you are using a dynamic IP, you can refer to our instructions: How to lock down WordPress Admin Panel with a dynamic IP
- # Protect wp-config Apache 2.2
- <files wp-config.php>
- order allow,deny
- deny from all
- </files>
- #Protect wp-config Apache 2.4
- <Files "wp-config.php">
- Require all denied
- Require ip 1.1.1.1
- </Files>
Protect wp-config.php
This rule restricts visitors from accessing your wp-config.php file, which contains sensitive information about the database, including name, host, username and password. This file is also used to define advanced settings, security keys and developer options.
- # Prevent directory browsing
- Options All -Indexes
Prevent Directory Browsing
This rule prevents attackers from viewing the folder contents of your website, restricting the information they have to exploit your website.
- # Prevent image hotlinking
- RewriteEngine on
- RewriteCond %{HTTP_REFERER} !^$
- RewriteCond %{HTTP_REFERER} \
- !^http://(www\.)example.com/.*$ [NC]
- RewriteRule \.(gif|jpg|jpeg|bmp|png)$ - [NC,F,L]
Prevent Image Hotlinking
This rule prevents other websites from using images hosted on your website. While hotlinking won’t get your site hacked, it can result in a damaging exploitation of your server resources. Change example.com to your website.
- # Protect htaccess Apache 2.2
- <files ~ "^.*\.([Hh][Tt][Aa])">
- order allow, deny
- deny from all
- satisfy all
- </files>
- # Protect htaccess Apache 2.4
- <FilesMatch "^.*\.([Hh][Tt][Aa])">
- Require all denied
- </FilesMatch>
Protect .htaccess
This rule prevents attackers from accessing any files that start with “hta” - this ensures that .htaccess files are protected in all of the directories of your server.
- # Block Includes
- <IfModule mod_rewrite.c>
- RewriteEngine On
- RewriteBase /
- RewriteRule ^wp-admin/includes/ - [F,L]
- RewriteRule !^wp-includes/ - [S=3]
- RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
- RewriteRule ^wp-includes/js/tinymce/langs/.+\.php \
- - [F,L]
- RewriteRule ^wp-includes/theme-compat/ - [F,L]
- </IfModule>
Block Includes
This rule blocks hackers from inserting malicious files into any of the four primary folders used for includes:
- /wp-admin/includes/
- /wp-includes
- /wp-includes/js/tinymce/langs/
- /wp-includes/theme-compat/
/WP-INCLUDES/.HTACCESS
/WP-CONTENT/UPLOADS/.HTACCESS
Rule Explanation
- # Backdoor Protection Apache 2.2
- <Files *.php>
- deny from all
- </Files>
- # Backdoor Protection Apache 2.4
- <FilesMatch ".+\.php$">
- Require all denied
- </FilesMatch>
Prevent PHP Backdoors
This rule prevents hackers from placing PHP backdoors in the /wp-includes/ and /wp-content/uploads/ folders, two popular locations for malicious file uploads.
4.2 - Application Configurations
WP-Config
The wp-config.php file is a very important configuration file containing sensitive information about your WordPress site, including database connections.
If the wp-config.php file does not exist in the root folder, WordPress will automatically look for this file in the folder above the root directory. Moving this file out of the root folder prevents wp-config.php from being accessible from the Internet.
Salts & Keys
The wp-config file includes a section dedicated to authentication salts and keys. These salts and keys improve the security of cookies and passwords that are in transit between your browser and the web server.
You can set up your keys by including or editing these lines after the other define statements in your wp-config.php file:
define('AUTH_KEY', 'include salt here');
define('SECURE_AUTH_KEY', 'include salt here');
define('LOGGED_IN_KEY', 'include salt here');
define('NONCE_KEY', 'include salt here');
You can easily generate your salts by navigating to the wordpress.org salt generator or using the reset salts + keys option in our WordPress Plugin.
Important
- If you suspect that the secret keys have been compromised, regenerate them as soon as possible. All users will need to re-authenticate.
Disable File Editing
By default, file changes can be made through Appearance > Editor from the WordPress dashboard.
You can increase your WordPress security by disabling file editing from the dashboard. This prevents an attacker from changing your files through the backend or wp-admin. You will still be able to make changes via SFTP/SSH.
To disable file editing from the dashboard, include the following two lines of code at the end of your wp-config.php file:
## Disable Editing in Dashboard
define('DISALLOW_FILE_EDIT', true);
28 мая 2021 г.
УПРАВЛЕНИЕ ПРОЕКТОМ
УПРАВЛЕНИЕ ПРОЕКТОМ
Менеджер проекта
1. Стратегия, товар, целевая аудитория
Разработка стратегии интернет-магазина,
Анализ и сегментация целевой аудитории,
Формирование ассортимента
Работа с поставщиками
2. Сайт как площадка продаж
Выбор платформы для e-commerce
Автоматизация и интеграция интернет-магазина
Юзабилити для e-commerce
Текстовый контент: цели и задачи
3. Операционные процессы в e-commerce
Организационная структура интернет-магазина и KPI в e-commerce
Организация и оптимизация бизнес-процессов
Юридическое сопровождение
Логистика и системы платежей
Финансы и управленческий учет в е-сommerce
4. Digital-продвижение интернет-магазина
Стратегия продвижения интернет-магазина
Инструменты интернет-продвижения для e-commerce
Аналитика интернет-магазина
Повышение лояльности клиентов: сайт и колл-центр
МАРКЕТИНГ
Интернет-маркетолог
1. Основы маркетинга
Анализ и сегментация целевой аудитории
Анализ конкурентов и формирование УТП
2. Сайт и контент
Контент на сайте: тексты и графика
Юзабилити сайта
Эффективные посадочные страницы
3. Удержание пользователей
Контент-маркетинг
Email-маркетинг
Social Media Marketing (SMM)
4. Инструменты привлечения трафика на сайт
Контекстная реклама
Поисковое продвижение (SEO)
Медийная (баннерная) реклама
CPA и партнерский маркетинг
Таргетированная реклама
Медиапланирование
5. Управление интернет-маркетингом
Веб-аналитика
Стратегия продвижения в интернете
планирование рекламной кампании
РАЗРАБОТКА
Поддержка Fron-End
1. Верстка
Базовая HTML-разметка, CSS
2. Основы HTML-разметки
Блочные и инлайновые элементы
Семантическая разметка документа
Управление блоков в потоке
Позиционирование блоков
3. Таблицы стилей CSS
CSS селекторы
Стили текста и оформления
Стили позиционирования, отступы и размеры блоков
4. Приближение результата верстки к макету
Работа с Adobe Photoshop, вёрстка в точном соответствии с макетом
Особенности подготовки изображений для верстки
5. Организация работы над макетом и кодом
Процесс верстки сайта
Профессиональное оформление кода
Возможности JavaScript
АДМИНИСТРИРОВАНИЕ
Управление Back-End
GDRP - General Data Protection Regulation
Общий регламент по защите данных
рекомендации от ПС:
https://support.google.com/adsense/answer/7670312
https://support.google.com/analytics/answer/3379636?hl=ru
Закон должен соблюдаться во всех европейских странах (но также применяется к компаниям, не входящим в ЕС, которые имеют пользователей в ЕС). Несоблюдение этих рекомендаций в конечном итоге может привести к штрафу до 20 миллионов евро или 4% от годового оборота - в зависимости, что окажется большим.
Нужно приложить немного больше усилий, чтобы привести свои ресурсы в соответствие к правилам GDRP https://gdpr-info.eu/chapter-3/
Различные программные средства для ВВП
- Контрольный список GDPR (GDPRchecklist.io)
- Инструмент « Устранение неполадок» (CNIL.fr)
- Инструменты соответствия ВВП в WordPress (WordPress.org)
- Соответствие GDPR Формы WordPress (NinjaForms.com)
- WordPress, Gravity Forms и GDPR Compliance (GravityForms.com)
- Создание TYPO3 GDPR-ready (Typo3.org)
В соответствии с GDPR компании, занимающиеся обработкой определенных видов данных, должны назначить сотрудника по защите данных (DPO) , именованного лица с юридической ответственностью за соблюдение конфиденциальности организации, включая PbD. Это требование не зависит от размера компании, а это означает, что даже самый маленький бизнес, занимающийся некоторыми видами обработки данных, должен назначить DPO.
- Сообщите пользователю: кто вы, почему вы собираете данные, как долго и кто их получает.
- Получите четкое подтверждение, прежде чем собирать какие-либо данные.
- Позвольте пользователям получить доступ к их данным и взять их с собой.
- Позвольте пользователям удалить свои данные.
- Сообщите пользователям, если происходят нарушения данных.
См. Этот приятный инфографик из Европейской комиссии
Правила обработки персональных данных - EU GDRP https://ec.europa.eu/justice/smedataprotect/index_en.htm
Анонимизация IP-адресов в Analytics будет ущербной практикой, поскольку все данные пользователя тоже будут утрачены. Вместо этого на WebmasterWorld рекомендуют использовать маскировку IP.
- статья от одного из разработчиков этого закона:
https://techblog.bozho.net/gdpr-practical-guide-developers/
- обсуждение и вопросы на ycombinator:
https://news.ycombinator.com/item?id=16257277
- пример реализации политики конфиденциальности Oath:
https://policies.oath.com/ie/uk/oath/privacy/topics/thirdparties/index.html#appspartners
https://policies.oath.com/ie/uk/oath/privacy/adinfo/index.html
https://policies.yahoo.com/ie/uk/yahoo/ip/index.htm
ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ И РЕСУРСЫ
- « Конфиденциальность по дизайну », Комиссар по информации и конфиденциальности в Онтарио. Введение.
- « Конфиденциальность по дизайну », руководство Великобритании ICO по PbD, характерное для Великобритании, но на простом английском языке.
- Проведение оценок воздействия на неприкосновенность частной жизни: Свод практических правил »(PDF), Управление комиссара информации
- Конфиденциальность в мобильных приложениях: руководство для разработчиков приложений »(PDF), отдел информации
- « Защита данных: лучшие правила для малого бизнеса », Европейская комиссия Обзор ВВП.
- « Руководство по разработке конфиденциальности для разработки мобильных приложений », GSMA
27 мая 2021 г.
HTML, CSS and JavaScript resources
HTML, CSS and JavaScript resources
This document is available from bit.ly/webdevres.
For information about Progressive Web Apps, see bit.ly/pwa-resources.
Browser tools
Chrome Dev Tools
Built into Chrome. Edit HTML, CSS and JavaScript live, or run code in the console.
Firefox Developer Tools
Firefox developer tools: choose Web Developer from the Tools menu.
Microsoft Edge Developer Tools (F12) Tools
Developer tools for Internet Explorer.
Opera Dragonfly
Opera tools.
Documentation, tutorials and help
Codebar
Simple, low-bandwidth tutorials for HTML, CSS, JavaScript and other languages.
Udacity
Well designed interactive courses on many web topics, including:
• Intro to Progressive Web Apps
20 things I learned about the Web
Gentle introduction to web technologies – in a good-looking online ‘book’.
Khan Academy
Great place to start with computer science.
Code Academy
Simple and clearly structured interactive lessons in HTML, CSS and JavaScript.
Code Wars
Interactive learning for JavaScript and other languages.
Web Design in 4 Minutes
(Very) short introduction to techniques for getting started on the web.
JavaScript in 14 Minutes
Interactive introduction to JavaScript.
stackoverflow.com
Great place to ask (and find high quality answers to) web-related questions. If you have a question, make sure to search first in case it’s already been asked.
web.dev
Guidance, analysis and a blog. (Supersedes Web Fundamentals.)
Web Fundamentals
Best practice for multi-device web development. (Supersedes HTML5 Rocks — and much of this is superseded by web.dev.)
html5rocks.com and updates.html5rocks.com
(Deprecated and mostly ported to Web Fundamentals or web.dev.) Tutorials, demos and updates of all that is (or was) new in HTML, CSS and JavaScript.
w3schools.com
I like this site, but bear in mind the warnings at w3fools.com.
MDN
Mozilla Developer Network: demos, tutorials and reference documentation localized into dozens of languages and maintained by hundreds of volunteer contributors and Mozilla staff.
devdocs.io
Downloadable documentation for core web technologies.
diveintohtml5.info
One-of-a-kind, well-written how-to and history for everything HTML5.
html5doctor.com
HTML, CSS and JavaScript articles and tutorials.
Quirksmode
‘For all your browser quirks’. In depth articles on a range of topics.
Sitepoint
Reference documentation by a respected book publisher.
MSDN
HTML, CSS, JavaScript and other documentation from Microsoft.
CSS Tricks
In-depth articles about CSS.
Smashing Magazine
Multi-device web design, tools and techniques.
Chrome Developer Docs Team Learning Materials
A gold mine: links to resources, each categorised and rated.
html5search.com
Site built by Googler Paul Kinlan to search reputable web documentation
webplatform.org
Cross-industry effort to build web documentation. No longer maintained, but still has some useful information.
girldevelopit.com/materials
Introductory web concept workshop materials.
Front-end cheatsheets
Compilation of cheatsheets.
News and newsletters
Frontend Focus
Weekly roundup of what's new for HTML, CSS and JavaScript.
JavaScript Weekly
JavaScript news, articles and videos.
HTML
High performance HTML
HTML is the core language of the web, but often neglected. (Shameless self promotion — I wrote this.)
HEAD: A free guide to <head> elements
Includes discussion of internationalisation and lots of links to other resources.
W3C list of elements
Comprehensive, up-to-date list of elements, attributes and events, with examples.
CSS
The 30 CSS Selectors You Must Memorize
Examples, demos and compatibility.
Default browser stylesheets
Default styles for HTML elements.
JavaScript
javascript.info
JavaScript tutorial — straightforward but detailed.
Basic JavaScript
Well-written introductory article.
plainjs.com
Vanilla JS alternatives to jQuery and other library functions.
ES2015+ cheatsheet
Great overview of new and recent JavaScript features, most of which are well supported, and many of which make code more expressive and understandable.
Browser capability
caniuse.com
Mobile and desktop browser capabilities, with links to documentation.
chromestatus.com
Web platform feature support and examples.
blink-dev
Want to know what’s coming to Chrome? Blink is Chromium’s rendering engine.
status.modern.ie
Internet Explorer status and roadmap.
WebKit Feature Status
What's supported by Safari and what's in development.
Kangax
ECMAScript compatibility tables.
whatwebcando.today
Stuff that your browser can do, with links to demos and information about browser support.
mobilehtml5.org
Capability information for mobile browsers.
html5please.com
HTML, CSS and JavaScript features: what’s in flux, what’s flakey, and what you can do about it.
css3test.com
Tests your browser’s CSS3 support.
Robohornet
Benchmark your browser using real-world examples, not raw JavaScript performance.
Website performance data
HTTP Archive
'We periodically crawl the top sites on the web and record detailed information about fetched resources, used web platform APIs and features, and execution traces of each page. We then crunch and analyze this data to identify trends — learn more about our methodology.'
Web Almanac: library and framework usage
Annual HTTP Archive roundup — note that this is only for homepages.
Chrome User Experience Report (CrUX)
'User experience metrics for how real-world Chrome users experience popular destinations on the web.'
Alexa Internet
The world's most popular websites, listed by country and category, based on data from a browser toolbar/extension. Owned by Amazon, not to be confused with the Amazon Alexa assistant AI.
Stats, archives...
Wikipedia browser usage share
Comparison of statistics from various sources.
Statcounter
Charts of browser share organised by territory, platform, browser version and other metrics.
App Annie
Analytics and stats for native apps.
Sensor Tower
App data.
Building for billions
Data and resources for emerging markets.
HTTP Archive
Trends in web technology, interesting stats, website performance.
Wayback Machine
Archive of over 400 billion web pages.
Online code editors
JS Bin
Edit HTML, CSS and JavaScript live – then save and link to your work.
jsFiddle
Online code playground for HTML, CSS and JavaScript.
CodePen
Front-end playground and showcase.
Mozilla Thimble
Edit and publish web pages online – from the creators of Firefox.
Codecademy
A good place for absolute beginners.
Google code playground
Examples of Google and JavaScript APIs.
Hosting
Creating and Hosting a Personal Site on GitHub
Introduction to Git, GitHub, GitHub Pages and Jekyll.
Validators, code checkers, tools...
W3C HTML validator
HTML validation tool.
HTMLHint
HTML analysis tool.
W3C CSS validator
CSS validation tool.
CSSLint
CSS linting, editor plugins available.
CSS Beautify
Open source tool for formatting CSS, from Sencha Labs.
ESLint
JavaScript linting utility with plugins for editors such as Sublime and build tools such as Gulp and Grunt.
JSHint
JavaScript linting tool (much like JSLint, but more configurable, with editor and Grunt plugins available).
JSONLint
JSON validator.
JS Beautifier
Open source tool for formatting JavaScript and HTML.
Testing
Lighthouse
Open source automated testing tool, available from the Chrome DevTools Audit panel, as a Chrome extension, or as a command line tool.
Webpage Test
Cross browser page load testing, from servers on a variety of networks and locations globally.
Page Speed Tools
Google tool to ‘help developers optimize their web pages by applying web performance best practices’. Now with UX and mobile testing.
sonarwhal.com
Open source, customisable site testing tool, available online or from the command line.
headspin.io
Test and monitor globally on a variety of cell networks.
Charles Proxy
Web debugging proxy: can be used to adjust bandwidth and latency.
Augmented Traffic Control (ATC)
Set of open source applications maintained by Facebook that can be used to shape traffic and emulate impaired network conditions.
jsPerf
Create, share and compare test cases.
Network Link Conditioner
Network emulation tool for OS X and iOS.
Web Developer Checklist
Checklist of requirements for high-quality web apps and sites.
Front-End-Checklist
Prioritised list of tasks and testing tools.
Libraries, package managers, frameworks…
Gulp
Front-end build tool.
Grunt
JavaScript task runner.
But be aware of Why we should stop using Grunt & Gulp.
Webpack
Module bundler.
Rollup
Module bundler.
Yeoman
‘Modern workflows for modern webapps.’
Bower
Package manager.
Modernizr
Feature detection library.
The Ultimate Guide to JavaScript Frameworks
Comprehensive list with pros and cons.
jQuery
Cross-platform JavaScript library with UI and widget plugins. But be aware of youmightnotneedjquery.com.
Closure
JavaScript optimisation, linting and more.
Sass
CSS variables, inheritance, mixins and more.
Less
Cross-browser CSS library.
backbone.js
MVC framework.
HTML5 cross-browser polyfills
A catalogue of JavaScript libraries to deal with a variety of missing or non-standard functionality.
Sencha and Ext JS
Cross browser HTML5 web app frameworks.
Sproutcore
Web app framework.
Other stuff
lorempixel
Free placeholder images.
Specs and standards
W3C
HTML, CSS and all that.
WHATWG
‘The HTML Living Standard’.
ECMAScript
JavaScript is a dialect of this.
Updates from browser vendors
Chrome
Firefox
Safari
Opera
UC
Developer surveys
State of JS
Annual survey of developer attitudes.
State of CSS
Annual survey from the State of JS team.
Stack Overflow Developer Survey
Survey of Stack Overflow contributors.
MDN Web DNA Report
Huge annual report.
Books
JavaScript: The Definitive Guide
by David Flanagan
An actual printed book! Classic reference, highly readable.
Eloquent JavaScript
by Marijn Haverbeke (online or print)
Good introduction to programming, via JavaScript – with lots of good (editable) online examples.
Don’t Make Me Think
by Steve Krug
Another actual book! Nearly 20 years old, but still one of the best and most readable guides to interface design.
JavaScript: The Good Parts
by Douglas Crockford
Anything by Crockford is good – especially his video lectures on JavaScript (slides here).