12 ms·

A Front End Engineer's Manifesto

39 points by hdragomir 14y ago

snogglethorpe 14y ago
He may "put the user first," but he clearly doesn't put the reader first ... ouch. oO;
daurnimator 14y ago
I thought it was a blank page at first... some sort of less is more statement.
- unwind 14y ago
  You failed to interpret the page author's 100% custom scrollbar (on the left edge of the screen) as an indicator that there was more content? That's ... odd. He clearly had your interests in mind when implementing that, since browser vendors just think about themselves with their annoying scrollbars that look the same on every page, even. Simplistic fools.
  - icebraining 14y ago
    It does have a custom scrollbar, but the normal one still shows up (at least on FF and Chrome), so I don't see the problem.
twiceaday 14y ago
"I will continue to foster both HEMISPHERES OF MY BRAIN" I thought this was debunked?
- saraid216 14y ago
  There's basically enough truth to it that you can't just refute-by-reality, but not enough to make statements like this acceptable by my standards. It's vague enough that it's not actually a useful statement for anyone taking it literally. See: http://www.psychologytoday.com/blog/brain-myths/201206/why-the-left-brain-right-brain-myth-will-probably-never-die http://www.psychologytoday.com/blog/brain-myths/201206/why-t...
atirip 14y ago
"I will educate my friends and family that WEB BROWSER CHOICE MATTERS" and "Most importantly and above all, I will put the needs of the USER FIRST over my own needs as a developer." So please do, put the needs of your USERS first. Your users do not NEED to be educated by you. It is not your business what browser they use.
- ajanuary 14y ago
  Friends and family != users. You can cater to the variety of platforms your users want to use whilst at the same time having useful and meaningful conversations with friends and family about what the best browser is for them. You don't annoy your users by trying to 'educate' them, but collectively we see a move forward.
- lucasf 14y ago
  The two are not mutually exclusive as you seem to imply. > Your users do not NEED to be educated by you. I think educating clients and users is actually crucial. For a lot of users browser was conscious choice, but there is big group that don't even know that there are different/newer browsers. First group can ignore advice but second group might benefit a lot. >It is not your business what browser they use. It absolutely is. Silly car metaphor: I'm taking my car to a service station. I expect mechanic to tell me that oil I'm using is not the optimal one. Whether or not I take his advice is my business. But informing me about substandard oil is very much his business. Also - If all of my users used modern browsers, I could save money by not spending time on ensuring my site performs well on old buggy browsers.
lucian1900 14y ago
Scrolling through that was very annoying. Page up/down obviously won't move by exactly one of the "pages".
- marceldegraaf 14y ago
  I found out that the page listens to j/k just as in Vim. However, it seems the scroll directions are inverted from Vim; j goes up and k goes down.
  - lucian1900 14y ago
    wtf
  - Evbn 14y ago
    So, it is iOS-style touch optimized for people who have onscreen keyboards?
- bestest 14y ago
  I found out you may also click on the easy-to-miss left hand side bar -- there are, uh, 'accessible' shortcuts to each slide.
daurnimator 14y ago
"Without JavaScript or CSS, or without mobile Webkit, my site may not look pretty but will still be functional." There goes backbone.js and other javascript MVC patterns. This is something I'm still unsure about. What do (you) people think of keeping your "data out of the DOM"?
- rimantas 14y ago
  It depends where your site falls on content_page<-------->web_app continuum.
  - daurnimator 14y ago
    the last time this came up as a serious question for me was in a web management console.
- Evbn 14y ago
  PhantomJS plus other tools to render a static snapshot and then serve? Image map? I imagine it is possible...
