{"id":242278,"date":"2016-07-08T07:42:48","date_gmt":"2016-07-08T14:42:48","guid":{"rendered":"http:\/\/css-tricks.com\/?p=242278"},"modified":"2016-07-10T07:59:42","modified_gmt":"2016-07-10T14:59:42","slug":"front-end-developer-aware","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/front-end-developer-aware\/","title":{"rendered":"A Front End Developer is Aware"},"content":{"rendered":"

One idea that has lodged itself into my brain recently (largely from this panel discussion<\/a>) is how a front end developer needs to be aware<\/em>. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing<\/em> people interact with. Everything comes together with the front end developer. Perhaps that’s why it’s such a fun job!<\/p>\n

Because the front end developer is this central hub position and dealing with lots of different people doing lots of different jobs, the job can be done better<\/em> if they are aware<\/em>. Aware of everything else that makes a website tick.<\/p>\n

<\/p>\n

A front end developer is aware of design.<\/strong> If they aren’t a designer themselves, they know how important design is. They have good taste in design. They know about the tools involved. They know where the design role fits into the process.<\/p>\n

A front end developer is aware of the back end.<\/strong> If they aren’t a back end coder themselves, they know how important the back end is. They know what the back end is capable of delivering and what it isn’t. They know the responsibilities back end developers have. They know the languages involved. They know how to ask for what they need on the front end. <\/p>\n

A front end developer is aware of the network.<\/strong> They know that websites are delivered over the internet, a network, and that that network is a wild and sometimes unpredictable place. They know networks can be on or off, fast or slow, and reliable or unreliable. <\/p>\n

A front end developer is aware of performance.<\/strong> If they aren’t entirely performance focused themselves, they know that performance is vital to a website’s success. They know performance is a complex world onto itself. They know there are quick wins and long term struggles. They know that so long as the back end is fast, the other 80% of the time a website is loading is a front end concern.<\/p>\n

A front end developer is aware of content strategy.<\/strong> If they aren’t a content strategist themselves, they know that websites live and die by the content on them. They know that the lack of a content plan can cause problems that you may not be able to develop your way out of. They know that the people that use the website is what matters and those people need to find what they need and expect it to be in good shape.<\/p>\n

A front end developer is aware of databases.<\/strong> The content lives there. The content must be in good shape. The front end developer can only work with what comes out of those databases. The front end developer needs to combine what comes out of those databases with templates to make the website happen.<\/p>\n

A front end developer is aware of testing.<\/strong> So many kinds! Integration testing. Regression testing. User testing! <\/p>\n

A front end developer is aware of systems.<\/strong> They might be responsible for implementing a design system, or an icon system, or a coding style guide. They might have to create those systems themselves. They might need to document those systems.<\/p>\n

A front end developer is aware of devops.<\/strong> They are writing and committing code along with every other coder on the project, so they need to adhere to the same setup as everyone else. If they didn’t write the build system themselves, they know what it is, what it does, and what it is capable of. If they didn’t set up deployment themselves, they know how to use it.<\/p>\n

A front end developer is aware of servers.<\/strong> Without them, there is no website. <\/p>\n

A front end developer is aware of accessibility.<\/strong> If they aren’t well versed in building for accessibility themselves, they know that it’s important. They know how to test for it. They know who to talk to about it. They know there is quick wins and long term struggles regarding it.<\/p>\n

A front end developer is aware of the device landscape.<\/strong> They know the web is everywhere these days and a good website needs to meet users there. Big screens, little screens, touch screens, far away screens, black and white screens. The front end developer is aware of the unknown.<\/p>\n

\n

That’s just a handful of the things a great front end developer should be aware of. The more the better.<\/p>\n

All this, of course, on top of their own direct job. HTML, CSS, JavaScript, responsive design, libraries and frameworks, communication… this list is scary-long itself!<\/p>\n","protected":false},"excerpt":{"rendered":"

One idea that has lodged itself into my brain recently (largely from this panel discussion) is how a front end developer needs to be aware. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":311245,"url":"https:\/\/css-tricks.com\/what-is-developer-experience-dx\/","url_meta":{"origin":242278,"position":0},"title":"What is Developer Experience (DX)?","date":"June 15, 2020","format":false,"excerpt":"Developer Experience\u00b9 is a term\u00b2 with a self-declaring meaning \u2014 the experience of developers \u2014 but it eludes definition in the sense that people invoke it at different times for different reasons referring to different things. For instance, our own Sarah Drasner's current job title is \"VP of Developer Experience\"\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/DX-1.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331113,"url":"https:\/\/css-tricks.com\/2020-roundup-of-web-research\/","url_meta":{"origin":242278,"position":1},"title":"2020 Roundup of Web Research","date":"December 21, 2020","format":false,"excerpt":"It's December! Lots of things are published this time of year, like developer advent calendars and organizations reflecting on the past year. We have even our own end-of-year series where we asked folks what they learned in 2020. But we also see lots of research come out around this time.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353386,"url":"https:\/\/css-tricks.com\/developer-decisions-for-building-flexible-components\/","url_meta":{"origin":242278,"position":2},"title":"Developer Decisions For Building Flexible Components","date":"October 7, 2021","format":false,"excerpt":"Blog posts that get into the whole \"how to think like a front-end developer\" vibe are my favorite. Michelle Barker nails that in this post, and does it without sharing a line of code! We simply can no longer design and develop only for \u201coptimal\u201d content or browsing conditions. Instead,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353429,"url":"https:\/\/css-tricks.com\/the-case-for-developer-experience\/","url_meta":{"origin":242278,"position":3},"title":"The Case for \u2018Developer Experience\u2019","date":"October 8, 2021","format":false,"excerpt":"A good essay from Jean Yang. What I mean by\u00a0developer experience\u00a0is the sum total of how developers interface with their tools, end-to-end, day-in and day-out.\u00a0Sure, there\u2019s more focus than ever on how developers use and adopt tools, and there are entire talks and panels devoted to the topic of so-called\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/microservicesdeathstars_jeanyang_Future.jpg?fit=1200%2C527&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307322,"url":"https:\/\/css-tricks.com\/the-title-front-end-developer-is-obsolete\/","url_meta":{"origin":242278,"position":4},"title":"\u201cThe title \u2018Front-End Developer\u2019 is obsolete.\u201d","date":"April 24, 2020","format":false,"excerpt":"That title is from the opening tweet of a thread from Benjamin De Cock. I wouldn't go that far, myself. What I like about the term is that \u2018Front-End\u2019 literally means the browser, and while the job has been changing quite a lot \u2014 and is perhaps fracturing before our\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/cogs-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321838,"url":"https:\/\/css-tricks.com\/ooooops-i-guess-were-full-stack-developers-now\/","url_meta":{"origin":242278,"position":5},"title":"ooooops I guess we\u2019re* full-stack developers now","date":"September 27, 2020","format":false,"excerpt":"This is a written version of my talk from Jamstack Conf London 2019.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/full-stack.jpg?fit=1200%2C684&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242278"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=242278"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242278\/revisions"}],"predecessor-version":[{"id":243468,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/242278\/revisions\/243468"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=242278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=242278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=242278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}