The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

huhu: Feb 24, 2006

If I wanted to make a webpage that loaded X amount of the most recent images put into a folder, sorted by their EXIF data, what would be the best/a method for doing this? Could it be done with jQuery or would I need to look into something else? I've been messing around with HTML/CSS for some time now without any real goals and this is something I would actually like to implement as part of a website I have in mind. Just a point in the right direction would suffice.

# ? Mar 24, 2015 07:48

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 20:54

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

Super-newbie AngularJS question here:

I'm working with some vendor code that runs the following following whenever the window is resized - this is supposed to resize the widget that they provide to our site whenever the viewport changes:

code:

 if (document.styleSheets[1].cssRules)
   $scope.rules = document.styleSheets[1].cssRules;
 else if (document.styleSheets[1].rules)
   $scope.rules = document.styleSheets[1].rules;
 $scope.rules[0].style.width = z + 'px';

From poking around I get that they're trying to add a "width: z px;" rule to elements with the ng-cloak attribute to resize the div containing the widget, but for a while document.styleSheets[1] was returning our app.css and setting the body and html tags to the width it was calculating. :supaburn:

1. Why would you need to style ng-cloak instead of the actual class of the div containing the widget (which they defined)? Is there some performance reason or will the width not update unless you apply it to ng-cloak?
2. Why assume the css stylesheet that Angular seems to be inserting with the ng-cloak rules is document.styleSheets[1]?

I'm not as familiar with Angular as our vendors probably are so I'm just trying to figure out why they were doing it the way they were.

# ? Mar 24, 2015 14:24

Data Graham: Dec 28, 2009; 📈📊🍪😋

huhu posted:

If I wanted to make a webpage that loaded X amount of the most recent images put into a folder, sorted by their EXIF data, what would be the best/a method for doing this? Could it be done with jQuery or would I need to look into something else? I've been messing around with HTML/CSS for some time now without any real goals and this is something I would actually like to implement as part of a website I have in mind. Just a point in the right direction would suffice.

There's basically two ways to approach this: lightweight (client-side) and heavyweight (full-stack).

The way I (and most "full-stack" people) would approach this is to store the image filenames and EXIF data in a database, and then use some kind of dynamic page creation platform (e.g. Django, Ruby, JSP) to serve up the list of files complete with all their attributes as the result of a sorted query to the database. This requires you to do a bunch of back-end work, though, and to get your hands dirty at all levels from the database to the page generation to the front-end, plus creating UI workflows for functions like uploading images, changing metadata, and so on.

A more lightweight way (which has elements of old-school and elements of new) is to keep the server-side folder just as a bare storage area for your files, which you can just throw pictures into without any special software handling to extract their EXIF data or store any data about them, and the web front-end should "just work". I say this is "old-school" in the sense that web services used to be fairly thin shells over a very bare-bones UNIX filesystem, i.e. just a way of navigating folders and downloading files remotely. This required no back-end work, but you were very limited in your browsing options�basically you had filename, last-modified date, size, and that's about it. Since then, browsing a server's files directly has become unfashionable, and the idea of a "web app" has evolved to the point where you aren't actually navigating any kind of folder structure on the server, but rather a synthetic schema dictated by the shape of your stored data. This gives you lots of flexibility in how you present that data, but you have to build all that infrastructure yourself. I get the impression you're envisioning something as much like the bare-bones old-school way as possible, just with the added ability to browse by embedded metadata that isn't exposed in the filesystem.

The "new-school" side of this approach is that nowadays there are a lot of tools available for client-side programming. If you don't want to have to deal with databases or custom-building a back-end, you can just build a thin page that displays all the images found in a given folder, and then extracts their EXIF data on the fly through JavaScript and sorts them accordingly in-client. There are a number of JS libraries that claim to be able to do this; I don't have direct experience with any of them, and the ones you find with a quick google for "javascript exif" seem to be both rudimentary and under ongoing development, so you'll be working on the bleeding edge and without a net. But it might be the right answer for your application.

# ? Mar 24, 2015 15:22

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Ghostlight posted:

You're brainfarting and setting the values for ViewBox width and height at 100 each for a circle that is defined by a radius of 100. Double them and you're fine.

Argh, true.

But that does go to illustrate the problem I'm trying to solve: I want to design vector art at a known aspect ration (e.g. 1:1), but not necessarily a known pixel size. I want it to scale like a normal "image," although I gather from subsequent reading that this really isn't easy to do and it's better just to decide on a pixel size and go from there.

