The Web Design & Development Megathread

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

«‹›361 »

gbaby: Feb 6, 2015

LabiaBadgerTickler posted:

This is going to be a pretty open question, so apologies in advance for the inevitable poo poo storm that will rise as a result. But I've been programming for a few years now (c# mainly) and I'm looking to get into web development and change career paths.

Like v1nce said, what do you want to make? A good looking static website, an application where users interact, a multiplayer web game? Figure that out and work towards creating it.

JavaScript/Node.js and friends are pretty hot right now and is one language. I've been Meteor which runs on Node and really like it.

Whats the consensus on Meteor?

# ? Jul 9, 2015 17:37

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 20:16

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I'm working on a JS sandbox page and I can't figure out the css for my console / command line.

https://nilock.github.com/ED2016/2711/LessonPlan/LessonPlan.html

The command line on the lower right is a simple repl that has access to the functions defined on the left. I can't get the output window to overflow-y: scroll properly. Put "4" into the input bar and mash enter until you overflow to see the problem; you can probably guess what it is that I'm going for.

Suggestions?

# ? Jul 9, 2015 18:33

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

Newf posted:

I'm working on a JS sandbox page and I can't figure out the css for my console / command line.

https://nilock.github.com/ED2016/2711/LessonPlan/LessonPlan.html

The command line on the lower right is a simple repl that has access to the functions defined on the left. I can't get the output window to overflow-y: scroll properly. Put "4" into the input bar and mash enter until you overflow to see the problem; you can probably guess what it is that I'm going for.

Suggestions?

Something like this: http://jsfiddle.net/5nhnfprx/

# ? Jul 9, 2015 19:39

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Lumpy posted:

Something like this: http://jsfiddle.net/5nhnfprx/

You're a treasure. I assume that the #wrapper {} is a holdover from some abandoned train of thought and I should ignore it (other than having just learned about the vw unit)?

# ? Jul 9, 2015 19:55

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

Newf posted:

You're a treasure. I assume that the #wrapper {} is a holdover from some abandoned train of thought and I should ignore it (other than having just learned about the vw unit)?

Oh yeah, I was going to throw everything in it, but I didn't get around to it.

You could put all the stuff I did inside a container and it should work.. I think that's why I was doing that, but I forget, it's been so long.... :v:

# ? Jul 9, 2015 20:03

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Lumpy posted:

Oh yeah, I was going to throw everything in it, but I didn't get around to it.

You could put all the stuff I did inside a container and it should work.. I think that's why I was doing that, but I forget, it's been so long....

This could be avoided if you had any decent comments in your code

By 'container', you mean any old div? Do the coordinates wrt position: absolute apply against the parent element?

# ? Jul 9, 2015 20:09

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

Newf posted:

This could be avoided if you had any decent comments in your code

By 'container', you mean any old div? Do the coordinates wrt position: absolute apply against the parent element?

As long as the parent has position of absolute or relative, then any child's absolute will be relative to that element. Otherwise, it will look up the DOM for the next element that has absolute or relative and use that (ending at the document if none do.) Take a gander at this: http://jsfiddle.net/v8bj592h/1/ and remove the position: relative; from the #rel container. You'll see it's children suddenly have their positions based on the document instead.

EDIT: I also put comments in that code.

# ? Jul 9, 2015 22:07

Ron Don Volante: Dec 29, 2012

What's the best way to build a reviews website, something along the lines of ratebeer.com? Does anybody know of a good template, or is that something you would have to build from scratch?

# ? Jul 13, 2015 00:33

my bony fealty: Oct 1, 2008

Ron Don Volante posted:

What's the best way to build a reviews website, something along the lines of ratebeer.com? Does anybody know of a good template, or is that something you would have to build from scratch?

Wordpress is probably the easiest way

# ? Jul 13, 2015 03:13

revmoo: May 25, 2006; #basta

Any pointers for dealing with tables with lots of data and formatting them nicely? I've got a responsive app, with a custom theme on bootstrap, that uses the same view for PDF/print/web, and it works really nicely across all forms, but the tabular data I'm displaying could use a little smarter formatting as there's various amounts of text from row to row. A typical page might be 250 rows of somewhat dense text and it's just looking a little unrefined overall. It's in DataTables and I'm pretty free to modify the code as needed, just wondering what obvious stuff I've missed as far as representing a nice looking table. I'm not worried about making users scroll, just more concerned about rendering the rows a little cleaner. Perhaps some auto font-shrinking for large fields or something? I dunno.

# ? Jul 13, 2015 21:49

kedo: Nov 27, 2007

revmoo posted:

Any pointers for dealing with tables with lots of data and formatting them nicely? I've got a responsive app, with a custom theme on bootstrap, that uses the same view for PDF/print/web, and it works really nicely across all forms, but the tabular data I'm displaying could use a little smarter formatting as there's various amounts of text from row to row. A typical page might be 250 rows of somewhat dense text and it's just looking a little unrefined overall. It's in DataTables and I'm pretty free to modify the code as needed, just wondering what obvious stuff I've missed as far as representing a nice looking table. I'm not worried about making users scroll, just more concerned about rendering the rows a little cleaner. Perhaps some auto font-shrinking for large fields or something? I dunno.

My two cents regarding tables (I've done a lot of work with academic publishers, so I've had to deal with them quite a bit):

� Zebra striping isn't the devil as many would lead you to believe, just don't over do it. Giving a <tr> a hover color can be a nice addition/alternative.
��Padding is your friend.
� Don't be afraid of horizontal scrolling. Better for a user to have to scroll to read a huge table rather than have a dozen columns smashed into 1000 pixels of space.
��Play with font styles on different rows/columns. Bolding, emphasis and font color can go along ways in improving a table's readability.
��Play with justification and font choice when appropriate (ie. a bunch of numbers that get summed at the bottom of the table should be right aligned in a monospace font).
��If your content space isn't 100% of the browser's width, consider giving users the option to open the table in a new window.