hatu 14y ago
This rubs me the wrong way for some reason. Maybe it just sounds really pretentious(?) In the end front-end (or any other) development exists to create services for the users, not for it's own sake as a philosophy or something.
conradfr 14y ago
I don't think it will convince anyone who doesn't do more or less all of that. And the scrolling is annoying.
HarrietJones 14y ago
"I will learn at the root, not the abstraction: JAVASCRIPT BEFORE JQUERY" I'm not sure why one high-end abstraction finds favour over another slightly higher high-end abstraction, but this sure sounds a lot like the people who insist that you can't be a good programmer unless you've learned some kind of assembler. On the "shoulders of giants" means we don't need to know javascript as well as jQuery. It means we don't have to know assembler as well as pascal. It means that we don't need to learn IP when we can just learn TCP/IP, and we don't need to learn TCP/IP when we can just use REST over HTTP. Learning at the root goes a lot further down than you want to go, need to go or are capable of going.
- rudasn 14y ago
  > On the "shoulders of giants" means we don't need to know javascript as well as jQuery. Not necessarily. I like to view it this way: When you are learning a new language (English, German, Chinese, whatever), in day to day conversations it is useful to know some expressions, idioms, or terms, but you should also know where they come from and how to explain them, and not just how to use them. Learning what "I'm pissed" means in British english is quite nice but if you say that to an American and responds "Who pissed you?", how are going to teach this person of the use of the word "pissed" in this context? Similarly, a jQuery-only developer will find it difficult to understand and explain what he meant to do with some piece of code, let's say $.each. A "native speaker", ie. a javascript developer, may be able to offer some advice or corrections, like "you could use Array.forEach in this scenario". (Granted this particular example may not be so good due but you get the point).
  - HarrietJones 14y ago
    There's always a tradeoff between knowing what something like "each" does and having that extra architectural clutter being a cognitive drag. I can see the point being made, and there are obviously going to be situations where getting closer to the metal is important, but getting closer to the metal isn't always a good thing. Sometimes, knowing things closer to the metal isn't good either. It took me ages to unlearn certain practices and just accept the garbage collector would do its job and I no longer need to think about unallocating memory. Like all things, this one isn't black and white and it's open to subjectivity. For me though, I feel that the negative side of having knowledge of lower levels of your architectural stack is a hindrance more than it is not.
csomar 14y ago
I will choose the RIGHT TOOL FOR THE JOB So just put this in a full static page. Why the scrolling? And also color/font choice is quite terrible. No responsiveness for small screens. Apparently, he didn't follow his own advice.
- ken 14y ago
  I was going to observe that you can (in Firefox, at least) turn off the custom stylesheet, and it becomes much more readable. But if you scroll all the way to the end, it jumps around and doesn't actually let you scroll to the end (perhaps due to its JS). There's definitely something weird on that page.