# ? Mar 24, 2015 20:06

huhu: Feb 24, 2006

Data Graham posted:

There's basically two ways to approach this: lightweight (client-side) and heavyweight (full-stack).

The way I (and most "full-stack" people) would approach this is to store the image filenames and EXIF data in a database, and then use some kind of dynamic page creation platform (e.g. Django, Ruby, JSP) to serve up the list of files complete with all their attributes as the result of a sorted query to the database. This requires you to do a bunch of back-end work, though, and to get your hands dirty at all levels from the database to the page generation to the front-end, plus creating UI workflows for functions like uploading images, changing metadata, and so on.

A more lightweight way (which has elements of old-school and elements of new) is to keep the server-side folder just as a bare storage area for your files, which you can just throw pictures into without any special software handling to extract their EXIF data or store any data about them, and the web front-end should "just work". I say this is "old-school" in the sense that web services used to be fairly thin shells over a very bare-bones UNIX filesystem, i.e. just a way of navigating folders and downloading files remotely. This required no back-end work, but you were very limited in your browsing options�basically you had filename, last-modified date, size, and that's about it. Since then, browsing a server's files directly has become unfashionable, and the idea of a "web app" has evolved to the point where you aren't actually navigating any kind of folder structure on the server, but rather a synthetic schema dictated by the shape of your stored data. This gives you lots of flexibility in how you present that data, but you have to build all that infrastructure yourself. I get the impression you're envisioning something as much like the bare-bones old-school way as possible, just with the added ability to browse by embedded metadata that isn't exposed in the filesystem.

The "new-school" side of this approach is that nowadays there are a lot of tools available for client-side programming. If you don't want to have to deal with databases or custom-building a back-end, you can just build a thin page that displays all the images found in a given folder, and then extracts their EXIF data on the fly through JavaScript and sorts them accordingly in-client. There are a number of JS libraries that claim to be able to do this; I don't have direct experience with any of them, and the ones you find with a quick google for "javascript exif" seem to be both rudimentary and under ongoing development, so you'll be working on the bleeding edge and without a net. But it might be the right answer for your application.

Awesome reply, thank you very much. I'll probably be back in the future with more questions.

# ? Mar 24, 2015 23:02

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Kobayashi posted:

Argh, true.

But that does go to illustrate the problem I'm trying to solve: I want to design vector art at a known aspect ration (e.g. 1:1), but not necessarily a known pixel size. I want it to scale like a normal "image," although I gather from subsequent reading that this really isn't easy to do and it's better just to decide on a pixel size and go from there.

I'm not sure if I follow. It's vector art so the pixel size it's designed at is arbitrary, all you need to sort out is how it's displaying. ViewBox tells the browser the actual scale of the SVG, and the browser then looks for a height and width attribute on the SVG or the container and maths out how to draw the SVG based on that. Once you've got your image, the ViewBox should remain static unless you decide you want to, for example, use the <circle> tool to make quarter-circles.

Taking your jsbin, the ViewBox for a full circle would remain constant at "0 0 200 200" because you've already told the browser to draw a 100px radius circle at y100px and x100px. The SVG will scale to 100% of its container or whatever its width and height are, using the ViewBox as a 'ruler' to determine how the measurements of the SVG increase - the actual measurements given are entirely arbitrary, they're just expressed as pixels because that's how browsers work.

These all draw the exact same circle:

code:

<svg viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </svg>
<svg viewbox="0 0 200 200"> <circle cx="100" cy="100" r="100" /> </svg>
<svg viewbox="0 0 6000 6000"> <circle cx="3000" cy="3000" r="3000" /> </svg>

Because the actual rendered size is determined by size attributes or css styling - <circle> defines what the object is, while viewbox="" tells the browser how to measure the object.

# ? Mar 25, 2015 02:37

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

iwannabebobdylan posted:

I'm wondering what the best tool, or the proper framework, would be for this scenario:

User inputs 4 ingredients that he has in his fridge and the website returns all recipes in a database that feature 3 or 4 of those ingredients.

I keep running into website ideas (and scenarios in life) where databases like this would be helpful. I've started with Wordpress and the tagging system (because it's easy), but that only accounts for 1 match, and it isn't the best at inputting the info. Is there a simple 3 word answer to this that can get me headed in the right direction? Or does this database tool exist?

