Code snippets

macOs

Dec Hex Unicode Char Mac Description
225 E1 U+00B7 · middle dot
165 A5 U+2022 bullet
171 AB U+00B4 ´ acute accent
199 C7 U+00AB « left-pointing double angle Quotation mark
200 C8 U+00BB » right-pointing double angle Quotation mark
201 C9 U+2026 horizontal ellipsis
202 CA U+00A0   no-break space
208 D0 U+2013 <alt>- en dash
209 D1 U+2014 <alt><shift>- em dash
210 D2 U+201C left double Quotation mark
211 D3 U+201D right double Quotation mark
212 D4 U+2018 left single Quotation mark
213 D5 U+2019 right single Quotation mark
220 DC U+2039 single left-pointing angle Quotation mark
221 DD U+203A single right-pointing angle Quotation mark
226 E2 U+201A single low-9 Quotation mark
227 E3 U+201E double low-9 Quotation mark
247 F7 U+02DC ˜ small tilde
253 FD U+02DD ˝ double acute accent

Regular expressions

<h1>

<h1(?:\s[^>]*)?>(.*?)<\/h1>

Emoji

(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])

Extract the host / subdomain.domain.tld out of the URL with regex

https?:\/\/(.*?)\/
Info

Regex demo

Javascript with protocol

const input = "https://www.blick.ch/sport/"
const regex = RegExp("https?:\\/\\/(.*?)\\/", "g")
const output = regex.exec[input](0)
console.log(output)
// https://www.blick.ch/

Javascript without protocol

const input = "https://www.blick.ch/sport/"
const regex = RegExp("https?:\\/\\/(.*?)\\/", "g")
const output = regex.exec[input](1)
console.log(output)
// www.blick.ch

Match a specific URI

^\/[\d]\/[a-zA-Z]\/[\w-]+.[a-z]{3,4}$

Regex demo

URIs:
/1/a/image.png
/1/a/image/1.png
/0/b/google-format.webp

Match URIs that start with /number/ followed by a letter and ending with the image file name.

Creating a plan

We have URI part of the URL that consists of three slashes (URI levels) and the file in question is an image. We can start building a pattern by the following instruction from the "Task":

  1. ^\/[\d]\/ - Starts with /number/
  2. [a-zA-Z] - Followed by a letter
  3. \/[\w-]+.[a-z]{3,4} - Ending with image file name. (Assuming image extension will be lower case).
    • Why 3 to 4 characters for an image?
    • Because of webp type of image (extension) which contains 4 characters.

Match only values from the query string in the URL

([a-z]+=)([a-zA-Z0-9%.]+)&?
Info

Regex demo

URLs:
http://bluegrid.io/?v=123
http://bluegrid.io/?a=1&b=2&c=3
http://bluegrid.io/?url=http%3A%2F%2Fbluegrid.io&a=1

Task: Get all the query string values without corresponding keys (from "a=1" get only "1").

Creating a plan

Our focus on above strings (URLs) should start from character "?" which indicates there is a query string following it. Query strings are formed with a key and a value joined with character "&" (ex: a=1&b=2).

Edge cases:

  • There can be any number of query string key: value pairs.
  • The key is always a letter.
  • The values are expected to consist of alphanumeric characters, numbers, "." character and "%" character only
  • ([a-z]+=) - Matching a key
  • ([a-zA-Z0-9%.]+) - Matching key value
  • &? - Matching the end of the key: value pair by finding "&" character which if exists it means there is another key: value pair. If not, we are calling it the end of the query string. "?" after the "&" characters tell that there might be the "&" after the previous key: value air but, doesn't have to be one.

Match substring in the URI

https?:\/\/([\w.])*([\w\d-]*)\.([a-z]*)\/edu\/what-(is|are)(.*)\/$
Info

Regex demo

URLs:
http://bluegrid.io/edu/what-is-the-secondary-dns-slave-dns/
http://bluegrid.io/edu/cache-control-headers-explained/
http://bluegrid.io/edu/what-are-conditional-http-request-headers/
http://bluegrid.io/edu/how-https-protocol-works/
http://bluegrid.io/edu/what-is-dns-service-and-how-does-it-work/
http://bluegrid.io/edu/how-symmetric-encryption-works/

Task: Match URLs with HTTP or HTTPS protocols and has the substring that starts with "_/edu/what-is_" or "_/edu/what-are_" and ends with "_/_".

Creating a plan First, we need to catch the protocol and domains within the URL, then we need to position our focus on URI part of the interest "_/edu/..._" and the end "_/_". Let's check out what are the edge cases and rules we need to follow:

Edge cases:

  • URIs consist of letters only, no digits are expected
  • No other "/" characters are expected between "/edu/what-is" or "/edu/what-are" and with "/" at the end
  • There is no limit on the number of the total characters in the URI
  1. https?:\/\/ - Match http:// or https://
  2. ([\w.])*- Match potenntially existing subdomain
  3. ([\w\d-]*) - Match the domain
  4. \.([a-z]*) - Match Top Level Domain (.com, .rs, .io...)
  5. \/edu\/what-(is|are - Match "/edu/what-is" or "/edu/what-are"
  6. (.*)\/$ - Match the rest of the URL until it ends with "/"

Eventually, the pattern looks like this: https?:\/\/([\w.])*([\w\d-]*)\.([a-z]*)\/edu\/what-(is|are)(.*)\/$

Basix

1 2 3

Undo “git commit --amend”

git reflog
git reset --soft HEAD@{1}
git commit -C HEAD@{1}

Merge from another repo without history

# git remote add -f new_origin_name <new_origin_name repo URL>
git remote add -f merge_source https://cebreus@bitbucket.org/cebreus/gulp-dev-stack.git
# git merge --squash new_origin_name/desired_branch
git merge --squash merge_source/develop
# resolve conflicts
# git commit -m "chore: merge from another repo"
# git remote rm merge_source

To set repository-specific username/email configuration:

  1. From the command line, change into the repository directory.
  2. Set your username: git config user.name "Jaroslav Vrana"
  3. Set your email address: git config user.email "jarda@fastandcomfy.io"
  4. Verify your configuration by displaying your configuration file: cat .git/config

Změna data, jména, e-mailu v commitu

git filter-branch --force --env-filter '
OLD_NAME_1="cebreus"
OLD_NAME_2="Jaroslav Vrána"
OLD_EMAIL="cebreus@live.com"
NEW_NAME="Jaroslav Vrana"
NEW_EMAIL="jaroslav.vrana@integromat.com"

GIT_COMMITTER_DATE=$GIT_AUTHOR_DATE

if [ "$GIT_AUTHOR_NAME" = "$OLD_NAME_1" ]; then
    GIT_AUTHOR_NAME=$NEW_NAME
elif [ "$GIT_AUTHOR_NAME" = "$OLD_NAME_2" ]; then
    GIT_AUTHOR_NAME="$NEW_NAME"
fi

if [ "$GIT_COMMITTER_NAME" = "$OLD_NAME_1" ]; then
    GIT_COMMITTER_NAME=$NEW_NAME
elif [ "$GIT_COMMITTER_NAME" = "$OLD_NAME_2" ]; then
    GIT_COMMITTER_NAME=$NEW_NAME
fi

if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]; then
    GIT_AUTHOR_EMAIL=$NEW_EMAIL
elif [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]; then
    GIT_COMMITTER_EMAIL=$CORRECT_EMAIL
fi
' HEAD
git push --force-with-lease
rm -rf "$(git rev-parse --git-dir)/refs/original/"
  • aktvní větev ' HEAD
  • zvolená větev ' master..HEAD
  • celé repo ' -- --all
  • force git filter-branch --force --env-filter '

Kopírování Datumu commitu do datumu úpravy commitu

git filter-branch --env-filter 'export GIT_COMMITTER_DATE="$GIT_AUTHOR_DATE"'

Změna datumu na commitu

changed_commit="21425d847371f9c562b8eaa3ae9797eeeb58de7b"
date="Wed Mar 10 2021 00:45:34 GMT+0100"
git filter-branch -f --env-filter \
"if test \$GIT_COMMIT = '$changed_commit'
    then
        export GIT_AUTHOR_DATE
        export GIT_COMMITTER_DATE
        GIT_AUTHOR_DATE='$date'
        GIT_COMMITTER_DATE='$date'
    fi" &&
    rm -fr "$(git rev-parse --git-dir)/refs/original/"

Automatic closing Issues by mention in Commit message

The following keywords, followed by an issue number, will close the issue:

  • close
  • closes
  • closed
  • fix
  • fixes
  • fixed
  • resolve
  • resolves
  • resolved

Support multiple mentions. Docs

Komprese repozitáře

git gc
chevron entity chevron entity
&#155; » &#187;
&#139; « &#171;
&#132; © &#169;
&#147; ® &#174;
& &#38; &#153;
@ &#64; “” votes’
^ &#94;

Get all hyperlinks on page

var csv=''
for (let item of document.links) {csv = csv+item.href+"\n"}
console.log(csv);

Chrome snippet — clean page

Sources > Snippets

document.documentElement.innerHTML = "";
Object.values(getEventListeners(document)).forEach(value=>value.forEach(value=>document.removeEventListener(value.type, value.listener, value.useCapture)));
Object.values(getEventListeners(window)).forEach(value=>value.forEach(value=>window.removeEventListener(value.type, value.listener, value.useCapture)));

Komentáře v kódu

/* Hlavička webu
   =============

   Prototyp hlavičky, ne hotová komponenta.
   Používá se na všech stránkách s výjimkou
   nákupního procesu.
*/     

// Hlavní blok
// --------------

// [1] Jde o relativně pozicovaný kontejner, což využijeme
//     v komponentách z adresáře header/.
// [2] Flexbox potřebujeme kvůli layoutu vnitřních komponent 
//     a taky změně pořadí pro .header__top na 
//     @query-lg breakpointu.

.header {
  padding-bottom: @lineHeight / 2;
  position: relative; // [1]
  display: flex; // [2]
  flex-wrap: wrap;
  align-items: center;
}

BEM on CSS tricks

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}
<a class="btn btn--big btn--orange" href="http://css-tricks.com">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

The Namespaces

In no particular order, here are the individual namespaces and a brief description. We’ll look at each in more detail in a moment, but the following list should acquaint you with the kinds of thing we’re hoping to achieve.

o-: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.

c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.

u-: Signify that this class is a Utility class. It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI. You will probably recognise this namespace from libraries and methodologies like SUIT.

t-: Signify that a class is responsible for adding a Theme to a view. It lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.

s-: Signify that a class creates a new styling context or Scope. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly—they can be open to abuse and lead to poor CSS if not used wisely.

is-, has-: Signify that the piece of UI in question is currently styled a certain way because of a state or condition. This stateful namespace is gorgeous, and comes from SMACSS. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.

_: Signify that this class is the worst of the worst—a hack! Sometimes, although incredibly rarely, we need to add a class in our markup in order to force something to work. If we do this, we need to let others know that this class is less than ideal, and hopefully temporary (i.e. do not bind onto this).

js-: Signify that this piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour. If you’re not a developer working with JavaScript, leave these well alone.

qa-: Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM. Like the JavaScript namespace, this basically just reserves hooks in the DOM for non-CSS purposes.

0% 5% 10% 15% 20% 25% 30% 35% 40%
#fff #f2f2f2 #e5e5e5 #d9d9d9 #ccc #bfbfbf #b2b2b2 #a6a6a6 #999

Remove trailing spaces

([:;>}{])[ ]+$  
\1

Remove comments (multi/oneline)

/\*[^*]*\*+([^/][^*]*\*+)*/

HTML komentář vč. obsahu

\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>

HTML atribut style vč. obsahu

\"|<[a-zA-Z]+|<h\d)[ ]+style=\"[^\"]*\
  • konec předešlého atributu (složené uvozovky a mezera)
  • začátek tagu – pouze písmena
  • začátek tagu – napisy

ONIO maily

Bitbucket větev nabidka-zakaznicke

Tasky

  • default (serve) – spustí ladění CZ verze
  • build – build produkčních jazykových verzí
  • stylelint
  • stylefix

Princip

  1. streamQueue + conctat jednotlivých HTML souborů
  2. htmlClean vyčištění HTML
  3. prettify formátování HTML (dev)
  4. inlineSource vložení externího CSS souboru jako <style>
  5. minifyInline minifikace inline <style>
  6. uložení kompletního HTML

Tvorba produkčních jazykových verzí gulp build.

ONIO Invoice Uploader

Bitbucket

Tasky

  • default (serve) – spustí ladění
  • build – build produkčních verzí
    • build:dev (build:dev:css + build:dev:html)
    • build:front (build:front:css + build:front:html)
  • bootlint
  • stylelint
  • stylefix

Kodér test

bitbucket

Tasky

  • default (serve) – spustí ladění
  • build – build produkčních verzí
    • build:dev (build:dev:css + build:dev:html)
    • build:front (build:front:css + build:front:html)
  • bootlint
  • stylelint
  • stylefix

Oniománie

Bitbucket

Prezentace (Bespoke)

Bitbucket

  • SIUX is a tool for creating responsive HTML prototypes with Bootstrap + Synergic UI, Silex, and Twig.
  • <link rel="preload" href="">
  • ColorADD, Sim Daitoism
  • Persoo, Ahrefs, Majestic, Buzzstream, Google Sheets, Pro Rank Tracker, SEMRush, DeepCrawl, Screaming Frog, Analytics & GSC, Scrapebox, Various Keywors Tools
  • Accessibility <=> přístupnost × ovladatelnost

Docker, inicializace projektu

  1. spustit Docker
  2. ve Windows PoweShell do repositáře projektu
  3. spustit docker-compose up -d (start docker kontejneru dle docker-compose.yml)
  4. spustit docker/ssh nebo příkaz z volaného souboru docker exec -u www-data -it eccklinika bash pro spuštění skriptů (GULP atp.)
  5. při ukončení práce docker-compose down

až jsem v kontejneru, test databáze (migrace) php www/index.php migration:status, když je rozdíl, spustím: php www/index.php migration:migrate

po nové instalaci prijektu je nutné vytvořit a přihlásit se do admina php www/index.php app:create-admin podpora@egen.cz Podpora eGen heslo

Při ukončení práce docker-compose down

GULP

Struktura aplikace

devstack/                        ← hlavní adresář
  ├── app/ (pages)               ← aplikace (latte framework)
  ├── build/                     ← produkční (vybuildněná) verze
  ├── node_modules/              ← NPM balíčky (závislosti projektu)
  ├── src/                       ← zdrojové kódy
  │   ├── client/                ← front-end (FE) / prohlížečová část
  │   ├── server/                ← serverová část (node.js)
  ├── static/                    ← statické soubory (robots.txt, sitemap.xml)
  ├── webpack/                   ← nastavení webpacku
  ├── .gitignore                 ← soubory ignorované gitem
  ├── .travis.yml                ← nastavení CI
  ├── LICENSE                    ← licence
  ├── README.md                  ← základní info (v angličtině)
  └── package.json               ← rodokomnen aplikace, závislosti atd.

Popis složek: assets, static

Požadované Gulp tasky

  ├── default
  │   ├── build:admin
  │   └── build:front
  ├── build:admin
  │   ├── build:admin:css
  │   └── build:admin:js
  ├── build:front
  │   ├── build:front:css
  │   ├── build:front:js
  │   ├── build:front:fonts
  │   └── build:front:others
  ├── build-dev:admin
  │   ├── build:admin
  │   ├── build:dev:css
  │   └── build:dev:js
  ├── build-dev:front
  │   ├── build:front
  │   ├── build:dev:css
  │   └── build:dev:js
  ├── watch:admin
  │   └── dev:admin
  ├── watch:front
  │   └── dev:front
  ├── clean:front
  ├── refresh
  └── install
  • css – kompilace, konkatenace, minifikace SASS/LESS/CSS atp. dle potřeby
  • js – konkatenace, minifikace JS
  • fonts – kopírování souborů
  • latte – zpracování latte šablon
  • others – všechno ostatní

Hlavní task

//
gulp.task('watch:dev', function () {
  startSyncing();
  watchDevFiles();
  watchFrontFiles();
});

Atomické tasky

//
gulp.task('build:dev:css', function () {
  compileSass(config.input.dev.css, config.output.dev.css);
  compileSass(config.input.front.css, config.output.front.css);
});

//
gulp.task('front:css', function () {
  compileSass(config.input.front.css, config.output.front.css);
});

Základní funkce

Sekvenci akcí pro task realizujeme pomocí custom funkcí

//
function watchDevFiles() {
  gulp.watch(config.watchFiles.dev.css, ['dev:css']);
  gulp.watch(config.watchFiles.dev.css, ['refresh']);
}

//
function watchFrontFiles() {
  gulp.watch(config.watchFiles.front.css, ['front:css']);
  gulp.watch(config.watchFiles.front.js, ['front:js']);
  gulp.watch(config.watchFiles.front.latte, ['refresh']);
  gulp.watch(config.watchFiles.front.fonts, ['front:fonts']);
  gulp.watch(config.watchFiles.front.others, ['refresh']);
}

Pomocné funkce

//
function compileSass(input, output) {
  var stream = gulp.src(input)
    .pipe(plumber(handleError))
    .pipe(sass())
    .pipe(gulpif(config.minifyCSS, minify({keepBreaks: false})))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(output));

  stream.on('end', function () {
    sync();
  });
}

//
function startSyncing() {
  if (config.refreshBrowser) {
    browserSync.init({
      proxy: config.domain
    });
    console.log(config.domain);
  }
}

function sync() {
  browserSync.reload();
}

Projekt

Branches:

  • master = produkce
  • development = pull requesty ze svých branche
  • test = pro nasazení na testovací server

Vždy vytvářet vlastní branch prijmeni/cislo_ticketu-poznamka.

Commit message:

  • commitu – anglicky, není nutná žádná syntaxe
  • pull request – česky

Pull request prefixovaný WIP: nebude zpracován (Work In Progress).

Latte

  • foreach jako makro
  • podmínky n:if jako n:makro
  • vyhodnocení kódu {php expression} × define makro
  • hlavička {content type}
  • n:class
  • n:if content
  • => zabalí hodnoty jako pole a předá jako první parametr

Photoshop

Barvy vrstev:

  • grey for wireframes, screenshoots
  • red as error for old or unused elements
  • green for highlighting different states of the same element (button, menu link)

WebPack

  • Snaha o code splitting
  • Možnost závislostí na modulu např. SASS nebo CSS
  • výsledkem Webpacku je vždy primárně js balíček (nebo balíčky) pro použití v prohlížeči

  • Webpack: Balíme si na dovolenou v produkci
devstack/                        ← hlavní adresář
  ├── build/                     ← produkční (vybuildněná) verze
  ├── node_modules/              ← NPM balíčky (závislosti projektu)
  ├── src/                       ← zdrojové kódy
  │   ├── client/                ← front-end (FE) / prohlížečová část
  │   ├── server/                ← serverová část (node.js)
  ├── webpack/                   ← nastavení webpacku
  ├── .gitignore                 ← soubory ignorované gitem
  ├── .travis.yml                ← nastavení CI
  ├── LICENSE                    ← licence
  ├── README.md                  ← základní info (v angličtině)
  └── package.json               ← rodokomnen aplikace, závislosti atd.

E-maily

  • framework
  • Subject 61–70 znaků nebo lépe 41–50 znaků
  • Preheader 40–70 znaků
  • ideal width 600 px, max. 3 columns
  • UTM tracking, * inline CSS, webfonts as <link>
  • HTML size max 100 kB (will be trimmed)
