Chris Coyier: Thinking like a Front-End Developer

everybody knows this statistic right the one more WordPress powers the third of the web which is a whack-a-doodle statistic that's like what's that's known that's why there's so many people here because that's so amazing and cool and WordPress has this big impact on the world I just I like to start this time with a personal feeling that like maybe it's because like a third of the developers in the world like cut their teeth on WordPress I've talked to throughout my career I'm like a front-end developer and I go to conferences and I had shows I've just made my life being and thinking about being a friend and developer and like so many of them have WordPress experience it's like almost weird to meet a developer that doesn't have any these days like like industry-wide I think that's significant too it's just like a cool thing to think about like how welcoming this world is and what an impact like on the lifes of developers WordPress has I just think that's cool yeah and I just count myself among that group when I got started building websites it was totally through the WordPress path and I'm so glad that it was because that has helped my career tremendously let's let's spend a while thinking about how to be a front-end developer that's that's the talk title for sure like I said I've kind of made my life I that co-founder of code Penn which is like a social playground for playing around with the web and I have a podcast we'll get into that and I've been writing about it for almost 11 years on CSS tricks it's really my whole thing so I've been wanting to do this talk forever like what is a front-end developer how do we how do we think about it let's take one little pit stop before we get started is that a correct sentence I work as a front dash and developer yes it is because front-end is a compound adjective and it should have a dash in it is that a correct sentence or reason no because it doesn't have a dash even though it's a compound adjective there's a right and wrong answer to this I don't necessary to correct people because it's kind of like you can like let people be wrong that's fine like just let it go but like well we're gonna say the word like a thousand times in this talk we might as well be right about it what about that one I work on the front end yes yes it's a noun not a compound adjective so it's cool is that right no because that's not a thing it's not being used as an adjective there what if you saw a blog post said that you could say that's not word is it a word are we like well we can apropriate it that's cool but if we're gonna fight that fight we gotta like decide to do that collectively it's a whole process okay so so so what is a front-end developer well I run a job board or the code pen job board and it's kind of focused on that so people hire for being a front-end developer all the time there's the Smashing magma on the stack overflow job board there's a million front-end just posted all the time huge industry it's super definitely a job and super definitely a job title that people have I'm sure there's a lot of people here that a self-identify that way have a front-end developer in there a job title in some way so there's no doubt about that I wanted I have a million thoughts about what it like how to think like one and all this but I wanted to not just have this me being like that is what a front-end developer is and have it be representative of a lot of different voices and what they think being a front-end developer so on my podcast shop talk show I've been doing the series about this while asking kind of a series of pointed questions the same questions to different developers to get different perspective on those same questions so that's me and my friend Dave who run shop talk show and so far we've talked to these developers Monica Eric Sam Brad Trent Meena Ben and and Peggy and we'll hear from more of them throughout this whole thing but I wanted to learn it's fun it has it always been a word like in the early days of CSS do what do people refer to themselves as front-end developers or not so I kind of asked Eric this question who probably has to like the longest career of the people that we talk to and he's gonna we're gonna talk a little bit about the Zen garden that was a key moment in the history of front-end development where there was like this one a unchanging HTML file and different web you know friend developer designers would apply different style sheets to it and do drastically different things to that document and it was it was like open people's eyes to what the power of friend development and specifically CSS could do to a document while Eric talks here it's gonna show a movie of like the new rebooted so let's say during the Zen garden base did you say you know what my job is in the world I'm a front-end developer was that like uh was that a term then or is that newer than that I feel like it's a little newer than that least as a as a term of widespread currency it's become more widespread than that since those days like at the time we didn't just talk about front end versus back end right the Zen garden days were we were still coming out of the era of everyone's a webmaster which meant you had to be what we would now call a full stack developer of course back then that meant that you understood that there was a CGI bin directory and maybe you could write some Perl you know we didn't have the whole the bests but what you wouldn't know what do you even have known what it meant with somebody layer or someone yeah if someone said you know are you a front-end developer I would have said yeah that that's me so it was kind of and even in the earliest days friend developers another thing we've had time to let this thing shake out you know like it's it's a term that it was meaningful then at least to some degree and is and it's definitely meaningful now so it's the thing they were gonna call it a developer I don't know if you it's just didn't catch on it was weird so I think of all the people I talked to Mina put it the best like what's a front-end developer it deals with things as you can see things that are actually infer view on the screen in a web client and client and in my mind anyone who works on a you know user facing interface or application web site whatever in my mind that's been develop yeah what you can see right what what people use in the browser like if you deal with the client the thing then that that's what makes you a front-end developer it's not specific languages or whatever it's like you're dealing with people and they use the browser so just at rent here struggle a little bit with what to call himself but but really underscores the browser you know I think I'm nice I looked up I looked at my website my blog and I was like what did I forgot what did I call myself and I think I say something like web designer in a web builder because it you know I don't people to think that I'm just this like full stack like the buck stops at my desk in any front end question that you have I will be the person at parallel to go to for that but like yeah like I I live the majority of my time in whether its design or building or Optima or whatever it is it's spent in the browser and that's all I think about that's where I live so I love that of course it is it's the browser that's what really makes us front-end developers is just living our lives in that in that browser context this this is really where it is and it's not like that like back-end developers don't have a browser open all day also but we're care about it at like a weirdly deeper level like across all kinds of different browsers and all that stuff and like we care about everything every little scroll and click and Dom event and nugget of anything in the browser we're kind of deeply into so this is this is us you know there's a heck of a lot of them isn't there I should have probably removed the edge ones though huh yeah but of course it's not it's not just that you know we care about the users but doesn't everybody like if you work at a company aren't you like should you probably like should care about the well I think that's true to some degree but Monica puts a kind of a good point on it I struggle the phrasing in a way that's like doesn't sound like a back-end person doesn't care about the user or doesn't care about web sites because they kind of do too right but they're totally allowed not to right like if you're the person who's writing the SQL code for the database I think you're totally allowed not to care about the user this is your personal choice because at that point you're like delegating your responsibility so what I'm trying to say is that I think it's totally fine to not want to call yourself a friend and developer too as much as we do as front-end developers there is other roles still you know of course there is there's back-end developers and she's kind of saying that that's a that's a difference you could be a great front-end developer who's really focused on what they're doing and kind of like on purpose delegating the responsibility of deep caring about UX to to another role and it's not just browsers and it's not just the people that use those browsers but of course it's this craziness to that we've been talking about forever this rainbow of devices that that represents front-end design so it's super definitely a job with a job title it deals with the browser and of the devices that those browsers run on and the people that use those things that's what a front-end developer is what do you need to know though we haven't talked about skillsets a little bit we can get into that there's definitely this whole set of foundational skills that's fascinating like you need to be like super computer proficient to even start thinking about being a front-end developer which i think is a whole fascinating thing to think about and talk about like you have to be good at this whole slew of software and you have to be like a good typist or have some way of entering proficiently characters into a computer there's all this stuff you need to know to even even get started at all and there's this whole slew of soft skills which is also a wildly fascinating thing like you need to write a damn fine email you need to have good slack at a KITT slack kick it and you need you need to like if you roll into an interview and like facilitate a wonderful problem-solving conversation that involves a bunch of you you might get a job before they even know what languages you know you know like that's such a massive thing but unfortunately or not have too much time to talk about that actually we're on our way to I was thinking about what you all these job skills that you need to know and I was thinking about we're going to Nashville like the mecca of like acoustic guitars and stuff and I was like a high there's reminded me of this great Doc Watson song a guy gets the job you know he rolls in he's like the boss is like what are you doing like I can lay railroad track you're hired you know it's amazing I wish you could go into a job interview now and be like what can you do about I can align squiggly braces you're hard that'd be great it's not as easy anymore you got to know all kinds of stupid stuff because there's this whole set up of course Cora skills do you need to know of all the languages cuz you sit down as a friend develop we need to know a bunch of languages to do your job all day you know read write maintain them and then a bunch of bonus skills too which is make what's makes this interesting which is probably gonna be mostly what we talked about here let's talk about these core skills for a minute this will surprise nobody they are HTML and CSS I would think yeah you know like the reason that that's not controversial it's because every single web site in the whole world is built from them like at some there's all kinds of other stuff that happens but in the end it's HTML and CSS a hundred percent of websites have HTML of some kind that's definitely gonna there's some things coming down from the wire that gets turned into the Dom that makes that website probably ninety nine point nine ish percent of websites have CSS in some way I'm sure there's a couple outliers still using font tags or whatever but those are fundamental skills that that will serve you well it's not like ah where yeah they're there but we only write an abstract languages now like that's still there's plenty of the work that we do as front-end developers to like the six-year-old tweet from dan cedar home saying that that it's really through his 15 years which would now be 21 years I guess is that that hTML is still a good that you know and I'd say that's true and even for CSS too there's really nothing that's like angling to unseat those things there's always ways that we're compiling it differently and thinking about it differently but as a fundamental technology it's as important now as it really ever has been which is cool and then there's a third language though it's in there I'm pretty sure there's a third language let's see what Eric gets the same huh you know and it might be somebody who knows a ton of JavaScript and can handwrite it all or might be somebody who only uses libraries like jQuery or it might be somebody who never writes JavaScript at all and yeah it doesn't make you not a friend developer right I mean I think you need to least understand JavaScript in its role but that doesn't necessarily mean you have to be able to write everything from scratch so yes it's definitely the third language it's you know what you what your the your skill level at it is is can be widely different but you definitely need to understand its role kind of thing definitely the third language of the well for sure and then there's all these oh and you notice I put accessibility next to all three of these languages it definitely touches on all three of these languages here so here's Peggy about that great I do think though like as a friend and developer like you should have basic fluency and accessibility regardless like if you're building UI you should know some basic principles of accessibility and not just leave that to a specialist let that stand for itself I think and then there's these plus skills or bonus skills whatever I found this fascinating I got this from my wife Miranda who worked on like digital teams at media companies for a super long time and in fact was was part of the lead up the team at the Boston Globe and they made that first responsive design years ago that kind of proved that it works at a large scale for the industry and when she's hiring there'd be people that come in and they kind of like just knew HTML and CSS and even back then it was kind of like almost not enough and I hate to say that cuz that's not exactly what I mean but she would always look for people that were like sure that's like the get in the door or core skills but it was they tended to hire people that were HTML CSS plus that they were like if JavaScript is your plus that's great that's a full rounded thing but it could be plus you're a great designer too or your great copywriter you're an illustrator or you dig into accessibility or you have some other skillset that augments those those kind of core skills and I found that kind of fascinating and it leads to this like life as a front-end developer really any career but work that's what we're talking about here is a little bit like a choose your own adventure book like you're fighting supercomputer in a hallway what do you do you stab it in the keyboard with a fork turn to page 94 you know or do you run away like a wimp turn to page 12 you know and that everybody's life is this different fork and path and everybody ends somewhere differently but we're all reading the same story metaphorically are our jobs is like this in a way and that you there's this fundamental tree of what we all know but we all end up with wildly different skill sets I don't know if it's the perfect metaphor but that's the one we're gonna use and it's leading to this point like is front-end development going through somewhat of an identity crisis that's this is the kind of fascinating premise that we're gonna be working with here we can pinpoint a moment I when that started to happen this thing happened for sure number one language on Stack Overflow it's the most code on github it's this massive chart of package managers that took off NPM being that red line there that is really blown all the rest of them out of the water there's a moment right there right as really NPM is really taking off at the end of the 2015 which is this kind of seminal moment which many of you will recognize I'm going to give you one homework assignment in closing which I've never done in the state of word before and you might be able to predict it and it's a learn JavaScript deeply about that and then of course it's huge in the client but like it's really you could be a developer these days and know no other language that's that's possible cool so and this has been happening I've been reading blog posts and comments on blog posts and thanks the sentiment of this is absolutely all over the place here's Steven Davis saying just like let's just not use the word anymore let's split let's be UX engineers and JavaScript engineers they're different mindsets people tend to not be good at both it's just where this world is heading a little bit and Steven being like I'm happy to just not be on the JavaScript side of that I'm good at the HTML and CSS kind of thing and I'm sick of like being forced to ask to do more than that in a way that's just one sentiment but there's a lot of that happening so maybe if our metaphor is this which is already a wide array of skill sets that have led us there it's starting to feel a little bit more like this we're all front-end developers but there's these this this path that you can take right at the beginning that leads you down this deep JavaScript land and this other path that kind of doesn't and you still end up all over the place but there seems to be a split kind of in the middle maybe that's not fair but still we're gonna roll with it for a minute Virna and joyce has the first article I read that called it an identity crisis who blames the frameworks saying that these frameworks are huge already not only in what they do from us but how many websites they're already powering it's just this massive like everybody's doing this kind of thing angular react view remember all of them and that the people that go down that row the right medium articles about MVC and functional programming in the context API and react suspense and all these like very fancy things that some of us are front-end developers for a long time read nerds like what's that about yeah you're like this got weird real quick it feels like a like an alternate universe sometimes or you're standing there right next to another front-end developer and you share no no skillset at all together but we're both are we both we're both the thing that's weird Brad stumbled upon a way to describe this in one of our I don't wanna sorta configure web pack you're like gulp like workflows and stuff like that and so I found that I'm sort of on the more design you know the front of the front-end and then sort of having somebody else that's more on like the back of the front-end as a nice sort of complementary role but he called it a complementary role which is kind of cool like what if there's these two people that went down these different paths together they could be great yeah absolutely people after hearing that wrote comments in like I've been feeling that divine for years now and somebody said just yesterday I was looking at a codebase in thinking this was clearly written by a JavaScript developer which is a poke for sure you know there's not a poking across the divide plenty of that kind of thing happening but there's more than poking happening to there's lots of like extreme frustration that's happening to and there's nothing more personal and frustrating than trying to get a job and not getting one because of this divide hurting you in some way here's Michael from just mark up saying that I'm seeing this industry-wide I'm seeing companies hire JavaScript developers replacing back-end developers and sometimes when that happen if you go down that deep JavaScript route that you don't that maybe your skill level at just the HTML CSS thing is kind of bad you don't write it very often you don't care about it that much in the same kind of way that I as a long time front-end developer and very helpless add a lot of and tasks I can't do much with a database I can't configure servers particularly well I'm hopeless at that thankfully nobody asks me to do that that often but all the sudden we're asking JavaScript developers to be great at some front-end tasks - it's a weird it's a weird crossover this happened a couple of years ago to Lara who wrote up this story on CSS tricks about you know saw job posting the job posting met some 80% of what she thought she could do for that company when and the interview is mostly great but then asked her some like JavaScript algorithm style questions that that didn't go particularly well and didn't get the job and was kind of like WTF you know like why did you ask me in here like I have this deep skill set Laura's a great developer who has a wide skill set of front-end JavaScript stuff but also WordPress development all this and then and then didn't get it for some from some dumb little thing it's just kind of like that can be extremely frustrating it can be like hiring wise we've got to be more clear about that so here's the situation now hiring a front-end developer is a job post hey I'm a front-end developer here's sue sue is looking for a job but her last job was a react developer and worked on server-side rendering because they use next J is a whole bunch and the data layer was Apollo graph QL which is awesome and worked on this big app and it made sense to use a CSS and JavaScript style architecture to get that because it worked on our team really well and just lived in that react and babble and web pack and friends universe and we feel like what are you good at she'd be like I am good at JavaScript architecture and I'm really I really care about performance she's a front-end developer she's a great front-end developer and she would fit on lots of great teams should she apply for that job she'll she could but here's Jojo is also like he worked at an agency for the last couple of years build lots of sites lots of WordPress themes would sprinkle on jQuery stuff when they needed to cuz that's kind of all they needed he was kind of like the CSS architecture guy did a lot of sass stuff he loves working with SVG and interaction design if you say Joe what are you into him like I care about the users I care about accessibility I love building websites Joe's a fantastic developer - is he a front-end developer yes should he apply for that job sure but Wow are those two people different it's not like there's no crossover it's not like those people can't learn those other skills certainly they can but sometimes when you're hiring a job it's about what you know right now and those are very different skill sets that are you're gonna one of these two people are it's probably gonna be wasting somebody's time which sucks you know it's feels like that anyway here's Peggy about that device I think like front-end developer is such a broad term it's hard to really define like what exactly a front-end developer is because there's so many different specialties right like you can be a specialty a specialist in SVG animations and be a front-end developer and not write any JavaScript at all or you could be more working on the data layer like I am and not writing any CSS for example and still be considered a front-end developer so I think it's kind of you know as long as you're touching UI or touching something like a data layer that's tangentially related to UI I think you know you can identify as a front-end developer yeah so wide it's a wide place to be I even think about in WordPress context like all of a sudden we have Gutenberg now great how do you build a Guttenberg block it's weird it's like react and webpack and babble and friends you gotta have that skillset and you got unlike no WordPress api's and probably some PHP and stuff so there's some of that stuff going on and then it outputs like a thing that goes in your theme so you need some like HTML and CSS knowledge who is that that's like a new person or a combination of Rails is probably going to be more done by teams and companies and stuff than it is like an individual like I'm you know I'm sure there's lots of great super intelligent people here that can absolutely build a block but I'm kind of like not one of them like no I I want to do it I'm interested but I'm gonna be collaborating with people I have a lot to learn because the skill set for that is weird all right weird to me Mel choice has a wonderful blog article about how she put together a block for this conference for the speaker block thing and like look at how it is you know you got to pick a block it's got a special icon it's got I don't know you have to know about what classes and stuff to use in there I guess some of that is boilerplate it out but then it outputs something that's definitely gonna go on the front end so there's CSS class names involved but they're controlled by controls on the right so you need to know how to build that too there's probably some api's and stuff for that you got to learn and it's like it's a pretty wide skill set here pretty it's kind of fascinating and then there's this like how do you build that drop-down well I don't know this is a react component so you're gonna have to npm install some kind of then PME react d dropdown e mechanic thing you know and then where's it get that data from that I don't know that I guess you the rest api come querying a custom post type thing who's who's super proficient in that the same exact person that knows all that react stuff or is it that a different developer I don't know it's just complicated and what about all these people that are like I like WordPress fine but I like building I want to build my site and Gatsby or or I want to like build it I don't want to be told how to build my front-end there's a lot of this happening in front-end development I want to build the front-end how I want to build my front-end it's not that I don't like WordPress I'm just gonna consume it with api's and the REST API now existing you can absolutely do that and graph QL is getting bigger and there's a way to do that too don't tell me how to build my front-end I'll build my front-end that's a new kind of developer that lives in a different world that I love that I think that's cool that that's that's possible I don't know if this is exactly a problem there is a divide a schism happening here so but like let's just acknowledge it and think about it and talk about it that's kind of important hiring people use your words for sure don't just say we're hiring a front-end developer and just let whoever apply to that you should probably talk about it this is you know use the first few paragraphs of your job posting to be like this is what we need right now this is what we should know this is you know that way it's just there's not a gasps if you're not that person maybe you can look for another possible role or or say that I want to learn those things or whatever there's a recent article from Hayden Pickering saying that there's there's a lot of like places that are they have these like full-stack gatekeepers that are like I'm this amazing programmer and JavaScript can do everything now so it does do everything now and they and they and they are they're in control of the HTML and CSS too because it's like the easy part or whatever but it's not their competency you know and it's that's causing some some anger and and problems that way too leads to like the greatest tweet ever you know we only have full stack developers here that's all we hire Brad saying like and it tends to be that one way around it's not like it's not it's not like the a lot of full-stack people are mostly proficient in great HTML and CSS and then and also proficient in JavaScript ends to be the other way around that HTML CSS stuff gets gets handled poorly and but it's not always that way I don't mean to poke too far that that direction but the point is here is like it doesn't matter like whatever it is that you do in the world it doesn't give you permission to suck at something else you know like if you suck at that thing then somebody else needs to step up there and not suck at it you know that's what teams are for businesses are cool like that you you hire the thing you know especially these things you know like don't just cuz you have one skill set doesn't give you permission to like do poorly at any of those particular things you know so that's kind of cool yeah and maybe it does need a rethinking maybe we should stop saying front-end developer so much and start seeing other things I have some never gonna hold the reason I don't like advocate for particular job titles is cuz that war has been waged forever and like it just doesn't work you just have job title needs to be a paragraph I think these days pretty much anyway so let's end this with some like some like front-end developer candy I think you know like if you're into like thinking about websites and how other people think about websites let's just do that rather than talking about the divide so much and maybe there's a divide because people think so differently our websites I had all these developers look at the same designs and then tell me what goes through their mind when they think of that design here's a design how would a front-end developer approach that this is like that the definition of sort of like component driven UI I feel like this is like I would have a blast with this just sort of going through and chopping this this whole thing up Brad thinks about components Atomics is the first thing I see is lots of media objects and of course media objects for those who may not know it's just it's an an image or a piece of media with some content right to the side of it and I feel like most of this design can be accomplished with by creating a media object and the only thing that kind of changes is how big that piece of media or content is she's thinking about CSS patterns that can be used heavily throughout this thing to be efficient with the CSS instead of seeing the green characters and the matrix I see HTML structures that's literally where I start and so you immediately start outlining like h1 h2 it's probably if the stage is more heading heading heading that's a list that's an ordered list because of the nature of it you know over there is a is maybe an unordered list you know this is and especially for the design this particular design is a lot of lists list X's lists all over this thing he's probably right about that so dig near the whole thing I see a lot of typography and I'm already thinking about the type system Sam went on to say that that's a like a like a at the moment kind of a weak point for her and so she wants to start with the type system on purpose because he wants to get that set you know and then move on to her her things that she's better me I think this is kind of fun like especially when you have to if you have to consider a variety of screen sizes like the menu on the Left you know there's like the the windows deal we're like I've seen like where the menu kind of half collapses and maybe it goes just icons which may or may not be helpful in this context but like you know how can we sort of have like almost like what's the tablet with gonna do yeah Trent was always talking about that like responsive design is fine it's easy to think about the extremes of what designs are gonna do but he was very into the the really subtle in-betweens of what responsible design nobody said the same things and that's just a tiny portion of what they said so if you're into this kind of thing our series on shop talk show is all about this type of thing there's a bunch of them here house house this weird design you know like a really bold I would love to talk about how to create these different animations yeah everybody looked at those animations being like whoo how we gonna do that that there's a lot like a lot of noise like kind of like a speckled textures all over the site there's like an illustration of top with like some cookware and some food and some coffee you know you wonder if you could maybe instead of you know exporting this there's like a gigantic diet little beige texture or maybe it's like a table or something can you take that texture and repeat it elsewhere maybe color it so you're not having to export gigantic image files he was immediately starting to be clever and be like how can we texturize everything with a lightweight file might not surprise you that I sort of tend to think of components immediate immediately sort of the things that sort of stick out in my mind is you know what are these sort of repeatable elements even in this sort of seemingly very bespoke layout he's like there's no website too small for thinking in that way in a way which is asking for a lot of SVG resources of course vector all day and but Eric was saying like this is a team already I can't do this myself because I need I need like people to be carving up these accessibility I can't enjoy a website without like thinking of it skeleton well I heard a lot of that like that's all I see this this behind the matrix stuff I think this one is interesting because it's a website that I might argue WordPress isn't particularly well-suited to do or is it all now all of a sudden like well like this is there's all these like interesting weird blocks in the middle of it that are like how would you do that with just just one content area maybe that's starting to make more sense to chop up into kind of custom Gutenberg II blocks you know that there's that three column thing not particularly well-suited you know with just one text area kind of thing you're adding markup or short codes or that kind of thing all these things are probably going to be served a bit better in Gutenberg land I hope maybe we'll see how that pans out it's been a day so this is weird like this is more like a print poster oh my gosh like I could stare at that Chi for hours this is like admiring other people's typography just staring at a G for hours can you imagine the first thing I'm thinking that was so cool right emotes i can use the writing mode to turn because there's this first couple of headlines that are written vertically so the first thing i've seen there's opportunity to use that just again thinking about interesting CSS approaches to handle this thing like how do you get that vertical text what this this seems to be like it would restock a reflow or reshape itself but keep the like aesthetic intact at all views it seems like could be really fun trent again thinking about how weird you can get with the responsive design of it you know like that's fine for landscape but what about portrait or huge size it's got rating mode it's got grid it's got font right it's got custom fonts eric was really excited about this one he's like I'm gonna reach out to this guy I'm gonna see if if I can put this out like a Zen garden thing how a different developers approach it and that's like I wonder if he did that but it's kind of a there's a lot going on here that's fun you know people saw the dots and had different approaches to it somebody said I would approach those dots with an unordered list with just empty allies and it just floated next to each other I'm like oh my god please don't do that you know like a landing page that's the first thing you see is that yeah it's good in text at the top and then around button then design at the bottom better you know whatever it's a landing page right perhaps speak to them and you know if this is something that's gonna be used in poorer parts of the world like whether they they want backups for when SVG isn't available so whether you just have a standard and background in jpg or PNG something like that and yeah how they see the interactions working where if I could get started is it a separate page or is that thing Ajax then already in the page is gonna transition across and so I'd be sort of asking questions about how do you how should this thing feel yeah right he's thinking Ben was always thinking about how does it fall back and what has it happens cross-browser and with low data and and then like what's deeper than this like what happens after you see this page you know and I was thinking this one too is one of those type of pages that's like I think we're gonna start thinking that way if we're all deep in WordPress line you're gonna be like block block block block block block block this is a weird interactive one if you like roll over this it launches some crazy stuff and animations and I always what do you want to see a lot of big high-resolution images that he's gonna crawl on a anything less than a really really good connection yeah just thinking about like is that like who's that gonna work really well for it who's it not it stresses me out that when I click on a link I don't expect that to happen I think that's money yeah you have some like UX concerns like this yeah a bit much but I like when they come back together in silence so maybe I didn't mean to have people like not like most people are like this is amazing but you know other people have concerns I'm seeing kind of like data that looks pretty static so maybe I would use something like Gatsby in order to build out this site yeah she Peggy talked a lot about about things like that a lot of graph QL stuff but also like like the tool tooling around it and using tools like gasping gasp apparently has some cool image manipulation stuff that can help with the performance of these images there's a weird dashboard kind of thing well look what the things like there's little dots sort of marker points on that graph and I want to know is there a touch target on there and if so what's the minimum size for that yeah thinking about the accessibility of touch you know it looks kind of like a tablet design are you gonna is that something you can tell so it looks like there's some sort of like real-time component to this as well because it's kind of like uber or where you like see the preview of the car driving to the destination yeah real-time maybe what kind of api's are involved how do you build that map but I'll probably have to learn SVG's I've been learning as be hanging out with Sara Dresner is a problem in your life you learn about SVG's yeah you know I don't really know how to do them that part everything else sounds fine that's funny cuz you that looks like a Google map Monica's at Google there's a Trello Trello ish looking weird board here and then I be fasting questions about I suppose what's the support matrix for this or who you're looking in terms of browser support so could we be looking at something to be built with CSS grid does it need to be something a bit older yeah support like that we all know about the new fancy things well you're gonna have to drag and drop and that is the biggest nightmare in the universe so good let's have fun cuz fall very positive about go no that's hilarious anyway we can wrap up with the idea that I think and talk about this stuff a lot I'm fascinated by what is a front-end developer and how is it changing and what is this whole world like on CS Trix I write articles like what makes a good one and how to be a senior one and the all-powerful front-end developer that ones particularly relevant because it talks about how front-end design it's not only just changing a little bit but widening a whole ton we talked about how it's front-end developers are in some cases replacing some back-end developers in the end there's we're so powerful these days there's a lot of things that front-end developers can we can build a site A to Z a lot of times even with fancy data stuff it's a big conversation this this divide is kind of happening and I encourage people that just talk about it I think it's it's worth talking about especially when it causes frustration at companies because there's there's problems here with pay gaps and there's problems you're finding the right people and stuff and it's just it's just worth having as a conversation I think thanks so much everybody for listening to my talk I think we just about get it I said I maybe wasn't gonna do questions we do have like 5-10 minutes so if the people have some good questions I'd be happy to take one I think I'm microphone is required though for the streams [Applause] [Music] [Music] hi Chris hey I can okay um my name is Amber I follow you on twitter yeah big fan um so I've been a freelance developer for like forever and my biggest problem is that people think I only do like WordPress they don't realize I also do like craft and I do you know static websites I can do pH a little bit of PHP and some JavaScript and stuff even though everywhere on my web site it says I'm a front-end developer yeah so my biggest problem with like changing to like a UX engineer because I don't do react or view or anything like that is that what clients know what that means and like my clients are like agencies so how do people find me like can you just tell them what you do you know I mean I think it's I think it'd be hard to have like I'm on it and then have like a strip of logos these are the CMS's I support you know like that might be a bit much you know but well I mean like on my homepage I have a list of I do accessibility semantics but it's not working um I don't know I mean right now everywhere says front-end developer because that's what everyone understands so like if I switch to UX engineer are they gonna think that I do design work because I don't do any design work oh it's maybe I use your word situation although you or you already are so I don't have to tell you like if there's if it sounds like you're a rock and a hard place kind of thing you're getting the wrong client by me these can be solved with conversations right once you're on the phone hopefully you can really clarify yourself it sounds like the problem is in the first contact they're not understanding what you do exactly but hopefully like a 5-minute call can clear those things up maybe hopefully so good luck with that that means I have to get on the phone Oh thank you those things maybe one more hey Chris um thank you for all you do with the CSS tricks I use flexbox on CSS tricks all the time so my question is like with all the different paths you can go down how do you pick like what's the best way for someone to pick oh I need to learn more about SVG I need to learn more about react how would you suggest go in the back I mean we've always had like the unchopped talk show in our intro theme song ends with this like we're however as at a conference we have this slogan or he asked people to go and they it's a three word slogan just build website so it's almost worth doing here but we had the whole crowd goes just build websites and it's awesome it's part of the theme song now but that's really kind of the advice and I know that it's kind of a cop up with the ideas well how do I pick what to learn next have the project find you or whatever it is you're working on have that guide what you leave to learn Lex I find it's very rare for me to just be like I think I'm gonna dabble with angular this weekend I don't do that ever that's never gonna happen I might do that if I had a client who need it even though I don't do client work or my team decided that we're gonna use that technology for that kind of thing or I saw some demo of an SVG thing that I think I could put into our product somewhere that'd be cool so I'm going to learn it because I have an end goal in mind I think that's the way to do it it is tricky though but if you really are just twiddling your thumbs like what technology should I learn let's say react hey one this isn't a question just to comment actually great so I I got into developed development through linguistics is working on a PhD in linguistics a while back when life sort of led me down a different path but the point that I would say is like when you say compound down love it right that's great however it sounds like a grammar nazi' thing right where you know is it - aidid not hyphenated with when you work on Native American languages like where they putting lots of meanings into one thing and you want to like say well this means that this means that it's really not the case it's how you use it so really the the question of the answer to the first person is like how are you going to use it and each time we use it it's going to take on a little shade of its own main language evolves and I say unhyphenated all right definitely I'm pro - cuz of CSS - Kris [Applause] [Music]

Channel: WordPress

Views: 17,211

Rating: 4.9239545 out of 5

Keywords: Developer

Id: tI0MGJe_ojU

Length: 43min 7sec (2587 seconds)

Published: Wed Dec 12 2018

Reddit Comments

[u/gimmeslack12]

I've continued to hear the argument of JS devs Vs. Front End Devs (i.e. HTML + CSS experts) and I'm a little confused. Do many people really feel like there is this divide?

Am I in the minority by being passionate about all three? I love HTML/CSS and JS vanilla/library/frameworks/etc.

[u/inneratlas]

The presentation cleared up quite a bit for me. I didn't feel like there was a divide, instead I felt like an imposter for not knowing everything.