To do this you'll need a 'real' database. A basic structure would be:
Recipes Table (RecipeID, RecipeName, PreperationTime, etc etc.)
Ingredients Table (IngredientID, IngredientName, etc etc.)
Recipes_Ingredients Table (RI_ID, RecipeID, IngredientID, Amount, etc etc)

Then pull a query like
SELECT * FROM Recipes WHERE RecipeID IN(SELECT DISTINCT RecipeID FROM Reciples_Ingredients WHERE IngredientID IN(1,2,3,4)) -- Assuming 1,2,3,4 were the ingredients specified

The SQL isn't optimized but you get the idea

# ? Mar 25, 2015 04:26

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Ghostlight posted:

These all draw the exact same circle:
code:
<svg viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </svg>
<svg viewbox="0 0 200 200"> <circle cx="100" cy="100" r="100" /> </svg>
<svg viewbox="0 0 6000 6000"> <circle cx="3000" cy="3000" r="3000" /> </svg>
Because the actual rendered size is determined by size attributes or css styling - <circle> defines what the object is, while viewbox="" tells the browser how to measure the object.

Basically I'd like to say viewBox="0 0 100% 100%", where "100%" means exactly as tall and as wide as whatever the child objects require. I don't want to concern myself with whether the circle's radius is specified as 1, 200, or 3000.

(I want it to work more like images and CSS, and less like its own document with its own coordinate system and viewport. I want it to work that way so I can set it and forget it, instead of leaving myself a comment for when I inevitably forget about how and why it works this way when I decide to change something.)

# ? Mar 25, 2015 04:52

iwannabebobdylan: Jun 10, 2004

Scaramouche posted:

To do this you'll need a 'real' database. A basic structure would be:
Recipes Table (RecipeID, RecipeName, PreperationTime, etc etc.)
Ingredients Table (IngredientID, IngredientName, etc etc.)
Recipes_Ingredients Table (RI_ID, RecipeID, IngredientID, Amount, etc etc)

Then pull a query like
SELECT * FROM Recipes WHERE RecipeID IN(SELECT DISTINCT RecipeID FROM Reciples_Ingredients WHERE IngredientID IN(1,2,3,4)) -- Assuming 1,2,3,4 were the ingredients specified

The SQL isn't optimized but you get the idea

Hey thanks! This is great stuff.

# ? Mar 25, 2015 05:27

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Kobayashi posted:

Basically I'd like to say viewBox="0 0 100% 100%", where "100%" means exactly as tall and as wide as whatever the child objects require. I don't want to concern myself with whether the circle's radius is specified as 1, 200, or 3000.

(I want it to work more like images and CSS, and less like its own document with its own coordinate system and viewport. I want it to work that way so I can set it and forget it, instead of leaving myself a comment for when I inevitably forget about how and why it works this way when I decide to change something.)

Is this helpful: http://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container ?

# ? Mar 25, 2015 11:11

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Devops and Docker/Fleet/CoreOS/AWS question. How to auto scale?

Long story short, I'm looking into making our infrastructure not suck by using Docker with CoreOS on AWS. In my limited reading, I've covered the basics of how you can use CloudFormation to spin up a series of instances on AWS, and even set some load alarms, and use Fleet to distribute units, which control Docker containers, across each of these instances, with service discovery and fleetctl and all that jazz.

Where I'm having trouble, is the concept of automatically scaling a particular bottlenecked unit. From what I've read, Fleet and it's units are supposed to be fairly ignorant about which server a unit runs on, so long as it doesn't conflict with another unit (X-Conflict, etc), but the AWS auto scaling looks like it only monitors processor usage across all instances.

If AWS is only monitoring global CPU usage, then when another instance is started how can Fleet know to only fire up another Nginx/php-fpm pair of units, and not another Redis slave? Or, if I want to keep the two kinds of processes independently scaled, do I need to ensure they reside on their own instances using something like X-Conflict? Even if they're supposed to be on their own instances, how can Fleet know that it needs to fire up a Redis unit and not a Nginx unit when a new box comes online? Would that need to be part of my AWS auto scaling config, like using two separate scaling groups and having an instruction to Fleet saying "Fire this up as a Redis box"?

These are bad examples, but I guess what I'm saying is, if I have two units that conflict, and one is causing massive CPU usage while the other is doing nothing at all, how would you configure AWS/Fleet to fire up another instance of the unit that matters, rather than the one which isn't doing anything?

# ? Mar 25, 2015 13:02

substitute: Aug 30, 2003; you for my mum