prasincs 14y ago
I'd expect an article titled Front-end engineer's manifesto to have better UI than this. First thing I assumed was that I could use up, down in my keypad to navigate through slides. Then right, left. Figured scrolling is okay. The sidebar that's supposed to show me how far I've read isn't apparent. The font choices and responsiveness coud be better. Reinventing scrolling isn't good. I'd have been fine if it worked for me on Chrome, it got stuck in page 4 and 5 and I had to press j/k few times to get moving again. If there's a tool that takes care of kind of stuff and frees you to do important stuff, why not use it? On that point, checkout impress.js for this kind of stuff.
ggwicz 14y ago
anyone more interested in the "brain hemispheres" bit (http://f2em.com/#brain-hemispheres http://f2em.com/#brain-hemispheres) should check out Miyamoto Musashi's collection of writings called "The Book of Five Rings" http://en.wikipedia.org/wiki/The_Book_of_Five_Rings http://en.wikipedia.org/wiki/The_Book_of_Five_Rings Just some great writing on this idea of being a "balanced" human, and how that influences, informs, and improves your skills. His skills were as a samurai, but the principles apply pretty universally. I got a lot out of the book, you can find it free on iBooks, Kindle, etc. EDIT wow, I actually didn't find a free version on Kindle, but here's a few formats for free from Archive.org -> http://archive.org/details/MiyamotoMusashi-BookOfFiveRingsgoRinNoSho http://archive.org/details/MiyamotoMusashi-BookOfFiveRingsgo...
jacobr 14y ago
> Without JavaScript or CSS [...] my site may not look pretty but will still be functional. For what reason exactly? Of course there are cases where it makes sense to follow this rule, maybe even the majority, but having it as #2 in your manifesto will severely limit what you can accomplish on the web.
- dotborg 14y ago
  example: in some specific situations random javascript error(and lack of exception handling) can disable your interface forever, random HTTP connection problem may occur, while loading CSS/JS files, etc.
svec 14y ago
Funny that the manifesto doesn't render well on an iPad. It's too wide, and scrolling is chunky.
- hdragomir 14y ago
  I also find it funny that they're using the processor intensive version of the bigtext plugin AND emphasising performance on the same page...
kvnn 14y ago
I'm a successful front-end developer and I really don't care about any of this stuff. This is one of the last manifesto's I'd personally subscribe to. In fact, I feel sad for anyone who takes front-end development this seriously. This is a field that exists because of fragmentation and the strange place that the web has arrived at. On the whole, we aren't solving interesting problems. We are building what someone else has designed and then patching that build across devices and browsers. Sometimes there are fun problems to solve while doing that, but its nothing compared to what we could be doing as programmers. I get paid well to make applications work cross device and cross browser, and I have an extremely flexible work environment. That is why I work hard. Not because Tom from Oklahoma is going to have a slightly better day because he doesn't have to figure out how to get on with his life when the site I'm working on doesn't break on his particular device or browser. Look up at the stars. Think bigger.
Evbn 14y ago
Nice how security is an after thought as something to strive for, not commit to. Also, layout is totally borked on Android Browser.
rglover 14y ago
Here's a manifesto: do your job, do it well. Some tools/ideologies will work better for you than they do for others. Strive for perfection, accept reality.
AtTheLast 14y ago
Seems over the top, but I think it's great if someone wants to make a commitment to being better at what they do.
malandrew 14y ago
Progressive enhancement is the main reason HTML-based apps can't compete with native apps. Progressive enhancement is synonymous with not pushing things forward. I know of at least one stealth startup who have built up a javascript library that is indistinguishably performant with native apps, but that performance comes at the cost of progressive enhancement. It's a tradeoff worth making. I believe in an open web too, but one that is as powerful as native apps, not a crippled second-rate one that loses users and developers to proprietary platforms. Any browser feature that developers find useful and actively adopt will quickly be incorporated into the remaining browsers.
zachleat 14y ago
Please read the associated blog post that went along with the site. http://www.zachleat.com/web/manifesto/ http://www.zachleat.com/web/manifesto/ "I’ve been reluctant to share the slides because I certainly don’t want developers to take them as dogmatic truth. Rather, I’d love for people to see a forest using trees they’ve planted themselves." Certainly scrolling could be improved. I'll definitely look into improving the performance. I honestly had no idea this slide deck would get this much attention.

39 points by hdragomir 14y ago

snogglethorpe 14y ago

He may "put the user first," but he clearly doesn't put the reader first ... ouch. oO;

daurnimator 14y ago

I thought it was a blank page at first... some sort of less is more statement.

unwind 14y ago
You failed to interpret the page author's 100% custom scrollbar (on the left edge of the screen) as an indicator that there was more content? That's ... odd. He clearly had your interests in mind when implementing that, since browser vendors just think about themselves with their annoying scrollbars that look the same on every page, even. Simplistic fools.
- icebraining 14y ago
  It does have a custom scrollbar, but the normal one still shows up (at least on FF and Chrome), so I don't see the problem.

twiceaday 14y ago

"I will continue to foster both HEMISPHERES OF MY BRAIN" I thought this was debunked?

saraid216 14y ago
There's basically enough truth to it that you can't just refute-by-reality, but not enough to make statements like this acceptable by my standards. It's vague enough that it's not actually a useful statement for anyone taking it literally. See: http://www.psychologytoday.com/blog/brain-myths/201206/why-the-left-brain-right-brain-myth-will-probably-never-die http://www.psychologytoday.com/blog/brain-myths/201206/why-t...

atirip 14y ago

"I will educate my friends and family that WEB BROWSER CHOICE MATTERS" and "Most importantly and above all, I will put the needs of the USER FIRST over my own needs as a developer." So please do, put the needs of your USERS first. Your users do not NEED to be educated by you. It is not your business what browser they use.

ajanuary 14y ago
Friends and family != users. You can cater to the variety of platforms your users want to use whilst at the same time having useful and meaningful conversations with friends and family about what the best browser is for them. You don't annoy your users by trying to 'educate' them, but collectively we see a move forward.
lucasf 14y ago
The two are not mutually exclusive as you seem to imply. > Your users do not NEED to be educated by you. I think educating clients and users is actually crucial. For a lot of users browser was conscious choice, but there is big group that don't even know that there are different/newer browsers. First group can ignore advice but second group might benefit a lot. >It is not your business what browser they use. It absolutely is. Silly car metaphor: I'm taking my car to a service station. I expect mechanic to tell me that oil I'm using is not the optimal one. Whether or not I take his advice is my business. But informing me about substandard oil is very much his business. Also - If all of my users used modern browsers, I could save money by not spending time on ensuring my site performs well on old buggy browsers.

lucian1900 14y ago

Scrolling through that was very annoying. Page up/down obviously won't move by exactly one of the "pages".

marceldegraaf 14y ago
I found out that the page listens to j/k just as in Vim. However, it seems the scroll directions are inverted from Vim; j goes up and k goes down.
- lucian1900 14y ago
  wtf
- Evbn 14y ago
  So, it is iOS-style touch optimized for people who have onscreen keyboards?
bestest 14y ago
I found out you may also click on the easy-to-miss left hand side bar -- there are, uh, 'accessible' shortcuts to each slide.

daurnimator 14y ago

"Without JavaScript or CSS, or without mobile Webkit, my site may not look pretty but will still be functional." There goes backbone.js and other javascript MVC patterns. This is something I'm still unsure about. What do (you) people think of keeping your "data out of the DOM"?

rimantas 14y ago
It depends where your site falls on content_page<-------->web_app continuum.
- daurnimator 14y ago
  the last time this came up as a serious question for me was in a web management console.
Evbn 14y ago
PhantomJS plus other tools to render a static snapshot and then serve? Image map? I imagine it is possible...

hatu 14y ago

This rubs me the wrong way for some reason. Maybe it just sounds really pretentious(?) In the end front-end (or any other) development exists to create services for the users, not for it's own sake as a philosophy or something.

conradfr 14y ago

I don't think it will convince anyone who doesn't do more or less all of that. And the scrolling is annoying.

HarrietJones 14y ago

"I will learn at the root, not the abstraction: JAVASCRIPT BEFORE JQUERY" I'm not sure why one high-end abstraction finds favour over another slightly higher high-end abstraction, but this sure sounds a lot like the people who insist that you can't be a good programmer unless you've learned some kind of assembler. On the "shoulders of giants" means we don't need to know javascript as well as jQuery. It means we don't have to know assembler as well as pascal. It means that we don't need to learn IP when we can just learn TCP/IP, and we don't need to learn TCP/IP when we can just use REST over HTTP. Learning at the root goes a lot further down than you want to go, need to go or are capable of going.

rudasn 14y ago
> On the "shoulders of giants" means we don't need to know javascript as well as jQuery. Not necessarily. I like to view it this way: When you are learning a new language (English, German, Chinese, whatever), in day to day conversations it is useful to know some expressions, idioms, or terms, but you should also know where they come from and how to explain them, and not just how to use them. Learning what "I'm pissed" means in British english is quite nice but if you say that to an American and responds "Who pissed you?", how are going to teach this person of the use of the word "pissed" in this context? Similarly, a jQuery-only developer will find it difficult to understand and explain what he meant to do with some piece of code, let's say $.each. A "native speaker", ie. a javascript developer, may be able to offer some advice or corrections, like "you could use Array.forEach in this scenario". (Granted this particular example may not be so good due but you get the point).
- HarrietJones 14y ago
  There's always a tradeoff between knowing what something like "each" does and having that extra architectural clutter being a cognitive drag. I can see the point being made, and there are obviously going to be situations where getting closer to the metal is important, but getting closer to the metal isn't always a good thing. Sometimes, knowing things closer to the metal isn't good either. It took me ages to unlearn certain practices and just accept the garbage collector would do its job and I no longer need to think about unallocating memory. Like all things, this one isn't black and white and it's open to subjectivity. For me though, I feel that the negative side of having knowledge of lower levels of your architectural stack is a hindrance more than it is not.

csomar 14y ago

I will choose the RIGHT TOOL FOR THE JOB So just put this in a full static page. Why the scrolling? And also color/font choice is quite terrible. No responsiveness for small screens. Apparently, he didn't follow his own advice.

ken 14y ago
I was going to observe that you can (in Firefox, at least) turn off the custom stylesheet, and it becomes much more readable. But if you scroll all the way to the end, it jumps around and doesn't actually let you scroll to the end (perhaps due to its JS). There's definitely something weird on that page.

prasincs 14y ago

I'd expect an article titled Front-end engineer's manifesto to have better UI than this. First thing I assumed was that I could use up, down in my keypad to navigate through slides. Then right, left. Figured scrolling is okay. The sidebar that's supposed to show me how far I've read isn't apparent. The font choices and responsiveness coud be better. Reinventing scrolling isn't good. I'd have been fine if it worked for me on Chrome, it got stuck in page 4 and 5 and I had to press j/k few times to get moving again. If there's a tool that takes care of kind of stuff and frees you to do important stuff, why not use it? On that point, checkout impress.js for this kind of stuff.

ggwicz 14y ago

anyone more interested in the "brain hemispheres" bit (http://f2em.com/#brain-hemispheres http://f2em.com/#brain-hemispheres) should check out Miyamoto Musashi's collection of writings called "The Book of Five Rings" http://en.wikipedia.org/wiki/The_Book_of_Five_Rings http://en.wikipedia.org/wiki/The_Book_of_Five_Rings Just some great writing on this idea of being a "balanced" human, and how that influences, informs, and improves your skills. His skills were as a samurai, but the principles apply pretty universally. I got a lot out of the book, you can find it free on iBooks, Kindle, etc. EDIT wow, I actually didn't find a free version on Kindle, but here's a few formats for free from Archive.org -> http://archive.org/details/MiyamotoMusashi-BookOfFiveRingsgoRinNoSho http://archive.org/details/MiyamotoMusashi-BookOfFiveRingsgo...

jacobr 14y ago

> Without JavaScript or CSS [...] my site may not look pretty but will still be functional. For what reason exactly? Of course there are cases where it makes sense to follow this rule, maybe even the majority, but having it as #2 in your manifesto will severely limit what you can accomplish on the web.

dotborg 14y ago
example: in some specific situations random javascript error(and lack of exception handling) can disable your interface forever, random HTTP connection problem may occur, while loading CSS/JS files, etc.

svec 14y ago

Funny that the manifesto doesn't render well on an iPad. It's too wide, and scrolling is chunky.

hdragomir 14y ago
I also find it funny that they're using the processor intensive version of the bigtext plugin AND emphasising performance on the same page...

kvnn 14y ago

I'm a successful front-end developer and I really don't care about any of this stuff. This is one of the last manifesto's I'd personally subscribe to. In fact, I feel sad for anyone who takes front-end development this seriously. This is a field that exists because of fragmentation and the strange place that the web has arrived at. On the whole, we aren't solving interesting problems. We are building what someone else has designed and then patching that build across devices and browsers. Sometimes there are fun problems to solve while doing that, but its nothing compared to what we could be doing as programmers. I get paid well to make applications work cross device and cross browser, and I have an extremely flexible work environment. That is why I work hard. Not because Tom from Oklahoma is going to have a slightly better day because he doesn't have to figure out how to get on with his life when the site I'm working on doesn't break on his particular device or browser. Look up at the stars. Think bigger.

Evbn 14y ago

Nice how security is an after thought as something to strive for, not commit to. Also, layout is totally borked on Android Browser.

rglover 14y ago

Here's a manifesto: do your job, do it well. Some tools/ideologies will work better for you than they do for others. Strive for perfection, accept reality.

AtTheLast 14y ago

Seems over the top, but I think it's great if someone wants to make a commitment to being better at what they do.

malandrew 14y ago

Progressive enhancement is the main reason HTML-based apps can't compete with native apps. Progressive enhancement is synonymous with not pushing things forward. I know of at least one stealth startup who have built up a javascript library that is indistinguishably performant with native apps, but that performance comes at the cost of progressive enhancement. It's a tradeoff worth making. I believe in an open web too, but one that is as powerful as native apps, not a crippled second-rate one that loses users and developers to proprietary platforms. Any browser feature that developers find useful and actively adopt will quickly be incorporated into the remaining browsers.

zachleat 14y ago

Please read the associated blog post that went along with the site. http://www.zachleat.com/web/manifesto/ http://www.zachleat.com/web/manifesto/ "I’ve been reluctant to share the slides because I certainly don’t want developers to take them as dogmatic truth. Rather, I’d love for people to see a forest using trees they’ve planted themselves." Certainly scrolling could be improved. I'll definitely look into improving the performance. I honestly had no idea this slide deck would get this much attention.