11 Kwi 2019

Optymalizacja wordpress – asynchroniczność js

Zaczynamy od dodania kodu np. w function.php

function kodywig_async_scripts($url)
{
  if (strpos($url, '#asyncload') === false)
    return $url;
  else if (is_admin())
    return str_replace('#asyncload', ", $url);
  else
    return str_replace('#asyncload', ", $url) . "' async='async";
}
add_filter('clean_url', 'kodywig_async_scripts', 11, 1);

Później w miejscu w którym dodawane są skrypty i css do strony, odpowiednio modyfikuję kod. Do kodu a dokładnie za .js dodaję #asyncload

wp_enqueue_script('kodywig-script-js', get_template_directory_uri() . '/assets/js/script-min.js#asyncload', array(), KODYWIG_THEME_VERSION, true);
16 Sty 2019

Cztery sposoby centrowania elementu w div

Cztery sposoby centrowania elementu w div.
Najpierw przygotujemy style dla html, mały reset nie jest zły 😉

* {
  padding: 0;
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  overflow: hidden;
}

oraz html

<div class="wrapper">
<p></p>
</div>

A teraz konkrety:

I. Podstawowy i zawsze działający styl.

.wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

p {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: auto;
}
11 Sty 2019

Jak przyspieszyć ładowanie CSS

Podam dwa sposoby na przyspieszenie renderowania się stron.

I. Sposób

Pierwszy sposób dotyczy najnowszych przeglądarek ale w przyszłości będzie działać wszędzie. Tego sposobu używa aliexpress.com 🙂 Chyba największy sklep na świecie, więc czy Chińczycy mogą się mylić 😉
Poniższy przykład wyrenderuje stronę dopiero wtedy kiedy przetworzy całą zawartość app.css

<head>
  <link rel="stylesheet" href="app.css" />
</head>
<body>
  <header class="page-header">...</header>
  <section class="sidebar">...</section>
  <main class="content">...</main>
  <footer class="page-footer">...</footer>
</body>

Możemy lekko poprawić wydajność powyższego rozwiązania a przynajmniej tak nam się może wydawać.

<head>
  <link rel="stylesheet" href="common.css" />
  <link rel="stylesheet" href="page-header.css" />
  <link rel="stylesheet" href="sidebar.css" />
  <link rel="stylesheet" href="content.css" />
  <link rel="stylesheet" href="page-footer.css" />
</head>
<body>
  <header class="page-header">...</header>
  <section class="sidebar">...</section>
  <main class="content">...</main>
  <footer class="page-footer">...</footer>
</body>
8 Gru 2018

Mapowanie kolorów scss

Zaczynamy od deklaracji kolorów które będą nam potrzebne w projekcie.

$colors: (
  grey: (
    base: #4d4e55,
    light: #c8c8ce
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);

Oczywiście nic nie stoi na przeszkodzie aby modyfikować naszą deklarację dodając następne nazwy kolorów light, lighter, lightest, dark, darker, darkest
Mniej więcej wyglądało by tak.

$colors: (
  grey: (
    base: #4d4e55,
    light: xxxx,
    lighter: xxxx,
    lightest: xxxx,
    dark: xxxx
    darker: xxxx
    darkest: xxxx
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);
27 Kwi 2016

Wyśrodkowanie tabeli z danymi do rozmiaru okna

$(window).resize(function() {
var winW = $(window).width();
var conW = parseInt($('#container').css('width'));
var tabW = parseInt($('table.list').css('width'));

if(winW>conW) {
var margin_left = -((tabW -- conW)/2)-10;
$('table.list').css({'margin-left':margin_left});
} else {
$('table.list').css({'margin-left':0});
}
});
$(window).resize();

Tabelka normalna:
tabela

Tabelka wyśrodkowana:
tabela wyśrodkowana