An update to Sublime Text was released yesterday.

http://www.sublimetext.com/3

# ? Mar 25, 2015 14:05

my bony fealty: Oct 1, 2008

Parrotine posted:

This is an excellent post, thank you for making it.

I took that one fella's advice and started building my first website from scratch! I've posted where i'm at below if anyone cares to see my progress:

Thanks for the encouraging words everyone, it feels like i'm learning the handwriting of God himself

fellow beginner web developer and/or designer buddy! I'm a bit further along than you in the process (started making websites for student organizations in college in my spare time, currently employed by the state government in a position that's about 50% web development, 25% graphic design, and 25% misc other computer stuff) and I was absolutely where you are now not too long ago. Echoing that the best way to learn is to throw yourself into something, the alternating frustration and feeling of accomplishment will have you improving your chops in no time. My "learning process" consists of Treehouse (Codeacademy before that), Google & StackOverflow, and trying stuff out in my projects.

I've found that making a site for a hobby or interest of yours is a great way to start a portfolio - I made a site that was a photo gallery of neat bikes I took pictures of around town, for example. I definitely get the "overwhelming" feeling of it all too, but the good news is you don't really have to worry about AngularJS or Node or whatever until you have a solid foundation in vanilla Javascript (don't be afraid of jQuery though, it's very easy to use and exceedingly well-documented, in my experience).

The biggest tip I can give is to get very friendly with browser developer tools - I've learned a lot from digging through the source of other websites, and if you see something cool on a site you can take a look under the hood and see how you can do something similar.

# ? Mar 26, 2015 03:39

onemillionzombies: Apr 27, 2014

So I've just begun learning web development myself and have of course discovered the wonders of Bootstrap, how wary should I be of using a framework this early in my learning process? I have a pretty fair grasp of HTML/CSS after doing just about every lesson on the two that Treehouse offers, as well as building some stuff on my own, but I don't know a lick of JavaScript yet.

# ? Mar 26, 2015 04:10

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Kobayashi posted:

Basically I'd like to say viewBox="0 0 100% 100%", where "100%" means exactly as tall and as wide as whatever the child objects require. I don't want to concern myself with whether the circle's radius is specified as 1, 200, or 3000.

(I want it to work more like images and CSS, and less like its own document with its own coordinate system and viewport. I want it to work that way so I can set it and forget it, instead of leaving myself a comment for when I inevitably forget about how and why it works this way when I decide to change something.)

Right, so you just work on a 100 scale then - as I said, it's arbitrary what measurement you use it only matters how they relate to each other. When you have viewBox="0 0 100(%) 100(%)" you define the radius of the circle as 50(%). It doesn't matter what measurements you use, just how they relate to each other - for the viewbox to be 100% of a circle it just needs to be double the circle's radius because that's how circles roll. You need to define a viewbox because an SVG can contain multiple objects of different types and scale, and if you're using them to make a complex picture you'd need to hide some parts of them - it's generally easier to define a circle and hide half of it than 'draw' a semi-circle.

The viewbox can't know how tall and wide it has to be to fit the child objects because the child objects don't have a size until the viewbox is rendered - they are just a collection of co-ordinates defined in relation to the viewbox.

Once you define the object(s) and set the viewbox correctly you should never have to worry about it again - just apply CSS heights and widths to it or its container (SVGs by default scale to 100% of their container). I know Illustrator will define your viewbox for you based on workspace when you export code - Sketch should be able to do the same thing, so it shouldn't be something you actually have to worry about unless you're using the SVG tags to draw raw objects.

# ? Mar 26, 2015 04:13

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

onemillionzombies posted:

So I've just begun learning web development myself and have of course discovered the wonders of Bootstrap, how wary should I be of using a framework this early in my learning process? I have a pretty fair grasp of HTML/CSS after doing just about every lesson on the two that Treehouse offers, as well as building some stuff on my own, but I don't know a lick of JavaScript yet.

Writing something from scratch, and using a framework are two wildly different beasts. You can think of any framework as a set of tools - they provide a generic approach, and a ton of prepared shortcuts to get from zero-to-something very quickly.
It sounds to me like you've done it the right way, though - learn the basics, and then try moving on to some actual tools of the trade. I'd recommend the same approach for JavaScript - do some basic tutorials to get a feel for the language, then learn how to use something like jQuery to achieve your actual goals.