Also in general you should read this book if you haven't. Tables aren't always the best way to represent data (though they're of course necessary sometimes), but that book has a lot of great information that can be applied to data design in general.

# ? Jul 13, 2015 22:02

revmoo: May 25, 2006; #basta

Very good advice, thanks!

# ? Jul 13, 2015 23:10

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

revmoo posted:

Any pointers for dealing with tables with lots of data and formatting them nicely? I've got a responsive app, with a custom theme on bootstrap, that uses the same view for PDF/print/web, and it works really nicely across all forms, but the tabular data I'm displaying could use a little smarter formatting as there's various amounts of text from row to row. A typical page might be 250 rows of somewhat dense text and it's just looking a little unrefined overall. It's in DataTables and I'm pretty free to modify the code as needed, just wondering what obvious stuff I've missed as far as representing a nice looking table. I'm not worried about making users scroll, just more concerned about rendering the rows a little cleaner. Perhaps some auto font-shrinking for large fields or something? I dunno.

Figure out if most of what's the table actually needs to be there. A large majority of the columns in a table are not cared about by most people most of the time. A general use case I've seen over and over and over is "Well, really we only look at these two things, and if they look off, then we look at these other ones..." So showing a very minimal view into the data with the option to expand a row / view details on a row or rows has been a wonderful solution for many of my UI clients.

# ? Jul 14, 2015 00:16

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

revmoo posted:

Any pointers for dealing with tables with lots of data and formatting them nicely?

Last time I had to do something with big fat tables of data was for error reporting on a large scale broadcasting company's transmitter network. Error reports by technicians ranged from "its fixed" to complete novels.

We used icons with tooltips to display any interesting state flags, like "ongoing issue" or "happened in last 2 hours". Operators quickly got used to what the icons meant and let them either ignore or jump to issues that were concerning.

For large description fields we truncated the content to ~200 chars and locked the row with CSS so it only displayed one line, keeping the table nice and condensed (think: excel). When you mouse over the description it would AJAX a larger chunk of the description and show it in a popover. That way system admins could see more details on the item without having to delve into the record, and it was easy to browse thousands of records at once.

# ? Jul 14, 2015 03:45

fuf: Sep 12, 2004; haha

I just bought a macbook pro and it's pretty neat. For ages I've been struggling trying to get a stable linux setup where I can quickly switch between a desktop environment and a terminal, and it turns out I should have just bought a fuckin macbook. Nice fullscreen bash terminal and vim is even installed by default.

But I figure now might be a good time to ~~optimise my workflow~~ and try out some cool software. What are some good things for web developers that you guys use? CodeKit looks cool?

I am going to switch from vim to sublime text.

Is Transmit the best sftp client?

Is Tower good for managing git repos? Their promo video is lame as hell haha:
https://www.youtube.com/watch?v=cyyuqf1m-2E

What about local web server? Is MAMP just the standard thing that everyone uses?

# ? Jul 15, 2015 13:09

IronDoge: Nov 6, 2008

Personally, I've switched to Atom from Sublime Text. But that's just personal preference. I use SourceTree to manage my git repos. For SFTP I use CyberDuck.

For a local web server I use Vagrant and ScotchBox. That might be a bit of an odd thing to use but that could just be me. I just moved over from a Windows environment as well and the main reason I used Vagrant was so I could quickly setup a clean new environment and ssh to the local box to do all the typical linux commands on a local server. I might switch to MAMP since I can do all that stuff in terminal now.

IronDoge fucked around with this message at 14:14 on Jul 15, 2015

# ? Jul 15, 2015 14:11

Depressing Box: Jun 27, 2010; Half-price sideshow.

fuf posted:

What are some good things for web developers that you guys use? CodeKit looks cool?

I usually just throw something together with Gulp, but I know people who swear by CodeKit. I've also found CodeRunner handy for brainstorming or testing code snippets.

Also, get Homebrew to manage your packages. It's good.

fuf posted:

I am going to switch from vim to sublime text.

Also consider looking into Jetbrains if you need an IDE.

fuf posted:

Is Transmit the best sftp client?

It's the best I've found so far.

fuf posted:

Is Tower good for managing git repos? Their promo video is lame as hell haha:
https://www.youtube.com/watch?v=cyyuqf1m-2E

Tower has a nice UI, but I found it so "streamlined" that it made Git harder to work with. I prefer SourceTree, and it's free.

fuf posted:

What about local web server? Is MAMP just the standard thing that everyone uses?

These days most people seem to use Vagrant, but (depending on the project) you can get away with using a simple web server (e.g. the built-in server in PHP 5.4+).

# ? Jul 15, 2015 14:48

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

fuf posted:

I just bought a macbook pro and it's pretty neat. For ages I've been struggling trying to get a stable linux setup where I can quickly switch between a desktop environment and a terminal, and it turns out I should have just bought a fuckin macbook. Nice fullscreen bash terminal and vim is even installed by default.

But I figure now might be a good time to ~~optimise my workflow~~ and try out some cool software. What are some good things for web developers that you guys use? CodeKit looks cool?

I am going to switch from vim to sublime text.

Is Transmit the best sftp client?

Is Tower good for managing git repos? Their promo video is lame as hell haha:
https://www.youtube.com/watch?v=cyyuqf1m-2E

What about local web server? Is MAMP just the standard thing that everyone uses?

I use webpack for running transforming / whatever.

Switch from vim to MacVim.

Command line for git, or SourceTree if you need a gui for something.

To serve files up with no bells or whistles from any directory, you can just do python -m SimpleHTTPServer or, install nginx if you need more. Or if you are using webpack, the dev server with sexy hot reloading.

Lumpy fucked around with this message at 15:13 on Jul 15, 2015

# ? Jul 15, 2015 15:10

fuf: Sep 12, 2004; haha

SourceTree! I knew there was a well known git thing but couldn't remember it.

I will check out those other things too. I already installed Homebrew to get tmux working

I guess I'll give vagrant another go but I've never really gotten along with virtual machines. I can see all the benefits but it's hassle having to ssh into it and having a separate command line environment.

# ? Jul 15, 2015 15:18

kedo: Nov 27, 2007

Second/thirding SourceTree, it's a fantastic program.

I personally like Transmit and have been using it for years because Cyberduck went through an unfortunate period for a month or two where there were some horrible bugs and I got tired of messing with it. Panic is great about providing support and acting on user feedback. They also automatically sync your favorites via Dropbox which is handy.

Sublime for a text editor. MAMP for a basic web server. Everything else I just do through the terminal like a caveman.

# ? Jul 15, 2015 18:08

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

Panic is just such a :3:

company. I want to use everything they make even if I have no use for it.

# ? Jul 15, 2015 18:45

revmoo: May 25, 2006; #basta

Sequel Pro is the poo poo. I would pay literally hundreds of dollars for postgres support though.

# ? Jul 15, 2015 18:46

Depressing Box: Jun 27, 2010; Half-price sideshow.

Postman is great for anything REST related, especially combined with the Interceptor plugin that routes all its request through Chrome.

revmoo posted:

Sequel Pro is the poo poo. I would pay literally hundreds of dollars for postgres support though.

This, I weep every time I have to use Navicat.

# ? Jul 15, 2015 18:58

kedo: Nov 27, 2007

Data Graham posted:

Panic is just such a company. I want to use everything they make even if I have no use for it.

Right? They're one of the few tech companies out there that I have absolutely no negative feelings about. I wish Coda had gone in a bit different of a direction so I could still be using it as my main text editor.

# ? Jul 15, 2015 19:05

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

SourceTree enrages me because I can't search by filename, and I really want to look at file history through a GUI.

# ? Jul 15, 2015 19:11

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

kedo posted:

Second/thirding SourceTree, it's a fantastic program.

I don't like SourceTree =(

CLI git + git gui + gitk is my favorite

# ? Jul 15, 2015 19:23

IronDoge: Nov 6, 2008

Woah, thanks for the heads up about Transmit. Way better than the other FTP clients I've been trying to slog through using.

# ? Jul 15, 2015 19:27

kedo: Nov 27, 2007

IronDoge posted:

Woah, thanks for the heads up about Transmit. Way better than the other FTP clients I've been trying to slog through using.

Being able to mount an S3 bucket as a disk via a menu bar shortcut and dragging/dropping stuff through Finder is totally baller. :whatup:

# ? Jul 15, 2015 19:30

Rubies: Dec 30, 2005; Live Forever
Die Every Day

The only reason I'm not using Transmit is because I couldn't find the "overwrite ONLY IF source file newer or different" like I get with Filezilla. I'm p dumb so I prob missed an obvious option for that, does it exist in Transmit? Usually I don't care but I'm often on lovely airport/hotel public wifi and don't need to sync the same giant video file over and over again before I get booted.

# ? Jul 15, 2015 20:11

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

kedo posted:

Right? They're one of the few tech companies out there that I have absolutely no negative feelings about. I wish Coda had gone in a bit different of a direction so I could still be using it as my main text editor.

Every couple years I reread this https://www.panic.com/extras/audionstory/ and just bask in the nostalgia.

# ? Jul 16, 2015 00:10

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

I'm having the most bizarre issue with an Angular ngRepeat. I have four records stored in a database that I retrieve via a REST call and then process in JavaScript. The resulting object looks like this:

JavaScript code:

vm.templates = {
    9: { id: 9, title: 'AM' },
    10: { id: 10, title: 'PM' },
    11: { id: 11, title: 'Any' },
    12: { id: 12, title: 'Off' }
}

I then display all of these using a basic ngRepeat:

code:

<button ng-repeat="template in ctrl.templates">

I want these items to display in this exact order, so I only need a basic ng-repeat. The problem I'm having is that these buttons are completely out of order only when hosted on Heroku.

When I run the code locally, this is the (correct) order that's displayed:

But when I upload and run the code on Heroku the order is completely bonkers:

I tried explicitly sorting by id but that didn't help:

code:

<button ng-repeat="template in ctrl.templates | orderBy:'id'"

Just to be sure I dove into the (PostgreSQL) database and looked at the ordering of the records in the database. While not visually displayed in the correct order, the IDs are in the proper sequential order:

So what the hell is going on? I just started running into this problem and some console logging confirms that the order of the object is exactly the same regardless of whether it's output locally or when hosted online. It's just the ng-repeat that fucks up the order.

# ? Jul 18, 2015 02:12

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

Karthe posted:

I'm having the most bizarre issue with an Angular ngRepeat. I have four records stored in a database that I retrieve via a REST call and then process in JavaScript. The resulting object looks like this:
JavaScript code:
vm.templates = {
    9: { id: 9, title: 'AM' },
    10: { id: 10, title: 'PM' },
    11: { id: 11, title: 'Any' },
    12: { id: 12, title: 'Off' }
}
...
I want these items to display in this exact order

Object keys don't have an order.

Arrays have an order. Maybe you can pull out the keys of the object into an array, sort them, iterate over them, and use each one to do a value lookup.

# ? Jul 18, 2015 03:26

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

bartkusa posted:

Object keys don't have an order.

Arrays have an order. Maybe you can pull out the keys of the object into an array, sort them, iterate over them, and use each one to do a value lookup.

Okay, so this is related to the fact that objects don't maintain an order. Then it's just a fluke that things are displayed in proper order on my local machine?

# ? Jul 18, 2015 03:43

painted bird: Oct 18, 2013; by Lowtax

So, I'm looking into teaching myself web design/development.

I 'm good with CSS and HTML and pretty okay with a number of frameworks (Bootstrap, Foundation and Bourbon/Neat/Bitters) and I can wrangle WordPress themes and kind of deal with Mezzanine. I'm ... shaky on the actual "typography and design" bit, but getting better. I plan on teaching myself JavaScript next.

But, like. What should I be learning next (after JavaScript or concurrent with it)? What should I focus on?

How the gently caress do I start freelancing?

# ? Jul 20, 2015 16:20

ufarn: May 30, 2009

Data Graham posted:

Every couple years I reread this https://www.panic.com/extras/audionstory/ and just bask in the nostalgia.

Well, or cry over the fact that we could have had an iTunes designed by Panic.

# ? Jul 20, 2015 17:21

fuf: Sep 12, 2004; haha

painted bird posted:

So, I'm looking into teaching myself web design/development.

I 'm good with CSS and HTML and pretty okay with a number of frameworks (Bootstrap, Foundation and Bourbon/Neat/Bitters) and I can wrangle WordPress themes and kind of deal with Mezzanine. I'm ... shaky on the actual "typography and design" bit, but getting better. I plan on teaching myself JavaScript next.

But, like. What should I be learning next (after JavaScript or concurrent with it)? What should I focus on?

How the gently caress do I start freelancing?

Depends what kind of freelancer you want to be I guess. I bumbled into freelancing just under a year ago thinking I was going to be building awesome web apps from scratch using cool frameworks, but turns out I mostly just make fuckin wordpress sites.

I'm not technically competent enough to actually get work as a freelance coder on big projects, so instead I present myself as a one-stop web developer / consultant for businesses, especially PR and design agencies. I've been pretty successful because of two things:
a) writing clear emails
b) having a confident phone voice
These have helped me way more than any technical knowledge. I know just enough technical stuff that I can bullshit feasibly if put on the spot, but I still have to google pretty much everything (or ask here haha).

People are so afraid of the stereotypical antisocial tech guy that if you have a clear voice, are capable of explaining things in simple terms, and can make eye contact, then people just start throwing work at you. Sure most of that work is making design-heavy brochure sites in wordpress, but if you do their hosting and email campaigns etc. as well then there's a nice bit of variety and you can get some experience in different areas.

I wrote a long message to someone else over PM about some stuff I did early on to get going but I'm a bit embarrassed to post it here in front of much more successful developers / business people, but PM me if you want :shobon:

# ? Jul 20, 2015 18:16

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I've been using Foundation (4 and 5) for quite some time, but now I want to build a main stylesheet uses SCSS.
How do I do something as simple as change the font-family for a label element? It's not in the list of variables. Also am I supposed to be changing _settings.css, make a new _custom.css or put it at the bottom of _app.scss?

I followed the instructions on installing from CLI (because while we spend all day coding GUIs, heaven forbid we use one otherwise more people will be in our sekret club).

# ? Jul 20, 2015 18:57

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

painted bird posted:

So, I'm looking into teaching myself web design/development.

I 'm good with CSS and HTML and pretty okay with a number of frameworks (Bootstrap, Foundation and Bourbon/Neat/Bitters) and I can wrangle WordPress themes and kind of deal with Mezzanine. I'm ... shaky on the actual "typography and design" bit, but getting better. I plan on teaching myself JavaScript next.

