Misljenje o iskodiranom sajtu

Bok svima. Motiviran vasim odgovorima na mojoj temi o tome kako zelim biti front end developer, nasao sam free psd template na internetu i odlucio sam ga iskodirati.

Link sajta

Volio bih cuti vase komentare.

Pozz :smile:

Hocse iskreno ili da se lazemo?
Osim toga ne znam sto da tu komentiramo, iskodirani HTML/CSS site koji ne radi? Koristenje Bootstrapa za nesto za sto je taj isti Bootstrap overkill? Ukljucivanje css datoteka krivim redoslijedom? Sta da komentiramo?

Vjerojatno je mislio samo na design site-a, međutim mene je zaintergrirao tvoj odgovor…
Ne kužim što si mislio pod uključivanje css datoteka krivim redosljedom i zašto je to bitno? I šta ti znači Bootstrap overkill, misliš li na nepotrebno korištenje Bootstrapa?
Hvala na odgovoru

@ivan2 je htio postati front-end dev. Ovo je uzeo za vježbu pa želi feedback na kod.

Učitao je custom css prije bootstrap css-a, naprimjer.

Imenjače nedaj da te demotiviraju!

Ako ti je to prvi uradak, po meni tako nije loše. Nitko se nije rodio
pametan. Nitko nije svoje prve linije koda iskucao onako kako se to
očekuje od nekoga tko ima višegodišnju praksu.

Ja također nisam pobornik upotrebe Bootstrapa (i sličnih stvari) opčenito. A naručito
za jednostavne prezentacijeske stranice. To je “razbacivanje div-ovima, klasama…”
(što manje koda - tim bolje, jednostavniji DOM, brža stranica…)

Evo šta je koma kod Bootstrapa

<div class="resume" id="resume">
	<div class="container">
		<div class="row">
			<div class="col-sm-10 col-sm-offset-1">
				<h1>RESUME</h1>
				<p>Lorem ipsum dolor</p>
				<a href="#">DOWNLOAD RESUME</a>
			</div>
		</div>
	</div>
</div>

Row-ova, div-ova i klasa kao u priči.
A bilo bi dovoljno i ispravnije:

<section class="resume">
	<h1>RESUME</h1>
	<p>Lorem ipsum dolor....</p>
	<button type="button">DOWNLOAD RESUME</button>
</section>

Ako već koristiš Bootstrap, onda ga koristi, pa gumbe definiraj - kao button.

Također, u tvom markupu od HTML5 elemenata ima samo footer i header. Ako je HTML5,
onda se u kodu očekuju i drugi HTML5 elementi (nav, section, aside, figure…).
A tvoj markup je gomila (u večem broju) nepotrebnih divizija.

Istina, css ti se učitava krivim redoslijedom.
Css mi se neda pregledavati, jer je minimaliziran (za feedback si nam mogao ostavi develop verziju).

Ima grešaka u markupu - ali sve se to da srediti.
Koristi W3C validator za provjeru: https://validator.w3.org/

U IE8 (emulation) ti se stranica respada :slight_smile:
Danas se još uvijek optimizira za IE8 (a neki optimiziraju čak i za IE7).
Dobar IE bug fixer koji krpa večinu old IE bugova: https://code.google.com/p/ie7-js/

Nismo vidjeli PSD dizajn?
Pitanje je koliko je precizno iskodirano prema PSD dizajnu.
Danas se Pixel Perfect podrazumijeva kada se radi PSD to HTML.
Ja koristim Firefox Pixel Perfect extension: https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/
Izvrstan alat za tu svrhu.

Sve u svemu nije loše.
Drugi uradak će biti bolji, treći prihvatljiv…
A četvrti bi mogao biti dovoljno dobar da ga naplatiš.

Samo naprijed!

Npr. da je prije bootstrap.css ucitao main.css u kojem bi trebale biti njegove promijene, pa tako sve njegovo sto bi eventualno trebalo ponistiti bootstrapovo ce biti prepisano od bootstrapa. Rijedoslijed je vazan bas zbog toga.