If you're not too familiar with the language of a framework - HTML/CSS in this case - it can be a good idea to take a peek at what's happening under the hood. With Bootstrap, try building something, then take a look at some of the standard elements in the browser's inspector, and try to understand what's going on. Try disabling and enabling certain CSS properties and see what happens. After that, perhaps try overriding some of the styles to customise the Framework to look a bit different, and maybe add your own feature around Bootstrap, like an image gallery.

Also, don't be afraid to go off-framework to achieve your goals - frameworks provide tools, but they don't account for everything, and sometimes their implementations aren't just-so. Some code review by your peers (or us!) can be a good follow-up to anything custom; there's no better way to get the right answer than to be wrong on the internet.

Don't forget that where you spend your time is where you'll get your knowledge. If you spend 10 hours making a purely bootstrap page, that's 10 hours of learning bootstrap, not CSS. If you spend 1 hour making a Bootstrap page, and 9 hours poking around in the inspector and fiddling with elements, that's 1 hour on bootstrap, 8 hours on CSS shenanigans, and probably 1 hour of getting to know the browsers inspector really well.

# ? Mar 26, 2015 04:52

onemillionzombies: Apr 27, 2014

Excellent response, thank you.

# ? Mar 26, 2015 05:23

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

onemillionzombies posted:

So I've just begun learning web development myself and have of course discovered the wonders of Bootstrap, how wary should I be of using a framework this early in my learning process? I have a pretty fair grasp of HTML/CSS after doing just about every lesson on the two that Treehouse offers, as well as building some stuff on my own, but I don't know a lick of JavaScript yet.

If the goal is to learn, don't use Bootstrap at all other than inspecting its source to see how they did something. Much like using JQuery from day one when trying to learn JavaScript, you'll be "learning the framework " rather than the underlying technology itself.

When you start experiencing the pains those frameworks were designed to solve repeatedly, you want to know how to solve them yourself so you can make a reasoned decision on if the negatives that come with something like Bootstrap are worth the gains.

# ? Mar 26, 2015 11:32

revmoo: May 25, 2006; #basta

I'm working on an issue with Mapbox/leaflet where I need to be able to display markers that may be the exact same coordinates. If this occurs, you only see one marker on the map. I can't use marker clustering because I need the user to see the individual dots. I came up with a method to offset the longitude by .001 if there's a collision, and that works okay, but you have to zoom way in to see it. Has anybody solved an issue like this before? Basically I need a way to group dots rather than cluster them, and it needs to work with the various zoom levels so that each distinct dot is visible. If I use a large longitude offset it works at high zoom levels but then you zoom in and it's 40 miles away.

# ? Mar 26, 2015 14:29

America Inc.: Nov 22, 2013; I plan to live forever, of course, but barring that I'd settle for a couple thousand years. Even 500 would be pretty nice.

Is the job market for web developers reaching overcapacity?
If not, considering that templates are very popular in the industry, is it difficult to command good pay on the front-end?

America Inc. fucked around with this message at 21:20 on Mar 26, 2015

# ? Mar 26, 2015 21:18

yoyomama: Dec 28, 2008

I have a question for y'all: I'm working on making a web app for my portfolio, and while I have the ux design process down, I'll eventually need to make a working prototype for testing. It's pretty straightforward app; people enter their budget info, and then they get a chart and/or calendar that shows how much money they'd save over time.

I've found the js tools I'll need to make it all work, but I'm wondering if there's a specific framework I should use. Looking up info on Angular, react, meteor, etc. is starting to make my head spin. Do I even need to worry about this, and would it make developing this prototype easier? Or can I just use plain old JS instead? Any and all help is greatly appreciated.

# ? Mar 26, 2015 21:20

lunar detritus: May 6, 2009

LookingGodIntheEye posted:

Is the job market for web developers reaching overcapacity?
If not, considering that templates are very popular in the industry, is it difficult to command good pay on the front-end?

As all things, it depends.

HTML/CSS are never going to change that much, at least the basics, so the market is already full of people that can code HTML/CSS and basic jQuery and the amount will continue to grow. So, there'll always be people for coding email newsletters and cutting up PSDs, the grunt work of webdev.

However, from what I've seen, most frontend job openings require knowledge of a javascript framework (Mostly Angular from what I've seen, sometimes React or backbone.js) and that seems to be enough of a barrier to avoid a market crash. Of course, give it a few years and everyone will be able to kinda use Angular but it won't be as desirable because the new shiny thing is something else.

# ? Mar 26, 2015 21:45

