Cyklistika, programování, společnost, kultura

Rubrika: Programování Strana 4 z 22

HTML, CSS, PHP, MySQL, Javascript, JQuery, Wordpress …

Cookies and Content Security Policy

Cookies and Content Security Policy

 

Jednoznakovky

Online nástroj na automatické vložení nedělitelných mezer za jednoznakové předložky, k číslům, do zkratek, náhrady pomlček a uvozovek a další typografické úpravy českého textu.

https://jednoznakovky.cz/

Bezplatné fonty, ikony a obrázky

Převzatý článek

Fonts

Golden Ratio Typography

Get correct line height for your font => https://grtcalculator.com

Fonts

Fonts optimization

When loading custom font, you should check out the following optimization tricks:

  • Try to avoid importing various font sizes: 300,400,700 should be enough for most cases
  • You may want to download the font and host it from your own server. It’s faster then using external CDN.
  • Use woff or woff2. Avoid SVG fonts
  • The fastest way to load the font is to convert it into the Base64 into the CSS file. This way, the browsers doesn’t have to wait for the font to load and there are no layout shifts caused by the font change.
  • When lazyloading the font, use the property. This doesn’t block the page rendering.font-diplay:swap

Icons

Icons sets

Icons optimization

When adding icons to your page, you might consider some optimization steps:

  • If you need icons like arrow left or arrow right, you might want to take one icon and use the CSS to rotate the icon in the direction you need. This way, you can have one icon for various directions
  • When you need to load various icons, check out some applications like IcoMoon. This app can merge various icons into one font. It can improve page performance because there are fewer requests. Also, the font is more flexible than embedding a link to each icon
  • Icons should be in the SVG format. Try to avoid JPG or PNG. It is because SVG size can be changed easily without getting blurred.
  • If the icon is a direct path but can be lazyloaded, you should add the loading="lazy" and the decoding="async" attribute. This allows the browser to continue rendering the page and decode images asynchronously.

Images

Images optimization

When loading various images on page, try following optimization tricks:

  • If the image should be loaded immediately, use fetchpriority="high" attribute. Otherwise use loading="lazy". This will decrease the amount of images loaded when the customer enters the page.
  • Use correct size. If the block size is for example 400×200, do not load image 2000×1000
  • For images, that are large on desktop, try to split the image into smaller pieces and load it using <picture> element.

Admin Columns

Admin Columns

 

Prokletý palindrom

Super Simple Slider

Super Simple Slider

 

WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager

WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager

 

11 Best Block Plugins for WordPress to Extend the Block Editor

Převzatý článek

Since Gutenberg morphed into the WordPress Block Editor as of WordPress 5.0, many people have been using it to build content on their blogs, websites, and ecommerce stores. However, if you’ve only been using the bare-bones functionality that it comes with, then you are doing your website a disservice. There are so many awesome plugins that expand the basic Gutenberg editor’s capabilities. In the sections below, we’re going to check out eleven of these best block plugins for WordPress, so that you can elevate your WordPress game higher.

Pre-Publish Checklist

Pre-Publish Checklist

 

Spectra – WordPress Gutenberg Blocks

Spectra – WordPress Gutenberg Blocks

 

Powered by WordPress & Theme by Anders Norén