Bootstrap na obicnim web stranicama nema smisla jer je potpuno nepotreban. Za obicnu stranicu sve to slozis u par 100 linija koda.

To se dogadja zato sto se ne kuzi princip i osnova Bootstrapa i ne pregledava se detaljno dokumentacija:
To se moze i ovako prepisati

<div class="container">
    <div class="about">
    </div>
    <div class="row resume" id="resume">
        <div class="col-sm-10 col-sm-offset-1">
            <h1>RESUME</h1>
            <p>Lorem ipsum dolor</p>
            <a href="#">DOWNLOAD RESUME</a>
        </div>
    </div>
    <div class="skills">
    </div>
</div>

S ovime se slazem u potpunosti.

Also true.[quote=“Horz, post:5, topic:25421”]
Danas se još uvijek optimizira za IE8 (a neki optimiziraju čak i za IE7).
[/quote]
Ok, ja takve ne poznajem. Mi npr. u firmi ovisno o vrst stranice, najdalje sto gledamo je IE 9, ispod toga za nas ne postoji.[quote=“Horz, post:5, topic:25421”]
Pitanje je koliko je precizno iskodirano prema PSD dizajnu.Danas se Pixel Perfect podrazumijeva kada se radi PSD to HTML.
[/quote]
Ne bas u potpunosti. Ako se koristi nekakv frontend framework onda nema potrebe inzistirati na PPu jer je to onda sranje i nece se postici nista, a ako se ipak inzistira na tome onda se ne koristi nikakav framework jer nema smisla.

Mi jos uvijek moramo misliti na IE6 :frowning:

Hm…
Pa ima još dosta IE8 usera…
Barem je bilo zadnji put kada sam gledao statistiku.

Takve treba forsirati na upgrade.

Zapravo mi je drago čuti da firma optimizira samo za IE9 <,
zato jer širenje takvog stava uvjetuje upgrade browsera kod usera.
Bolje za njih, bolje za nas.

@ognjen
IE6? :slight_smile:
Pa toga u statistikama nema odavno.
Čemu optimizacija za tu krntiju?
Za koga?

Znao sam da radim greske prilikom kodiranja, ali ovakve stvarno glupe greske, tome se stvarno nisam nadao, od ukljucivanja css, pa do gomilanja div-ova.

Sto se tice minimaliziranog css-a ispricavam se sto nisam dao develop verziju ali posto radim u SASS-u automatski mi se normalni css minimalizira.

Sve u svemu, na puno stvari ste mi ukazali greske i zahvalan sam vam na tome neopisivo, to me naravno i motivira da svaki sljedeci rad napravim bolje. Hvala!

Japanci su jedni od navjernijih korisnika IE6
Recimo, Misumi je jedan od najvecih proizvodjaca/distrubutera, njihovi proizvodi idu u industriju inezenjerima koji rade na XP racunalima. Ti inzenjeri nemogu nista instalirati i updejtirati, a zapravo i nece jer im ovo provjereno radi a i nije njihov posao.
U proizvodnji se racunala ne updejtiraju lako, jer sudjeluju u procesu koji kompleksan a i nesmije se zaustaviti.

1 Like

Da, ali ta računala onda nisu niti najmjenjena za surfanje po internetu, već za intranet i aplikacije koje su vezane za firmu i kao takava se ne bi trebala brojati u statistiku.

Kod nas se isto radi za IE9+, sve ostalo je neopotrebno ako se radi web za mase.

Jeste ne bi trebala, ali oni ih koriste da skinu CAD modele sa neta.
Jednom kad ga skine i ubaci u svoj dizajan ondak ce i kupiti taj dio…, tako barem razmislja proizvodjac tj distributer.
Oni vele da se 80% dowload CAD-a pretvori u kupnju.


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Profit Monkey