America Inc.: Nov 22, 2013; I plan to live forever, of course, but barring that I'd settle for a couple thousand years. Even 500 would be pretty nice.

gmq posted:

the new shiny thing

What do you think that might be?

# ? Mar 26, 2015 23:34

My Rhythmic Crotch: Jan 13, 2011

Data Graham posted:

dipshit partner

Late to the party but I thought I would comment anyway:

I've worked with several people like this, who were biased against perfectly fine technologies that they had no idea about. One guy was particularly against anything to do with DHCP or ethernet :iiam:

The best thing I found to do was just agree with them, wait until they walk out of the room, and then go about doing whatever it is you know is right. "DHCP is horrible? Yeah I totally agree. I'll make sure to deactivate that right away." And then I'd do absolutely nothing. These kind of people know so little that they usually won't bother to review your code, or even if they did, you can continue bullshitting them at that time.

Good luck working with this bozo!

# ? Mar 26, 2015 23:45

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LookingGodIntheEye posted:

What do you think that might be?

I'm not sure but it will be written two weeks after the last shiny new thing.

React and the ideas behind what they call the Flux app architeure will power a new wave of shiny new things over the next six months. When that becomes the norm, someone will write a sweeping condemnation of it, and a new host of shiny new thing will spring up to champion some other paradigm. Rinse. Repeat.

# ? Mar 27, 2015 00:26

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Parrotine posted:

As a result i'm steering my entire efforts towards Front End Web Design since it seems to be the more lucrative of the fields and in higher demand.

Based on your summary it seems like I need to learn PHP, which is something that I haven't a clue about. A lot of these other languages seem to be adding to the madness more than helping, so maybe you could explain what the purpose of PHP in a definition that the layman could understand?

Thanks for the encouraging words everyone, it feels like i'm learning the handwriting of God himself

EDIT: Just for clarity, when you talk about graphic design, are you talking about actual graphic design, or just front-end web design work? This is pretty important for my understanding, i'm pretty literal-minded at times

Your progress is looking good, that's exactly the kind of thing you should be working on in order to start teaching yourself the practical applications of the theory you've been learning.

I wouldn't say you need to learn PHP, but it's a matter of whether you want to be a back end developer vs. front end developer vs. front end designer. Designing for the front end is a pretty oversaturated area at the moment, and you'd have to make yourself stand out by having at least some coding competency in HTML, CSS and JavaScript (all three are a must). Designers are the people who draw the pretty layouts in Photoshop/Illustrator and these days, are often able to make mockups in HTML/CSS as well, but the site at this point doesn't need to actually DO anything.

If you want to be a front end developer (which is a much less saturated area) you'll need to be very good at HTML, CSS and JavaScript as well as competent with a number of specific JavaScript libraries. In particular jQuery is an absolute must-have, Angular and React are close seconds. There are too many to name really, but as you learn you'll see various libraries mentioned pretty frequently and you'll develop a bit of an idea of how popular they each are. You'll be working on actual code that controls how the front end looks and functions, and in an ideal world you'd be working with a designer who will do the arty stuff for you.

Bear in mind the JavaScript library stuff applies only if you actually want to do the coding side of things. If you're happy just doing the design work, then you'll need good Photoshop/Illustrator skills and the HTML/CSS/JS stuff is a handy bonus to have up your sleeve to make you more attractive as a candidate. The distinction is probably a bit confusing at the moment, but you'll find as you learn more you'll start to see the very clear dividing lines between front end design, front end development and back end development. For the record, PHP is for back end development, so you only need to learn that if you're interested in coding back end, server-side stuff.

putin is a cunt fucked around with this message at 01:00 on Mar 27, 2015

# ? Mar 27, 2015 00:55

lunar detritus: May 6, 2009

LookingGodIntheEye posted:

What do you think that might be?

Lumpy posted:

I'm not sure but it will be written two weeks after the last shiny new thing.

Basically this. Frontend is moving very fast right now so it may be difficult to jump to the right framework at the right time. I'd recommend learning javascript really well and then check what framework is hot in the job market.

Or you could learn Angular and have a job for the next couple of years maintaining all the apps that won't be upgraded to Angular 2.

# ? Mar 27, 2015 02:41

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

My Rhythmic Crotch posted:

One guy was particularly against anything to do with DHCP or ethernet

lol, what a goddamn stupid thing to take a position on.

# ? Mar 27, 2015 02:43

Data Graham: Dec 28, 2009; 📈📊🍪😋

