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 Notebook

Ná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)

Kód:

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', ['scripts', 'styles', 'watch']);

gulp.task('scripts', function () {
	gulp.src('./src/js/*.js')
		.pipe(uglify())
		.pipe(gulp.dest('./build/js/'))
});

gulp.task('styles', function () {
	gulp.src(["./src/scss/*.scss", "./src/scss/**/*.scss"])
		.pipe(prefixer({ browsers: ["last 99 versions"], 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', ['scripts']);
	gulp.watch('./src/scss/**/*.scss', ['styles']);
	//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?

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í).