## PHP OPTIMISATION
php_flag allow_url_fopen on

## Redirect na verzi domény s www
RewriteEngine on
RewriteBase /
Options +FollowSymlinks
# Přesměrování webu bez WWW na verzi s WWW
RewriteCond %{HTTP_HOST} ^energo-adamov.cz
RewriteRule (.*) http://www.energo-adamov.cz/$1 [R=301,QSA,L]

## Rewrite link filename.html to physical file filename.php

RewriteCond %{REQUEST_FILENAME} =-f
RewriteRule ^(.*)\.php$ $1.html [NC,L]
RewriteRule ^(.*)\.html$  $1.php [NC,L]

## Stranka s chybovym hlasenim pro chybu 404 - nenalezen
## https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

ErrorDocument 403 chyba-403.php
ErrorDocument 404 /404.php

## ETag

Header unset ETag
FileETag None

## MOD_DEFLATE by file type

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

##--------------------
## MOD_DEFLATE by file extension

<IfModule mod_deflate.c>
    <filesMatch \"\.(js|css|html|php|svg|eot|otf|ttf|woff|woff2)$\">
        SetOutputFilter DEFLATE
    </filesMatch>
</IfModule>

## MOD_EXPIRES by file extension

<IfModule mod_expires.c>
    <FilesMatch \"\.(gif|png|jpg|jpeg|js|css|swf|ico)$\">
        ExpiresActive On
        ExpiresDefault \"access plus 1 years\"
    </FilesMatch>
    <FilesMatch \"\.(php)$\">
        ExpiresActive On
        ExpiresDefault \"access plus 1 week\"
    </FilesMatch>
    <FilesMatch \"\.(manifest|offline)$\">
        ExpiresActive Off
    </FilesMatch>
</IfModule>

## http://tomaserlich.cz/301-presmerovani-domeny/

## Headers module
<IfModule mod_headers.c>
    <FilesMatch \"\.(js|css|xml|gz)$\">
        Header append Vary: Accept-Encoding
    </FilesMatch>
</IfModule>

## Force add type to files

AddType 'font/ttf; charset=Latin-1' .ttf
AddType 'font/eot; charset=Latin-1' .eot
AddType 'font/otf; charset=Latin-1' .otf
AddType 'font/woff; charset=Latin-1' .woff
AddType 'font/woff2; charset=Latin-1' .woff2

## File Protection
## To protect only certain files in a directory, use a .htaccess file like this.

<Files '.ht*q'>
order allow,deny
deny from all
</Files>

## PageSpeed

<IfModule pagespeed_module>
    ModPagespeed on
</IfModule>
</pre>

##http://tomaserlich.cz/zaheslovani-stranek-pomoci-htpasswd/
<ul class="c-menu-mobile dropdown-menu">
    <li class="dropdown clearfix">
        <a class="dropdown-item" href="">
             1.0.0 Dropdown
             <button class="dropdown-toggle btn btn-sm">&darr;</button>
         </a>
        <ul class="dropdown-menu">
            <li class="dropdown clearfix">
                <a class="dropdown-item" href="">
                     1.1.0 Dropdown
                     <button class="dropdown-toggle btn btn-sm">&darr;</button>
                 </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="">1.1.1 Normal</a></li>
                    <li><a class="dropdown-item" href="">1.1.2 Normal</a></li>
                </ul>
            </li>
            <li><a class="dropdown-item" href="">1.2 Normal</a></li>
            <li><a class="dropdown-item" href="">1.3 Normal</a></li>
        </ul>
    </li>
    <li><a class="dropdown-item" href="">2.0.0 Normal</a></li>
</ul>
$('.dropdown-toggle').on("click", function(e) {
    $(this).parent('a').siblings('.dropdown-menu').toggle();
    e.stopPropagation();
    e.preventDefault();
});
.c-menu-mobile {
    position: relative;
    display: block;
    border: 0;
    border-radius: 0;
    background: red;
    min-width: 300px;
}

.c-menu-mobile__item a {
    display: block;
    padding: 0.9375rem;
    color: #fff;
    text-decoration: none;
}

.c-menu-mobile__item + .c-menu-mobile__item {
    border-top: solid 1px maroon;
}

.c-menu-mobile .dropdown-toggle {
    background: rgba(0, 0, 0, .3);
    display: inline-block;
    width: 1.5em;
    margin-left: .5em;
    text-align: center;
}

.c-menu-mobile .dropdown-menu {
    position: static;
    border-radius: 0;
    border: 0;
    margin: 0 0 0 2em !important;
    width: calc(100% - 2em);
    background: rgba(255, 255, 255, .5);
    box-shadow: none;
}

Color codes

red, pink, purple, deep purple, indigo, blue, light blue,
cyan, teal, green, light green, lime,
yellow, amber, orange, deep orange, brown, grey, blue grey

Odkazy

Batch command to delete all subfolders with specific name
/q = quiet

FOR /d /r . %d IN (backdrops) DO @IF EXIST "%d" rd /s /q "%d"

Převod UNIX>DOS konců řádků, rekurzivně

find . \( -name '*.inc' -o -name '*.php' -o -name '*.less' -o -name '*.scss' -o -name '*.js' -o -name '*.json' -o -name '*.txt' -o -name '*.xml' -o -name '*.xsl' -o -name '*.html' -o -name '*.md' \) -exec unix2dos {} \;

Convert Multiple PNG Images Into a Single Icon File

convert.exe image-16.png image-32.png image-48.png image-64.png image-128.png my-icon.ico

http://silktide.com/cookieconsent

<script type="text/javascript">
    window.cookieconsent_options = {"message":"Tato webová stránka používá cookies, aby vám umožnila lepší uživatelský zážitek.","dismiss":"OK, ZAVŘÍT","learnMore":"Více informací","link":null,"theme":"dark-top"};
</script>
<script type="text/javascript" src="//s3.amazonaws.com/cc.silktide.com/cookieconsent.latest.min.js"></script>

MP1 features

Replace funkce

// nahrazeni text za <strong>text</strong>
function mojenikoReplaceStrong($text) {
    return preg_replace('/@@(.*)@@/', '<strong>\\1</strong>', $text);
}
// nahrazeni text za text
function mojenikoRemoveStrong($text) {
    return preg_replace('/@@(.*)@@/', '\\1', |$text);
}
// pouziti
mojenikoReplaceStrong('text pro aplikaci replace');

První slovo samostatně – ozdělení podle první merezy

echo '<span>'.substr($coRozdelujeme, 0, (strpos($coRozdelujeme, " ") === false) ? strlen($coRozdelujeme) : strpos($coRozdelujeme, " ")).'</span>';
echo strstr($coRozdelujeme, " ");

Rozdělení dle první čárky

$tmp_pos = strpos($coRozdelujeme, ",");
echo '<span>'.($tmp_pos === false ? $coRozdelujeme : substr($coRozdelujeme, 0, $tmp_pos + 1)).'</span>';
// bez carky a mezery
if ($tmp_pos !== false) {
    echo substr($coRozdelujeme, $tmp_pos + 1);
}

Zkrati text na maximalni pocet znaku (cela slova), odstrani HTML tagy

/*
 * Zkrati text na maximalni pocet znaku (cela slova), odstrani HTML tagy
 * @abstract: HTML entita = 1 znak; slovo =  min. 4 znaky
 * @author: Daniel Brchan + kybicovani Jaroslav Vrana
 * @param: string
 * @param: integer
 * @return: string
 */

function trimStringToWholeWords($input, $maxLength)
{
    $input = isset($input) ? strip_tags(trim($input)) : '';
    $maxLength = isset($maxLength) ? $maxLength : '';

    if (strlen($input) > $maxLength)
    {
        $text_add = 30;
        $input_dec = substr(html_entity_decode($input), 0, $maxLength + $text_add);
        preg_match_all('/\s(\S{4,})/', $input_dec, $matches, PREG_OFFSET_CAPTURE);
        $rev_matches = array_reverse($matches[1]);

        foreach ($rev_matches as $rev_matches_item)
        {
            if ($rev_matches_item[1] <= $maxLength - strlen($rev_matches_item[0]))
            {
                $item_selected = $rev_matches_item;
                break;
            }
        }
        $word = htmlentities($item_selected[0]);
        $word_pos = $item_selected[1];
        $pos_cut = strpos($input, $word, $word_pos) + strlen($word);
        $output = substr($input, 0, $pos_cut);
    }
    else
    {
        $output = $input;
    }

    return $output;
}

Vyčtení všech viditelných potomků z menu

$tabsMenuidArray = $M->getChildrenMask($M->GetMID4Code('o-projektu'), WPMENU_GET_CHILDREN_MASK_DEFAULT, 'menuids');
if(is_array($tabsMenuidArray) && count($tabsMenuidArray) > 0)
{
    $i = 0;

    foreach($tabsMenuidArray as $key=>$val)
    {
        $title = $M->getPageTitle($val);
        $url = $M->url($val);
        $sysCodeId = $M->menuitems[$val]->data['system_codes']) ? $M->menuitems[$val]->data['system_codes'] : '';

        echo '<div id="'.$sysCodeId.'" class="hentry clearfix">';
            if ($i == 0) {
                echo '<h1 class="h1 entry-title">'.bytovyDumReplaceSmall($title).'</h1>';
            } else {
                echo '<h2 class="h1 entry-title">'.bytovyDumReplaceSmall($title).'</h2>';
            }

            $art_page = new TWPArt($val, $typ);
            $art_page->GetWithDisc = false;
            echo '<div class="entry-summary">'.$art_page->getPopisTransformed().'</div>';
            echo '<div class="entry-content">'.$art_page->getArtTransformed().'</div>';

            unset($art_page, $title, $url, $sysCodeId);
        echo '</div>';
        $i++;
    }
}
unset($tabsMenuidArray);

Odkaz na stejnou stránku do 'href'

<?php echo $GLOBALS['SYS_ACTUAL_URL'];?>#

Odkaz na rodiče (parenta)

<?php echo $M->UrlTagA($M->menuitems[$showid]->parentid); ?>

Odkaz na home

echo '<a'.$M->UrlTagA($M->GetMID4Code('sys_homepage')).' id="home" rel="home"><img src="'.$skin.'/picture/logo.jpg" alt="'.$M->menuitems[$M->GetMID4Code('sys_homepage')]->title_html.'"></a>';

<a<?php echo $M->UrlTagA($M->GetMID4Code('sys_homepage')); ?> id="home" rel="home"><img src="<?php echo $skin; ?>/picture/logo.gif" alt="<?php echo $M->menuitems[$M->GetMID4Code('sys_homepage')]->title_html; ?>"></a>

Powered by m@gnetpro

include("powered-by.inc");
$xhtml = true; include("powered-by.inc");

Vyčtení částí patičky

// inicializace článku patičky
$art = new TWPArt($M->getFooterMenuid(), $typ);

// název článku patičky
echo '<h2>';
echo $art->GetSubject();
echo '</h2>';

// článek patičky
$M->ShowFooter($typ);

// anotace článku patičky
echo '<div id="footer-complex-logos">';
echo $art->GetPopisTransformed();
echo '</div>';

Existuje soubor volitelne polozky

if(is_file($obrazek_nadpis)) {}

Je soubor volitelne polozky vložitelný

if (file_is_includable($obrazek_nadpis) === false) {} 

Náhodné (random) vyčtení obrázku z def. složky

// vlozit do php nad doctype
include_once("utils_file.inc");

$print_random_picture =  getRandomFilename("./picture/theme/");
echo $print_random_picture;

Obrázek z volitelné položky

$img_theme = 'picture/'.$M->getAttribInherit($showid, 'img_theme');
if (is_file($img_theme)) {
    echo '<img src="'.$img_theme.'" alt="'.$M->menuitems[$M->GetMID4Code('sys_homepage')]->title_html.'">';
} else {
    echo '<img src="picture/themes/default.jpg" alt="'.$M->menuitems[$M->GetMID4Code('sys_homepage')]->title_html.'">';
}

Nazev souboru z cesty

$image_name = substr($M->menuitems[$showid]->data['img'], strrpos($M->menuitems[$showid]->data['img'], '/')  + 1);

Obrázek nebo flash z volitelné položky

a) vložení belongs='a': $pagedata->data->variaous_image

b) dědění v menu: $M->menuitems[$showid]->data_inherited['variaous_image']

// soubor cestou
$source_file = 'picture/'.$M->menuitems[$showid]->data_inherited['variaous_image'];
// název souboru s cestou
$source_filename = 'picture/'.substr($M->menuitems[$showid]->data_inherited['variaous_image'],0,strrpos($M->menuitems[$showid]->data_inherited['variaous_image'],'.'));
// pripona
$source_fileext  = substr($pagedata->data->flash_file,-3,strrpos($pagedata->data->flash_file,'.'));
// sirka souboru
$source_file_width  = $M->menuitems[$showid]->data_inherited['variaous_image_width'];
// vyska souboru
$source_file_height = $M->menuitems[$showid]->data_inherited['variaous_image_height'];

if (is_file($source_filename.'.swf'))
{
    $flash = new TWPFlashObject();
    echo $flash->prepareFlash(
        'mask-img-theme','picture/'.$source_filename,
        $source_file_width,
        $source_file_heigh,
        array('wmode' => 'transparent')
    );
}
elseif (is_file($source_filename.'.jpg'))
{
    echo '<img src="'.$source_filename.'.jpg" alt="">';
}
elseif (is_file($source_filename.'.png'))
{
    echo '<img src="'.$source_filename.'.png" alt="">';
}
elseif (is_file($source_filename.'.gif'))
{
    echo '<img src="'.$source_filename.'.gif" alt="">';
}

// vložit před </body>
if(is_object($flash)) { echo $flash->generFlash(); }

Vycteni nazvu polozky menu

$M->getPageTitle($M->GetMID4Code('sys_homepage'));
$M->getPageTitle($showid);
$M->showHtmlTitle();
$M->menuitems[$showid]->title_html
$M->menuitems[$M->GetMID4Code('sys_homepage')]->title_html

Vyčtení volitelné položky + dědění z menu

$M->menuitems[$showid]->data['miniweb_gallery_type'];
$M->getAttribInherit($showid, 'nazev_volitelne_polozky_v_typech');

Vyčtení volitelné položky + dědění z článku

$art_page = new TWPArt($M->GetMID4Code('systemovy_kod_menu'), $typ);
echo $art_page->data->cross_desc;

Vycteni obsahu clanku daneho sys_kodu

if ($M->menuitems[$M->GetMID4Code('sys_code')] && $M->menuitems[$M->GetMID4Code('sys_code')]->koncept == 'F')) {}
if ($M->menuitems[$M->GetMID4Code('sys_code')] && $M->menuitems[$M->GetMID4Code('sys_code')]->zobrme != 'N')) {}

// vlozit do php nad doctype, na konec inicializace webu
include_once('art_object.inc');
$pagedata = new TWPArt($showid, $typ);

$art_page = new TWPArt($M->GetMID4Code('platby'), $typ);
$art_page->GetWithDisc = false;
// vypsat clanek
echo $art_page->getArtTransformed();
// vypsat popis
// echo $art_page->getPopisTransformed();
unset($art_page);

Vložení hlášky z DB do menu

konstruktor PHP

<xsl:value-of select="/menuextended/@msg_str_dalsi_info_zde" disable-output-escaping="yes" />

XSL menu

$MXE->set('add_xml_attribs_arr', array('msg_str_dalsi_info_zde' => $L->get('general', 'str_dalsi_info_zde')));

Přepínání mutací

echo '<div id="change-lng">
<a '.($ln == "cz" ? " class='actv'" : "").' href="'.$GLOBALS['SYS_WEB']->lang()->getVersionUrl($typ_array['menu_cz'], $M).'">&amp;#269;esky</a> |
<a '.($ln == "en" ? " class='actv'" : "").' href="'.$GLOBALS['SYS_WEB']->lang()->getVersionUrl($typ_array['menu_en'], $M).'">english</a>
</div>';

Vyseparovaní texty vyčteme z DB  příkazem, který text přímo zobrazí

<?php $L->show("group_id", "message_id"); ?>

nebo vrátí jako řetězec

<?php echo $L->get("group_id", "message_id"); ?>

Regulár pro vyhůedání Total Commander

á|ä|é|ë|ě|í|ó|ö|ô|ú|ů|ü|ý|č|ď|ň|ř|š|ť|ž|ĺ

Regulár pro vyhůedání Komodo

á|ä|é|ë|ě|í|ó|ö|ô|ú|ů|ü|ý|č|ď|ň|ř|š|ť|ž|ĺ|Á|Ě|É|Í|Ó|Ú|Ů|Ý|Č|Ď|Ň|Ř|Š|Ť|Ž

Odstranění diakritiky a názvů souborů – Total Commander

_| |á|ä|é|ë|ě|í|ó|ö|ô|ú|ů|ü|ý|č|ď|ň|ř|š|ť|ž|ĺ|Á|Ě|É|Í|Ó|Ú|Ů|Ý|Č|Ď|Ň|Ř|Š|Ť|Ž
-|-|a|a|e|e|e|i|o|o|o|u|u|u|y|c|d|n|r|s|t|z|l|A|E|E|I|O|U|U|Y|C|D|N|R|S|T|Z

Označení v XML

<group sqltable="wiboform" primary_key="id" name="wiboform">
    <messages>
        <message id="hotline_perex">{%str_form_hotline_perex}</message>

Vyčtení v XSL z definice v XML

<xsl:value-of select="group[@name='wiboform']/messages/message[@id='hotline_perex']" disable-output-escaping="yes" />

Vyčtení v XSL přímo z DB

<xsl:value-of select="/shop/lang_strings/shop_detail_c_vzoru" />
%call:getMainCompanyName%
%call:getMainCompanyEmail%
%call:getMainCompanyPhone%
%call:getDomain%
%call:getDomainFull%

MP2 features

Spuštění GRUNT v Putty na daném virtuálu

  1. mp workon new × mp workon rfid-epc-cz
  2. grunt watch

Technologie a metodiky

  1. HTML5
  2. BEM
  3. Boostrap 4
  4. SASS
  5. mikrodata
  6. SVG
  7. GIT

Umístění projektu na serveru

Každý nový projekt MP2 se dělí na 2 základní bloky - projekt a jádro. Jako webmaster budeme pracovat výhradně s blokem projektu. Základní složkou pro projekt je /client.

Dělení složky /client:

  • /build
  • /core
  • /static
  • /vendor

Z těchto 4 základních složek nás budou zajímat pouze dvě - /core a /static.

/Core:

V této složce najdeme soubory pro tzv. "jádro projektu" (neplést s jádrem celého MP2 !). Zajímá nás pouze složka "partials", kde se nachází šablony všech stavů a komponent (rozdělené do podsložek "components" - komponenty, "containers" - stavy, které jsou definovány pomocí rozložení komponent a volně uložené- to jsoušablony základních stavů - většinou 404, homepage, základní rozložení do sloupců jako one-col, two-cols apod.).

Ukázky partialů (šablon) komponent a stavů (komponenty a stavy obecně k pročtení zde).

/Static:

Tato složka je určená pro statické soubory jako jsou obrázky, veškeré stylopisy (SASS), obsahuje také index.html a favicon. Může obsahovat další potřebné statické soubory.

Složky /build a /vendor:

Tyto složky nás jako webmastera zajímat nebudou - jsou určeny pro angular programátora. Ve složce /build jsou umístěny vybuildované soubory stylů a js, složka /vendor obsahuje nainstalované moduly (extensions) přes bower. Do těchto souborů není dovoleno jakkoli zasahovat!!! (zásah by byl pouze dočasný - tyto moduly se automaticky aktualizují a přepisují),

Obecný postup tvorby

  1. Vytvoříme funkční prototyp na úrovni základní masky bez modulů. Splňuje BEM metodiku.
  2. Po odladění prototypu se prototyp zkopíruje a rozdělí do partials.
  3. Formátování masky.
  4. Rozhodnout využití SVG na místech dle využití. Možnosti vložení jako <img> nebo přímé <svg> nebo voláním pomocí xpath ze sprite.
    1. <img data-mp-responsive-src="{{image.assets.original}}">
    2. inline vložení <svg> do elementu <span data-ng-include="image.assets.original">
  5. Nepoužívat fontawesome apod.
  6. Implementace MP2 a formátování. Commit vždy po dokončení celého funkčního bloku.
  7. Implementace mikrodat.
  8. Kontroly viz článek

CSS pravidla

Používáme metodiku BEM na úrobni označování objektů, a komponent. Pokud to projekt vyžaduje, můžeme prexixy rozšířit i na utility a hacky. Prvky shodné pro celý web, jako skou hlavičky a paty webu neprefixujeme (nejsou komponentami).

Struktura souborů

  • umístění souborů <projekt>\client\static\sass\
  • hlavní soubory
    • _variables.scss – veškeré nastavení projektu
    • bootstrap.scss – povolit jen include souborů, které jsou na projektu potřeba
    • mask.scss – hlavní maska webu a komponenty
    • menus.scss – definice menu
  • pomocné soubory
    • bootstrap-extension.scss – pomocný soubor pro rozšíření
    • mixins.scss – pomocný soubor pro vlastní mixiny
  • soubory pro admina
    • ckeditor-contents.scss – formátování obsahu pro CK editor
    • ckeditor-editor.scss – úprava UI CK editoru

CSS komentáře

Označení hlavních komponent

/* Accordion
   =============
*/

@include component('accordion')
{
    .c-accordion__heading {

Označení důležitých částí

// Pomocne menu v hlavicce webu pro SM a XS
// --------------

@include component('menu-mobile')
{
    position: absolute;

    // Prvni uroven
    // -------------

    > li + li {
        border-top: solid 1px lighten($brand-primary, 10%);
    }

    // Druha uroven
    // -------------

    .dropdown-menu {

Poznámky

// Pomocne menu v hlavicce webu pro SM a XS
// --------------

@include component('menu-mobile')
{
    position: absolute;

    // Sipka nahoru
    &:after {
        content: "";

Vysvětlivky

/* BEM elements highlighter
   =============
*/

// Highlights BEM 'object', 'component' and m@gnetpro component

// [1] + [2] true  => show borders and comments
// [1] + f2] false => show borders and comments on :hover
// [1] false + [2] true => show bordes + comments on :hover
// [1] true + [2] false => show only comments

$bem-debug-view-text: true !default; // [1]
$bem-debug-view-outline: true !default; // [2]

@import "bem-debug-view";

BEM pro základní masku

Základní bloky s definicí komponenty prefixujeme "o-" (object), protože komponenty a angular obecně přidávají různý počet <div>, nemůžeme obecně využít kaskádu CSS.

<div class="o-text-content" data-ng-if="article.galleries.default.media.length" data-ng-controller="galleryCtrl" data-ng-init="paramAttr = 'gallery'">
    <div class="c-gallery clearfix" data-ng-if="article.galleries">
…

V případě potřeby takto prefixujeme element ihned pod podmínkou zobrazení.

BEM pro komponenty

Komponentou myslíme funkně uzavřený celek, který lze volně umisťovat v kódu (více instancí nebo pozic). Změny vzhledu komponenty realizujeme předně modifikátory, výjimečně změnou zanoření. Účelem je mát definici vzhledu komponenty na jednom místě kódu.

BEM pro menu

Pro jednoduchá menu aplikujeme BEM jen na hlavní blok a dále se spoléháme na dědičnost CSS a predikovatelnost HTML struktury.

Na Složitá menu (vyskakovací) aplikujeme BEM jen na hlavni bloky a důležité uzly (wrappery řídící zobrazeni dropdown a další). Elementy <li>, <a> ponecháváme bez označení třídami jako u jednoduchých menu.

Pro velmi složitá menu aplikujeme BEM na celý DOM včetně odkazů apod.

Seznam činností, které se provádí před nasazením na produkční prostředí. Jedná se o kontroly a testy.

Obsah a HTML

  1. Správný title, meta description případně keywords
  2. Správná struktura nadpisů
  3. Facebook Open Graph
  4. Twitter Cards
  5. Strukturovaná data pro Google
  6. Ikony a favikony – dokumentace, generování ikon, generování favikony (generujeme 16-32px)
  7. Nastavený "theme-color"
  8. Správně nastavený viewport
  9. Nastavený meta pro skype
  10. Validní kód dle W3C
  11. Kontroly externích odkazů
  12. Kontorla jestli jsou SVG vkládány jako sprite a volány pomocí xpath nebo přímo vkládány a nebo linkovány v <img>
  13. Konrola písem: forma načítání a použité písmové rodiny.

CSS a JS

  1. Validní HTML Boostrap kód
  2. Sémanticky korektně napsaný HTML kód (atributy main, article atp., správně zanožené nadpisy, footers atp.)
  3. Korektní CSS resp. CSS linter viz MPV-209
  4. Využití BEM metodiky na HTML a CSS, kontrola případných nežádoucích multiplicit.
  5. Produkční kód je minifikovaný a rozdělený na kritické soubory umožňující zobrazení první části obsahu v co nejkratším čase. Obsahuje jen na webu využívané moduly viz optimalizace Boostrap dle komponent i moderrnizr.
  6. Kontrola jestli načítáme jen potřebné knihovny.

Přístupnost

  1. Kontrola kontrastu už při realizaci grafiky viz nebo po realizaci.
  2. Hlavní obsah a navigace musí být přístupný bez JS.
  3. Funguje ovládání tabulátorem a šipkami.
  4. Správné typy formulářových polích.
  5. Kontrola dle WCAG stačí level AA
  6. Zvážit nasazení WAI-ARIA viz článek na Zdrojáku a tady

Kontroly zobrazení

Desktop

  • plná funkčnost a plné dodržení grafiky
    • IE11 (poslední verze) – test na vzd. ploše
    • Firefox (poslední verze) – test na vzd. ploše
    • Chrome (poslední verze) – test na vzd. ploše
  • plná funkčnost a částečné omezení grafiky (nerozhodí layout aplikace)
  • omezená funkčnost a částečné omezení grafiky (nerozhodí layout aplikace)

Mobilní zařízení – tablet a mobil

  • plná funkčnost a dodržení základní grafiky, případně responzivního chování
  • v případě potřeby
    • tablet Android 4.2 – p.Malý, p.Novosad
    • mobil Android 4.4 – p.Malý, p.Chládek, p.Vrána …
    • mobil iOS – p.Krause, p.Petrla
    • Windows – testujeme pouze zmenšením prohlížeče IE11 na desktopu, případně p.Babáček

Pozn.: po dohodě lze samozřejmě u konkrétního projektu garantovat i jiné prohlížeče.

Ostatní

  1. Grafika je dostupná i pro retina displeje.
  2. Rychlost načítání a first-byte viz pagespeedInsignts, webpagetest.org
  3. Chybové stránky 40x a 50x v designu webu s a omluvným textem, mapou webu a případně vyhledávacím polem.
  4. Správně nastavene bezpečnostní hlavičky securityheaders.io
  5. Kontrola hlaviček ze serveru redbot.org
  6. robots.txt
  7. Generujeme XML s mapou webu.
  8. Registrace GA, WT, Search Console, Tag mamager?
  1. Grafika pomáhá prezentovat obsah webu, ne naopak
    Pokud je větší část stránky (jak plošně tak objemově) věnována vizuálním kreacím, uživatele, hledajícího konkrétní informaci, to rozhodně nepotěší.
  2. Web musí být vyrobitelný
    Ne vše, co je možné v grafickém editoru, je možné v HTML. Vždy je nutné volit takové řešení dokumentu, které odpovídá standardům používaných ve společnosti a zdravému rozumu. Pokud je v návrhu formulářový prvek 100 px od horního okraje a 37 px od třetího písmena druhého řádku textu vlevo, zůstane to tak opravdu jen v návrhu... Vyhněme se rovněž stínování textu na členitém podkladu a podobným situacím.
  3. Grafický návrh je svatý a slouží jako podklad pro web
    Mnoho grafiků to tak necítí a dopřává "kodérovi", který o to nestojí, tvůrčí svobodu v dodělávkách a opravách. Kodér se snaží návrh vždy dodržet, mysleme na to. Např. je-li v návrhu vyhlazené písmo, na stránkách bude také a počítá se automaticky s tím, že bude tvořeno obrázkem nebo generováním z PHP. Pokud je v návrhu barva textu #D4D0C8, na webubude použita také.
  4. Textové odkazy se snažme dělat textově
    Je nesmysl dělat složitý grafický odkaz tam, kde po minimální úpravě stačí odkaz textový. Zkrátí se vybavovací čas serveru i doba řezání masky. To je třeba jeden z klíčových faktorů pro hladkýběh webů s vysokou návštěvností.
  5. Češtinou to nekončí
    Přesto, že klient říká ne, mysleme tím ANO jazykovým mutacím. Víte, že rozsah německého textu je asi o třetinu větší než je tomu u textu českého?
  6. Apple nemá Arial
    Ne každý skočil Microsoftu na špek a ne každý používá Internet Explorer. Je mnoho prohlížečů, je mnoho operačních systémů a je málo použitelných fontů. Nepasujme novinky na dva řádky protože, psáno jiným písmem, se nám to nepodaří. Není vhodné formátovat vzhled formulářových prvků. Řídí si to operační systém sám a pokaždé jinak (xp, mac os, txt, linux atd.).
  7. Rozbalovací menu aneb noční můra grafikova
    Co říct? Nerozbalujeme přes select box (tzv. "kombáč"), text area, frame, iframe, flash.
  8. Co se dá generovat, generujme
    Menu, seznamy položek, galerie obrázků, soubory ke stažení, tabulky; to vše lze zobrazovat automaticky. Jen jestli to má všechno stejné rozměry... Na druhou stranu, moduly publikačního systému mají, oproti čistému HTML, omezené možnosti. Informujte se jaké.
  9. Každý návrh doprovází textový popis funkcí
    Každý over stav položky, interaktivní chování formulářů, počet vypisovaných znaků atd.; vše musíbýt přesně popsáno v textovém dokumentu přiloženému ke grafickému návrhu.
  10. Uživatel publikačního systému přemýšlí jinak
    Nemá cenu myslet si, že uživatel bude dodržovat Vaše "nekompetentní" rady týkající se vzhledu dokumentu. Nebude. Hned první den po spuštění se na úvodní stránce objeví hláška o změně čísla kanceláře ředitele Pokorného, vyvedená 20px zářivě zeleným boldem, doplněná 1600px obrázkem koťátek v tabulce s 5px modrým okrajem. Mysleme i na to při návrhu webu.

Vyhledávání v prvních 500 (optimum) položkách. Limit databáze je 2000 položek.

var articles = magnetpro.models.ArticleAdmin.objects.limit(500).fetch();

Vyhledávání v prvních 2001-4000 položkách

var articles = magnetpro.models.ArticleAdmin.objects.skip(2000).limit(2000).fetch();

Vyhledávání v článku s definovaným ID

articles = articles.filter("id", "==", "539ee4896a6ab73368000001");

Vyhledávání v prvních 500 (optimum) položkách. Limit databáze je 2000 položek.

  • Nejprve nutno udělat fetch viz Načtení objektů.
  • Počkat aspoň 5 sec na vyřízení požadavku.
  • article.description = ""; … provede nahrazení v objektu article prázdnou hodnotou
  • article.save(); … uloží objekty articles
for (var i = 0; i < articles.length; i++) {
    var article = articles[i];

    if (article.description) {
        var myresults = article.description.match(/Žádná část těchto/g);
        var cssLabel = "padding: 1px 5px 1px 0; background: #D9EDF7; color: #31708F";

        if (myresults) {
            console.log("%cID: "+article.id, cssLabel, "nRESULT: "+myresults);
            console.log(myresults);
            article.description = "";
            article.save();
        }
    }
}
  • Nejprve nutno udělat fetch viz Načtení objektů.
  • Počkat aspoň 5 sec na vyřízení požadavku.
  • Vyhledáváme ne/prázdný atribut style v HTML tagu.
for (var i = 0; i < articles.length; i++) {
    var article = articles[i];

    if (article.rawData) {
        var myresults = article.rawData.replace(/("|&lt;[a-zA-Z]+|&lt;hd)[ ]+style="[^"]*"/g, $1);
        var cssLabel = "padding: 1px 5px 1px 0; background: #D9EDF7; color: #31708F";

        article.save();
    }
}