So, what, it was all wifi, all static addresses, all the time?

# ? Mar 27, 2015 02:56

kedo: Nov 27, 2007

LookingGodIntheEye posted:

Is the job market for web developers reaching overcapacity?
If not, considering that templates are very popular in the industry, is it difficult to command good pay on the front-end?

Don't go into front-end development, go into backend. I have nothing to back this up, but over the course of the last decade plus the types of jobs you could get as a front-end developer have been and are being slowly eaten away. When you get right down to it, HTML and CSS are not complicated. Ever since Dreamweaver (hell, ever since MS Publisher, maybe even earlier) people have been writing programs with the goal of replacing handwritten HTML and/or CSS. We're still not quite there but each year we get a hell of a lot closer to having programs that a designer could use to create templates to hand over to a developer with no need for a front-end developer in between.

Case in point ��early in my career I used to do a ton of websites for small restaurants. They were easy to design and code and while the clients sucked (restaurants are always lovely clients) the money was pretty good. We'd probably charge something like $5000-10000 depending on whether or not it had a CMS and make a ton of profit because they were so easy and fast. But now there's Squarespace and honestly if you're a restaurant and you're paying me for a simple website, my mind is boggled because unless you require some crazy functionality or want a super custom design, there's no reason to not use Squarespace.

The Wizard of Poz posted:

Designers are the people who draw the pretty layouts in Photoshop/Illustrator and these days, are often able to make mockups in HTML/CSS as well, but the site at this point doesn't need to actually DO anything.

This is a key point imo. Anyone can make a good looking website these days, but doing something is what matters. The reason why you see so many sites with idiotic amounts of animation and parallax scrolling and other nonsense is because it's loving hard to stand out from the pack if you're relying purely on your front-end. The things a website does is what makes it valuable, and if you're not involved in creating that part of a site (which is a hell of a lot harder to code and is unlikely to be replaced as quickly as HTML and CSS talent is), you're doing yourself a disservice career-wise.

So learn a real programming language if you want to future-proof yourself for a little while, or get into design. This post is probably going to sound alarmist to a lot of people, but it's honestly what I've been thinking about a lot lately. Five years ago I never thought I'd tell someone to use a service like Squarespace for their site, these days I tell lots of people to do so.

e: this is of course entirely ignoring JS and all the crazy poo poo you can do with it now, I have a hard time calling that "front-end." My point is that HTML/CSS code monkeys are disposable.

kedo fucked around with this message at 03:30 on Mar 27, 2015

# ? Mar 27, 2015 03:26

My Rhythmic Crotch: Jan 13, 2011

Data Graham posted:

So, what, it was all wifi, all static addresses, all the time?

These were industrial devices so no wifi, but yes he wanted all devices to have their IPs set statically. "Ethernet is poo poo. DHCP is poo poo" was the gist of his explanation

There's no arguing with these people - they already know it all :downs:

# ? Mar 27, 2015 04:43

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

kedo posted:

e: this is of course entirely ignoring JS and all the crazy poo poo you can do with it now, I have a hard time calling that "front-end." My point is that HTML/CSS code monkeys are disposable.

I think the key distinction between front-end and back-end is more or less mirrored by the key distinction between client-side and server-side - where the code is run. JS is very much a front-end technology, regardless of how complex it becomes (ignoring Node because gently caress Node).

# ? Mar 27, 2015 05:18

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

kedo posted:

e: this is of course entirely ignoring JS and all the crazy poo poo you can do with it now, I have a hard time calling that "front-end." My point is that HTML/CSS code monkeys are disposable.

What? JS runs in the browser. It's front-end. If front-end actually did just mean HTML and CSS, you might have a point (I still don't think so), but front-end is a complex beast. Think about all the JS frameworks, build tools, libraries, etc. The landscape's only growing in complexity. If anything, the demand for skilled front-enders is increasing.

On that note, I also disagree with your assessment that services like Squarespace are eating away front-end jobs. The type of client who's happy with a template-based site isn't the same type of client that serious front-end designers/developers are looking for. You'll never get a wholly custom website with a site-builder, which is reason alone that most serious businesses look first to a professional.

# ? Mar 27, 2015 16:10

lunar detritus: May 6, 2009

caiman posted:

What? JS runs in the browser. It's front-end. If front-end actually did just mean HTML and CSS, you might have a point (I still don't think so), but front-end is a complex beast. Think about all the JS frameworks, build tools, libraries, etc. The landscape's only growing in complexity. If anything, the demand for skilled front-enders is increasing.

