Prodej projektu Duchod.cz - cena 550 tis Kč. Dále MojeFinance.cz, DuchodovaReforma.cz
Zobrazují se odpovědi 1 až 6 z 6

Jak koduji profi frontendisti?

  1. 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.

  2. Co se právě děje na Webtrhu?
  3. 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.

  4. 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?
    Naposledy upravil Pannulita : 01.05.2019 v 14:47

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

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

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

Hostujeme u Server powered by TELE3