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;
}
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
                    }
                }
            ]
},
24 Lip 2008

Kody odpowiedzi HTTP

Błąd klienta (1xx):

100 - Kontynuuj.
101 - Zmiana protokołu.

Udane (2xx):

200 - OK.
201 - Utworzone.
202 - Przyjęte.
203 - Dane nieautorytatywne.
204 - Brak zawartości.
205 - Odświeżona zawartość.
206 - Część zawartości.

Przekierowanie (3xx):

300 - Wiele opcji do wyboru.
301 - Trwale przeniesione.
302 - Przeniesione tymczasowo.
303 - Patrz inny.
304 - Bez zmian.
305 - Użycie proxy.

Błąd klienta (4xx):

400 - Niewłaściwe żądanie.
401 - Brak autoryzacji.
402 - Wymagana jest opłata.
403 - Dostęp zabroniony.
404 - Nie znaleziony.
405 - Metoda nie dozwolona.
406 - Nie zaakceptowany.
407 - Wymagane uwierzytelnienie proxy.
408 - Upłynął limit żądania.
409 - Konflikt zasobów.
410 - Przeniesiony.
411 - Wymagana długość.
412 - Niespełniony warunek wstępny.
413 - Przekroczony rozmiar komunikatu żądania.
414 - Przekroczony rozmiar adresu URL.
415 - Nośnik nieobsługiwany.

Błąd serwera (5xx):

500 - Wewnętrzny błąd serwera.
501 - Funkcje niezaimplementowana.
502 - Niewłaściwa brama.
503 - Usługa niedostępna.
504 - Przekroczony limit czasu bramy.
505 - Nieobsługiwana wersja HTTP.