But, like. What should I be learning next (after JavaScript or concurrent with it)? What should I focus on?

How the gently caress do I start freelancing?

Just start building websites. It sounds like you have the foundation, now you just need to start making great sites to put in your portfolio and impress the hell out of prospective clients. You'll know what to learn next when you find yourself needing to solve a particular problem. Until then, just get going.

# ? Jul 20, 2015 19:04

Chris!: Dec 2, 2004; E

The Merkinman posted:

I've been using Foundation (4 and 5) for quite some time, but now I want to build a main stylesheet uses SCSS.
How do I do something as simple as change the font-family for a label element? It's not in the list of variables. Also am I supposed to be changing _settings.css, make a new _custom.css or put it at the bottom of _app.scss?

I followed the instructions on installing from CLI (because while we spend all day coding GUIs, heaven forbid we use one otherwise more people will be in our sekret club).

Make a new partial, like maybe _typography.scss, then import that at the bottom of app.scss. Put all your typography rules in there. App.scss should also allow you to uncomment out any Foundation elements you don't need (I think?) which should result in a much smaller css output.

Edit: I also had tons of trouble when I first started using SASS (and got a fair bit of help from this thread actually!) but now I couldn't live without it, and it turns out it's really easy after the first time.

# ? Jul 20, 2015 19:20

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 20:16

EmmyOk: Aug 11, 2013

As a small side-project during my postgrad I've been asked to add a login and registration system to a university website. Not the main university website, just a small one with python lessons for secondary school students/teachers my supervisor designed. I have the login and registration done but one small change she wants is that users can only see the first lesson and completing it will unlock the next lesson. At the minute I have this functionality implemented. A user is redirected to a message saying they have not unlocked a lesson yet and then back to the lesson select page. When they have completed a lesson it unlocks the next one. However my supervisor wants me to change it so that the lessons list only displays currently unlocked lessons not all of them. How should I go about doing this? Checking if they have unlocked a lesson is simple I am just not sure if hiding list elements can be done in PHP.

As I wasn't sure if this type of thing will involve JavaScript, HTML, or PHP I posted it here instead of the PHP questions thread.

# ? Jul 20, 2015 22:01

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

«‹›361 »