Jak koduji profi frontendisti?

Jaky je rozdil v tom, kdyz koduje laik samouk sve prvni kody a kdyz koduje profesional? Jde mi o workflow... Uvedu par prikladu. Kdyz clovek zacina psat prvni kody tak asi casto nema vice monitoru, takze zbytecne preklikava mezi okny. Taky asi nema zadne nastroje typu validator (nebo o nich nevi), mozna maji profici i neco jako svuj framework s kody nebo jsem videl IDE a rozsireni, ze kdyz pisete napriklad odstavce, tak nemusite psat stale p jako pi.. ale nejak to jde napsat, ze to vynasobite poctem odstavcu atd.? Byl bych rad kdybyste se podelili o tipy, ktere mohou znacne zefektivnit praci a zkvalitnit kod. A ktere jste treba ze zacatku asi jako kazdy nepouzivali ci neznali , kdyz jste zacinali treba s notepadem/PSPadem a zkouseli copy a paste z jakpsatweb atp. Díky za podmetne prispevky a vas cas.

Vzhledem k posledním pár vláknům si tedy na solidní dotaz dovolím něco málo sepsat, ze svých vlastní zkušeností (ale 100% nejsem profesionál).Vybavení (mé osobní rozhodnutí): - Dříve - Acer notebook s W10, myš (touch pad to má na pi*u) a displej taky stál za nic ... ale na běžnou práci bohatě postačil - Nyní - Macbook Pro 2017 (dělám i náročnější věci a chci mít vždy výkon i na cestách za klientem ... proto nemám desktop) ... postupem času jsem upřednostnil OS X (už jsem na Apple ekosystému 2 roky = předtím jsem měl 10 let Windows od 95 do W10)Mám taky na testování - Android telefony, iPhony, iPad, Xiaomi Tablet, Acer NotebookNástroje - Dříve - žádné - Nyní - https://yellowlab.tools, https://webpagetest.org, http://browserstack.com, https://jsonformatter.org/json-pretty-print, https://developers.google.com/speed/pagespeed/insights/HTML: - Jako začátečník jsem měl notepad++ a učil se dle jakpsatweb.cz. Neměl jsem žádný nápomocný nástroj. - Jako pokročilý mám Sublime Text 3 a Visual Studio Code (VSC), které mi dává možnosti jako Emmet (napíšu ul>(li>a)*3 a vygeneruje mi to list o 3 položkách s odkazy), automatické doplnění závorek, automatická nápověda tagů, uzavírání tagů + gulp plugin BrowserSync aby po uložení se aktualizovala stránka a já nemusel ručněCSS: - Jako začátečník jsem dlouho dělal čisté CSS bez novějších technologií - Jako pokročilý jsem přešel na Gulp (zdál se mi lepší než Grunt) a začal psát v SASS (resp. SCSS) ... díky čemuž mám proměnné, stromové vnořené psaní, mixiny, díky Gulpu pak minifikace, autoamtické doplnění prefixů, podpora syntaxe (bloků kodu) pro starší prohlížeče (např u display: flex; mi to doplní display: block; ms-flex atd).JS: - Jako začátečník jsem dělal hlavně jQuery bez nějaké kontroly - Jako pokročilý mám automatické minifikace, píšu víc a víc kody v ES6 (minifikace díky gulp knihovně) = omezuji kody v jQuery, kontrola kodu, kotrola Můj simple Gulp file níže. Vysvětlení: - pluginy pro minifikace, sass, autoprefixer a browsersync - v poznámce jsou kody pro browser sync, protože se kod přesouvá automaticky na FTP a nepotřebuji tedy vidět lokální verzi v prohlížeči - Co bych mohl doplnit: Výpis chyb (kde přesně v jakém souboru je chyba při minifikaci), Něco na obrázky (zmenšení, seskupení do sprite), pro WordPress automatické generování MO souboru (soubor s překlady) pro mé WordPress šablony (projekty)var gulp = require("gulp"), uglify = require("gulp-uglify-es").default; sass = require('gulp-sass'), prefixer = require('gulp-autoprefixer'); //browserSync = require('browser-sync').create();gulp.task('default', );gulp.task('scripts', function () { gulp.src('./src/js/*.js') .pipe(uglify()) .pipe(gulp.dest('./build/js/'))});gulp.task('styles', function () { gulp.src() .pipe(prefixer({ browsers: , grid: true })) .pipe(sass({ outputStyle: "compressed" })) .pipe(gulp.dest("./build/css/")); //.pipe(browserSync.stream());});gulp.task('watch', function () { //browserSync.init({ server: { baseDir: './' } }); gulp.watch('./src/js/*.js', ); gulp.watch('./src/scss/**/*.scss', ); //gulp.watch('./*.html').on('change', browserSync.reload);});Navíc mám v VSC GitLens pro Git, když to je někde potřeba - jakože je. Za mě hrubý základ. Je nutno znát dost věcí, aby to workflow bylo efektivní, je třeba si najít nástroje, hardware, který vyhovuje a vylepšovat.Poznámka: 100% to není pefektní a stále vylepšuji, zkouším nov násttroje, knihovny, styly zápisů kodu. Je to o neustálém progressu.

Doctore97: Super, diky za podmetny prispevek.Ano, tim vyse jsem myslel asi Sublime text s pluginen. Ze prave clovek nemusí vypisovat veci vicekrat. Nicmene je placeny, free nastroj je asi tedy pro zacatek nejlepsi ten PSPad? To pouzivani pre-procesoru je pro me matouci, ani nevim jaky vybrat (SASS, LAS,..) a jak to funguje no ono i samotne CSS 3 toho na me nabizi dost a to ma byt snad uz I vydana 4...V klidu si to budu muset vicekrat procist, je toho tam pro me dost neznameho/noveho... nicmene na to urcite mrknu.Jeste k tomu testovani, je lepsi porizovat cisty Android typu Google Pixel nebo je to fuk? A da se to nejak testovat I nehardwarove mimo zarizeni pro zacatek?

To si ten notebook objednával celý den nebo proč si včera nedorazil?

Já používám kombinaci Gulp a AMD RequireJs. Do teď jsem lepší kombinaci nenašel.

Máme tu důkaz, že moderátoří žijou(smazali první diskuzí).