Kategoria: HTTP

12 Gru 2019

PostCSS narzędzie do przekształcania CSS w JavaScript

W obecnym świecie frontendu wszystko zmienia się bardzo szybko. Powstaje mnóstwo nowych bibliotek, pluginów, framewoorków css czy js. Minęły czasy w których używało się notatnika do pisania stron 😉
Narzędzie które dzisiaj opiszę to PostCSS. Tak naprawdę najważniejszą częścią tego narzędzia są dodatki, pluginy których są setki.

Do czego można to wykorzystać, a no do miliona rzeczy 😉 Najczęściej używany plugin prze zemnie to autoprefixer.
Co on nam daje, a no to że nie musimy martwić dodawaniem prefiksów. Powiedzmy piszemy display: flex; a w wyniku dostajemy display: -webkit-box;display: -ms-flexbox;display: flex; Oczywiście zależne to jest od tego co ustalimy w package.json
W naszym package.json musimy dodać taki wpis, oczywiście ten wpis jest uzależniony od tego jakie przeglądarki chcemy wspierać:

"browserslist": [

  "last 2 version",

  ">1%",

  "not dead"

],

Ten wpis można by opisać tak, ostatnie 2 wersje przeglądarek, więcej niże 1% używa tych przeglądarek, no i ostatni wpis „nie martwe” czyli takie przeglądarki, które nadal są używane. Jeżeli chcemy zobaczyć jak budować tą listę polecam zapoznać się z browserslist oraz sprawdzić jakie jest pokrycie tego wpisu na tej stronie browserl.ist

Czytaj dalej …
18 Kwi 2019

Kolumny w css oraz szukanie w html

Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.

Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20

<ul id="ul">

  <li>text 1</li>

  <li>text 2</li>

  <li>text 3</li>

  <li>text 4</li>

  <li>text 5</li>

  <li>text 6</li>

  <li>text 7</li>

  <li>text 8</li>

  <li>text 9</li>

  <li>text 10</li>

  ...

</ul>

Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.

ul {

  border: 1px solid #cacaca;

  list-style: none;

  max-width: 50%;

  margin: 0;

  padding: 0;

  column-count: 2;

  column-width: 50%;

  padding: 10px;

  margin: auto;

}



ul li {

  padding: 10px;

  margin-bottom: 2px;

}



ul li:nth-child(even) {

  background-color: #f0f0f0;

}
Czytaj dalej …
8 Gru 2018

create-react-app i scss

Aby umożliwić korzystanie z scss w create-react-app robię podstawowe rzeczy. Najpierw zerknij w package.json na razie jest minimalistycznie teraz z konsoli uruchamiam npm run eject

Potrzebnych nam są jeszcze trzy biblioteki node-sass, sass-loader oraz resolve-url-loader.
Ja używam yarna czyli uruchamiam

yarn add -D sass-loader node-sass resolve-url-loader

lub dla tych co używają NPM

npm i -D sass-loader node-sass resolve-url-loader

Najpierw zajmiemy się wersją deweloperską znajduje się w folderze config -> webpack.config.dev.js
Kod wstawiam między
test: /\.(js|jsx|mjs)$/ a między test: /\.css$/

{

  test: /\.scss$/,

    include: [paths.appSrc, paths.appNodeModules],

      use: [

        {

          loader: require.resolve('style-loader'),

          options: {

            sourceMap: true

          }

        },

        {

          loader: require.resolve('css-loader'),

          options: {

            importLoaders: 1,

            modules: true,

            localIdentName: '[local]'

          },

        },

        require.resolve('resolve-url-loader'),

        {

          loader: require.resolve('sass-loader'),

          options: {

            sourceMap: true

          }

        }

      ]

},
Czytaj dalej …
24 Lis 2012

Plik robots.txt

User-agent: *

Disallow: /zdjecia/new/

Disallow: /zdjecia/box/

User-agent: Googlebot-Image

Disallow: /zdjecia/box/

User-agent: e-SocietyRobot

Disallow: /

User-agent: psbot/0.1

Disallow: /

User-agent: twiceler

Disallow: /

User-agent: TMCrawler

Disallow: /

User-agent: Gigabot

Disallow: /

Noindex: /*?q=

Sitemap: http://.../mapa.xml
12
Copyright © | kodyWiG Theme