I think people get confused because 5-8 years ago being a frontend dev meant you knew html/css and JS. There were some new things in the horizon but if someone was looking for a frontend dev those were the requirements. Now it's all segmented, they may need an Angular dev, or a React dev, etc. It's starting to look like the backend landscape where you may know Ruby or PHP or Python but jobs look for people that work in Rails Laravel or Django.

# ? Mar 27, 2015 16:28

The Dave: Sep 9, 2003

caiman posted:

On that note, I also disagree with your assessment that services like Squarespace are eating away front-end jobs. The type of client who's happy with a template-based site isn't the same type of client that serious front-end designers/developers are looking for. You'll never get a wholly custom website with a site-builder, which is reason alone that most serious businesses look first to a professional.

Agree with this and I feel like the type of user that you would expect to go to squarespace or use bootstrap isn't the owner of a product / business that a front-end dev is really looking to make an impact on. Funny enough I've encountered three companies now going on a hiring spree and have a part of that being "We need UX, UI, and front end guys because we built out platform templates on bootstrap and now we're legitimate and need to actually care."

# ? Mar 27, 2015 16:57

kedo: Nov 27, 2007

So two things � one, I was a doing a little drunk posting last night and perhaps didn't make my point as well as I could have, and two, I was trying to address what gmq was talking:

gmq posted:

As all things, it depends.

HTML/CSS are never going to change that much, at least the basics, so the market is already full of people that can code HTML/CSS and basic jQuery and the amount will continue to grow. So, there'll always be people for coding email newsletters and cutting up PSDs, the grunt work of webdev.

However, from what I've seen, most frontend job openings require knowledge of a javascript framework (Mostly Angular from what I've seen, sometimes React or backbone.js) and that seems to be enough of a barrier to avoid a market crash. Of course, give it a few years and everyone will be able to kinda use Angular but it won't be as desirable because the new shiny thing is something else.

I'm always amazed at the number of people I see applying for front-end jobs who only know HTML and CSS. Again, like gmq was saying, 5-8 years ago the vast majority if not all the work a front-end dev would be doing really only involved HTML and CSS and a smattering of Javascript. The idea of creating large swaths of a web application on the front-end with a crazy framework wasn't something every front-end dev or even most front-end devs were doing. You could be (and you still can be, to a certain extent) a front-end developer who never deals with a real programming language. My point is that those "easy" front-end jobs (if you will) are disappearing.

So what wasn't stated in my original post was simply what I've seen in most job applicants ��a lack of knowledge when it comes to current front-end practices.

caiman posted:

On that note, I also disagree with your assessment that services like Squarespace are eating away front-end jobs.

It is, but not the types of front-end jobs you're thinking of. There are a LOT of web designers and developers out there who make a living creating simple sites for clients who would now use Squarespace. Trust me I know tons of them, both clients and developers. While it's true you'll never get a wholly custom site with a site-builder, you can get one that looks pretty drat professional and will stand up just fine against your competitors. The difference between Squarespace and past template sites is that Squarespace does much better job at keeping up with trends and their sites, with the right care and attention, don't always look like templates.

So again, I'm trying to address the point that if you're one of those bottom of the barrel front-end devs who churns out HTML and CSS all day and nothing more, your days are numbered. If you're working for a company that's targeting "serious business" and developing complex apps, I'm not really talking about you.

kedo fucked around with this message at 18:08 on Mar 27, 2015

# ? Mar 27, 2015 17:59

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

How do you guys manage testing on browser configurations? Basically, is there a way to do it that doesn't involve manually loving with settings between reloads?

# ? Mar 27, 2015 19:23

Data Graham: Dec 28, 2009; 📈📊🍪😋

VMs.

# ? Mar 27, 2015 20:51

fuf: Sep 12, 2004; haha

What's a good site for stock images? I want some cool looking black-and-white cityscapes to use as background images.

I've used http://photodune.net/ in the past but unless I'm an idiot there's no way to browse only black and white photos, which seems like an oversight on their part.

# ? Mar 30, 2015 18:18

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 20:54

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

I really like Unsplash. Searching for "black and white" seems to work pretty well.

EDIT: When you search, be sure to select "All" instead of "Featured" and you'll get a bunch more results.

Spatulater bro! fucked around with this message at 18:25 on Mar 30, 2015

# ? Mar 30, 2015 18:23

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »