macOs
arrow_drop_downASCII extend characters sets
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
arrow_drop_downRegex content
<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])
arrow_drop_downRegex URL/URI
Extract the host / subdomain.domain.tld out of the URL with regex
https?:\/\/(.*?)\/
Info
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}$
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":
^\/[\d]\/
- Starts with /number/[a-zA-Z]
- Followed by a letter\/[\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
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
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
- https?:\/\/ - Match http:// or https://
- ([\w.])*- Match potenntially existing subdomain
- ([\w\d-]*) - Match the domain
- \.([a-z]*) - Match Top Level Domain (.com, .rs, .io...)
- \/edu\/what-(is|are - Match "/edu/what-is" or "/edu/what-are"
- (.*)\/$ - 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
arrow_drop_downWebPageTest advanced preset



arrow_drop_downGIT
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:
- From the command line, change into the repository directory.
- Set your username:
git config user.name "Jaroslav Vrana"
- Set your email address:
git config user.email "jarda@fastandcomfy.io"
- 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
arrow_drop_downHTML entity
- http://www.w3schools.com/charsets/ref_utf_punctuation.asp
- non-braking hyphen ‑
‑
(pevné rozdělení) - discretionary hyphen
­
(volitelné rozdělení) - mínus −
−
- bullet •
•
- circle ●
●
chevron | entity | chevron | entity |
---|---|---|---|
› | › |
» | » |
‹ | ‹ |
« | « |
„ | „ |
© | © |
“ | “ |
® | ® |
& | & |
™ | ™ |
@ | @ |
“” | votes’ |
^ | ^ |
arrow_drop_downChrome developer console
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)));
arrow_drop_downCSS a jiné zajímavosti
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.
arrow_drop_downPrůhlednost černá na bílé
0% | 5% | 10% | 15% | 20% | 25% | 30% | 35% | 40% |
---|---|---|---|---|---|---|---|---|
#fff | #f2f2f2 | #e5e5e5 | #d9d9d9 | #ccc | #bfbfbf | #b2b2b2 | #a6a6a6 | #999 |
arrow_drop_downKomodo regEx
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
arrow_drop_downGULP ekosystém
ONIO maily
Bitbucket větev nabidka-zakaznicke
Tasky
default
(serve
) – spustí ladění CZ verzebuild
– build produkčních jazykových verzístylelint
stylefix
Princip
streamQueue
+conctat
jednotlivých HTML souborůhtmlClean
vyčištění HTMLprettify
formátování HTML (dev)inlineSource
vložení externího CSS souboru jako<style>
minifyInline
minifikace inline<style>
- uložení kompletního HTML
Tvorba produkčních jazykových verzí gulp build
.
ONIO Invoice Uploader
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
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
Prezentace (Bespoke)
arrow_drop_downYARN, WEBPACK, GULP, NPM
- 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
- spustit Docker
- ve Windows PoweShell do repositáře projektu
- spustit
docker-compose up -d
(start docker kontejneru dledocker-compose.yml
) - spustit
docker/ssh
nebo příkaz z volaného souborudocker exec -u www-data -it eccklinika bash
pro spuštění skriptů (GULP atp.) - 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.
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řebyjs
– konkatenace, minifikace JSfonts
– kopírování souborůlatte
– zpracování latte šablonothers
– 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
= produkcedevelopment
= pull requesty ze svých branchetest
= 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
jakon: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, screenshootsred
as error for old or unused elementsgreen
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)
arrow_drop_down.htaccess
- https://gist.github.com/ludo237/5857215
- https://gist.github.com/ScottPhillips/1721489
- https://coolestguidesontheplanet.com/redirecting-a-web-folder-directory-to-another-in-htaccess/
- https://www.askapache.com/htaccess
- https://www.jakpsatweb.cz/server/mod-rewrite.html
- https://www.jakpsatweb.cz/server/mod_rewrite/mod-rewrite-priklady.html
## 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/
arrow_drop_downMultiple Boostrap dropwown
<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">↓</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">↓</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;
}
arrow_drop_downMaterial design light
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
arrow_drop_downWindows CMD shell
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 {} \;
arrow_drop_downImageMagic
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
MP1 features
arrow_drop_downPHP obecné vzory
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>';
arrow_drop_downPHP vyčítání
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);
arrow_drop_downJazykové mutace
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).'">&#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" />
arrow_drop_downRozesílky
- The Really Good Guide to Email Design + Bonus Checklist
- Email Development Best Practices 2017 by Email on Acid
- E-mail Builder by Campain Monitor
-
E-mail Builder by tabletrtd.com
- A Fluid Hybrid Design Primer ● Seashells template or Hybrid (spongy) template
- MailChimp list of email safe fonts
- Font fix by MailChimp, by Campaign Monitor
- Coding for DPI Scaling in Outlook 2007-2013
- preheaders ● retina images
%call:getMainCompanyName%
%call:getMainCompanyEmail%
%call:getMainCompanyPhone%
%call:getDomain%
%call:getDomainFull%
MP2 features
arrow_drop_downGIT
Spuštění GRUNT v Putty na daném virtuálu
- mp workon new × mp workon rfid-epc-cz
- grunt watch
arrow_drop_downPostupy práce MP2
Technologie a metodiky
- HTML5
- BEM
- Boostrap 4
- SASS
- mikrodata
- SVG
- 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
- Vytvoříme funkční prototyp na úrovni základní masky bez modulů. Splňuje BEM metodiku.
- Po odladění prototypu se prototyp zkopíruje a rozdělí do partials.
- Formátování masky.
- 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.<img data-mp-responsive-src="{{image.assets.original}}">
- inline vložení
<svg>
do elementu<span data-ng-include="image.assets.original">
- Nepoužívat fontawesome apod.
- Implementace MP2 a formátování. Commit vždy po dokončení celého funkčního bloku.
- Implementace mikrodat.
- 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.
arrow_drop_downPřed nasazením na produkční prostředí
Seznam činností, které se provádí před nasazením na produkční prostředí. Jedná se o kontroly a testy.
Obsah a HTML
- Správný title, meta description případně keywords
- Správná struktura nadpisů
- Facebook Open Graph
- Twitter Cards
- Strukturovaná data pro Google
- Ikony a favikony – dokumentace, generování ikon, generování favikony (generujeme 16-32px)
- Nastavený "theme-color"
- Správně nastavený viewport
- Nastavený meta pro skype
- Validní kód dle W3C
- Kontroly externích odkazů
- 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>
- Konrola písem: forma načítání a použité písmové rodiny.
CSS a JS
- Validní HTML Boostrap kód
- Sémanticky korektně napsaný HTML kód (atributy main, article atp., správně zanožené nadpisy, footers atp.)
- Korektní CSS resp. CSS linter viz MPV-209
- Využití BEM metodiky na HTML a CSS, kontrola případných nežádoucích multiplicit.
- 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.
- Kontrola jestli načítáme jen potřebné knihovny.
Přístupnost
- Kontrola kontrastu už při realizaci grafiky viz nebo po realizaci.
- Hlavní obsah a navigace musí být přístupný bez JS.
- Funguje ovládání tabulátorem a šipkami.
- Správné typy formulářových polích.
- Kontrola dle WCAG stačí level AA
- 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)
- IE 9 a vyšší verze – test lokální počítače, případně http://www.browserstack.com/
- omezená funkčnost a částečné omezení grafiky (nerozhodí layout aplikace)
- IE 8 a vyšší verze – test lokální počítače, případně http://www.browserstack.com/
Mobilní zařízení – tablet a mobil
- plná funkčnost a dodržení základní grafiky, případně responzivního chování
- simulátor Chrome, případně http://www.browserstack.com/
- Android – ver. 4.4
- iOS – ver. 8.0
- 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í
- Grafika je dostupná i pro retina displeje.
- Rychlost načítání a first-byte viz pagespeedInsignts, webpagetest.org
- Chybové stránky 40x a 50x v designu webu s a omluvným textem, mapou webu a případně vyhledávacím polem.
- Správně nastavene bezpečnostní hlavičky securityheaders.io
- Kontrola hlaviček ze serveru redbot.org
- robots.txt
- Generujeme XML s mapou webu.
- Registrace GA, WT, Search Console, Tag mamager?
arrow_drop_downDesatero grafického návrhu 2004
- 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ěší. - 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. - 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é. - 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í. - Č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? - 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.). - Rozbalovací menu aneb noční můra grafikova
Co říct? Nerozbalujeme přes select box (tzv. "kombáč"), text area, frame, iframe, flash. - 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é. - 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. - 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.
arrow_drop_downNačtení objektů
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");
arrow_drop_downSearch v description: delete + save
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 hodnotouarticle.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();
}
}
}
arrow_drop_downReplace v článcích: REGEX
- 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(/("|<[a-zA-Z]+|<hd)[ ]+style="[^"]*"/g, $1);
var cssLabel = "padding: 1px 5px 1px 0; background: #D9EDF7; color: #31708F";
article.save();
}
}