The Web Design & Development Megathread

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

«‹›6 »

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Yo. I'm a junior in college and landed a pretty laid back internship making a simple website for some financial planning firm. Right now, I'm in the sketching/mock up phase of the design and I have a quick question:

So, I've come to understood when you make a header logo for your site, text should never be an image and always text because of screen readers of whatever. My client gave me an image of their logo including both text and an image in one jpeg. Now I know I should keep the logo and find the correct font, but Google Fonts doesn't have it and I'm not willing to pay for a font service. What do I do? It's pretty bad to download self-host a font and make your users download it, right? Should I just keep the text in the image or what?

# ¿ Mar 5, 2015 02:02

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 18:15

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Data Graham posted:

Yeah, you don't want to try to recreate a logo from fonts and vector graphics or whatever. A properly designed logo will have specially placed letters and shapes and you won't be able to do it perfectly even if you do find the exact font they used. If you're building a pro site for a company, an incorrectly reproduced logo is as bad as no logo.

It's good to design for accessibility, but yeah, all you need to do is set alt="Company Inc." and you're fine.

The logo is pretty shittily designed as well because it's very long, but maybe I can place the words under each other or something.

Thanks, guys!

# ¿ Mar 5, 2015 02:46

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Anyone know a great site for learning about media queries and responsive design, overall?

# ¿ Mar 11, 2015 02:54

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm just starting to learn how to use flexboxes and media queries and such, but I'm having problems with things overlapping in Chrome when I use a flexbox. Here's a screenshot:

and here's my code (it looks fine on codepen)

http://codepen.io/mmckenna/pen/JoewOP

I need some help. Is there some way where I can use a flexbox in a navbar on a site, while having the body not be overlapped successfully?

# ¿ Mar 18, 2015 03:48

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

So you're saying if it was a full page, basically everything (header, navbar, body, and footer) should just get put in one container with a flexbox?

e; Actually, it's not working. Still getting overlap in browsers. I dunno why Codepen is making it look good.

e2; To be precise, it's overlapping when I minimize the browser. At full size, it's fine.

teen phone cutie fucked around with this message at 06:24 on Mar 18, 2015

# ¿ Mar 18, 2015 06:13

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

caiman posted:

I notice you have float: left in there on the li elements. I'm not positive, but that may be your problem. If you're using flexbox, I would avoid floats. And if it was me, I'd set display: flex on .nav_list instead of .navbar. That way the li elements are the flex items rather than the ul.

Nah. You need float:left or the entire list will stack instead of being horizontal. And the other suggestion didn't work either.

I'm pulling my hair out! What the actual gently caress

# ¿ Mar 18, 2015 17:50

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

You can control the direction of the way your elements lay out with flexbox. So no, you don't need float: left, and it is, in fact, the source of your problems. You can find tips like this on a lot of various internet websites. Here's one such: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Okay. I think my problem is that they're list items instead of divs. Is it common practice to not have use divs with flexboxes?

e; Yes. I am having success. Thanks for the help. Sorry I suck at flexboxes. Really looking forward to learning how to use these things effectively.

teen phone cutie fucked around with this message at 18:48 on Mar 18, 2015

# ¿ Mar 18, 2015 18:39

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

caiman posted:

Not sure if you've seen this or not, but Chris Coyier's guide is immensely helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This thing's pretty cool. I've been heavily relying on Chris Coyier since my first HTML/CSS class. My professor had a man-crush on him.

I also found this neat cheat sheet that helped me out a lot the past two days:

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

# ¿ Mar 19, 2015 03:31

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm having a problem with a media queries getting ignored because my two divs are in a flexbox. I understand that flexboxes defeat the purpose of using flexbox, but the logo of my site will only resize itself in Chrome and not Firefox and IE when the window shrinks, and I've been trying to add a media query, but both browsers are ignoring them.

Is there a way to override the flexbox and have it adopt a media query.

code:

<div class = "header">
    <div class = "big_item"><img src = "logo.jpg" id = "logo"></div>
    <div class = "big_item" id = "spacer"></div>
    <div class = "big_item" id = "motto"><p>Company motto goes here</p></div>
</div>

code:

.header {
	width:85%;
	margin:0 auto;
	list-style-type: none;
	display: -webkit-flex;
  	display: flex;
  	-webkit-align-items: left;
   	align-items: left;
  	-webkit-justify-content: left;
  	justify-content: left;
  	/* You can set flex-wrap and flex-direction individually */
  	/* Or do it all in one line with flex flow */
  	-webkit-flex-flow: row wrap;
  	flex-flow: row wrap;
  	/* tweak the where items line up on the row */
 	/* valid values are: flex-start, flex-end, space-between, space-around, stretch */
}

@media screen and (max-width: 1000px) {
  #logo{
	min-width:50%;
  }
}

# ¿ Mar 23, 2015 00:27

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Hey. I've been having this problem that's proving really tricky to figure out.

I'm using flex box on two paragraphs that start off side-by-side, but become linear when the window resizes. The only problem is, there's too much space on the left and right sides when the paragraphs become linear because of an image (that does not flex) above it.

Here's a pen: http://codepen.io/mmckenna/pen/QweOrQ

Basically, I want each paragraph take up roughly 85% percent of the body div when they become linear.

teen phone cutie fucked around with this message at 05:33 on Apr 15, 2015

# ¿ Apr 15, 2015 05:27

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Works like a charm. Thanks!

# ¿ Apr 15, 2015 17:09

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Anyone ever try and succeed getting a twitter widget to flex-grow?

# ¿ Jun 24, 2015 05:52

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Karthe posted:

The best part is when a site won't load without 'www.' in front of the address. Oh Japan, when will you learn?

Whoever registered the domain for my school's computer science department website made this mistake, which is pretty much the saddest thing ever.

# ¿ Aug 3, 2015 20:46

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Anyone know any solid tutorials for people not that great with PHP, but needs to make a contact form? I know I could use a template, but I'd rather learn myself.

# ¿ Aug 11, 2015 00:59

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm hard-coding a personal site because I'm trying to get comfortable with back-end stuff and possibly learn more front-end stuff. I just want to learn some practical stuff.

# ¿ Aug 11, 2015 18:08

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Word. I'll check out Mandrill

# ¿ Aug 12, 2015 02:52

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm in the process of making a dictionary application for my senior project this semester, and I've hit a wall and haven't been able to solve it for a week an a half. My inital question is this: Is there a way to run a function in the middle of an SQL query? I'll list what I've done so far, but I'm assuming there's an easier way.

I have three tables in a MySQL database: words, definitons, and parts of speech. In the words table, I have a column for the first letter of the word, so I can properly sort them with values from 1-26 for the letters.

I need a way to look at the first letter of the word as it is submitted, and store it with the correct letters "lol" should have "12" and "Asdf" should have "1."

For this, I first created an array in a functions.php file which looks like this

Secondly, I created a function in a database.php file to get the first letter of the word:

And then used array_search to compare the first letter to the array. Add _Word is run when the submit button in pressed on a form I've made. The SQL queries run smooth because I have functions in a database.php file that makes it easier to write. Just can't figure out how to store first_letter. $key should return the correct number, if I'm doing this right:

I really just need help on where to use the function I've created and what the proper syntax is.

# ¿ Nov 16, 2015 06:16

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

v1nce posted:

Personally, I'd solve selecting by first letter using a basic text LIKE:
code:
SELECT * FROM words WHERE word LIKE "A%" ORDER BY word
That eradicates the need to store that index value, right?
You'll need to use UTF8_GENERAL_CI for the case-insensitive LIKE to work. See this SO article for more info.

Tried this and it worked like a charm. Thank you.

v1nce posted:

Your code also has some other issues:
- Your get_firstletter can only handle lowercase first letters, because that's all you've got in the array, so you'll need strtolower() your letter before you array_search for it.
- Your array is 1-26 a-z, and an ascii table is 92-122 a-z. You could make the same index using chr() and a for loop. Or your get_firstletter() could become get_firstletter_index() and just use ord() and subtracting 91.
- You're returning before your echo, so you won't see that message displayed, ever.
- What I would point out, is your code isn't very readable, and most of that is due to the fact you're using extract().
- Also comment loving everything. I know a lot of smart coders say "i can read the code i don't need comments" however comments provide context about what it should be doing not what it is doing. Any programmer can tell you what it is doing, but only the author can tell me what it should be doing.

Haha. The thing about this code is that I don't understand half of it. A lot of functions that I'm using are recycled from a professor's example project that he said I would benefit from using and modifying.

I'm really bad at PHP. Like, this is my senior project and I'm realizing I don't know this poo poo nearly as much as I'd like to. It's seriously giving me anxiety. Most of this project is me trying to teach myself what this code means and changing variables to fit my needs.

As for commenting, yeah. I should get in the habit of doing that.

teen phone cutie fucked around with this message at 03:47 on Nov 17, 2015

# ¿ Nov 17, 2015 02:57

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

What's the easiest way to create a collapsible, responsive navbar?

At this point, mine is full responsive, but I'd like to know how to turn it into a collapsible dropdown for mobile.

teen phone cutie fucked around with this message at 10:03 on Jan 10, 2016

# ¿ Jan 10, 2016 09:27

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Yeah. Gotta bunch of list elements that flex. I figured media queries were the way to go but didn't know if there was some simple way to do it with flexbox

# ¿ Jan 11, 2016 20:08

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

IronDoge posted:

So it's responsive but not collapsed? Do you have it in a one big stack or something? You can set some media queries so that your menu element is hidden by default on smaller screen sizes. Have a menu button somewhere on your top nav (that only appears on mobile screens). Attach an event to that button that toggles the menu state.

Yeah. Media Queries did the trick. I found some neat tutorial and I got a pretty nice looking navbar with a collapsible button.

I'm just putting the finishing touches on my personal site, and my last pressing issue seems to be the mobile look of the site. I thought everything would look a lot bigger on mobile, as I've been using flexbox and percentages for all my divs, but everything looks really small. Not unreadable, but the buttons and links are not great for people with fat fingers.

I want my site to have a bigger look on mobile, and I'm really not sure where to start, other than making the header and body divs like 100% of the screen.

Everything on my site is responsive, and it looks great in a condensed window on my desktop, but it's not giving me the look I want on mobile devices. I don't really understand why. I know there's more pixels on the phone vs a small window, but still.

on a smaller browser window:

on iPhone 5s

# ¿ Jan 14, 2016 09:22

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

The Merkinman posted:

Are you missing <meta name="viewport" content="width=device-width"/>?

Nope. Need to do some research on that. Thanks!

e; wow. That was a super easy fix. omg.

Lumpy posted:

Hahaha... that's exactly what I thought. "Wow, someone actually uses that thing?!"

idk. I like using it on my desktop because it doesn't use much ram, relatively, and I can sync bookmarks easily.

teen phone cutie fucked around with this message at 23:35 on Jan 14, 2016

# ¿ Jan 14, 2016 23:30

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Is it possible to install wordpress and create a theme locally? I know literally nothing about Wordpress.org.

What I'm looking to do is take my existing site and convert it into a WP theme and basically just add a blog. I don't have hosting at all, but was hoping I could do all that for free.

# ¿ Jan 22, 2016 03:43

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm creating my end of the semester project which is going to be a launchpad sequencer, so i can create melodies/beats and loop them. I also want a visual effect to happen with each button press.

I just wanted some beginning advice. Do you guys think this would be simple with html and css or would javascript make my life a lot easier?

Please hit me with some cool links if you guys are into electronic music bc right now I'm looking up how exactly Launchpads work

# ¿ Apr 27, 2016 02:25

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

kloa posted:

Something like this?

http://sampulator.com

Yeah pretty much exactly like this. I'm just trying to figure out the best way to approach it. I'm probably not going to have any saving feature, so I'm not gonna need a database. Seems like Javascript is necessary.

Munkeymon posted:

This might also be interesting to you http://www.fradkin.com/snap-music.html

This is more advanced than what I'm thinking but I'll check out that code.

# ¿ Apr 27, 2016 16:29

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I applied to this local web design firm, sent them links to my Github and Codepen accounts as a portfolio, and this is the response I got. I was genuinely taken back by both how a CEO could be so loving unprofessional and that he seemed like he genuinely didn't know what Github was

# ¿ May 1, 2016 01:17

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Skandranon posted:

Sounds like you dodged a bullet then, you should be grateful that the CEO is so transparently and rear end in a top hat.

This was my response

# ¿ May 1, 2016 01:21

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

kedo posted:

Absolutely.

I realized a few minutes after posting my reply that it probably wasn't very helpful, so here's some context as to what's going through someone's mind at a design firm when they're trying to hire someone.

I'm trying to hire someone. The most important things I care about are:

1) Is the person able to write a coherent email.
2) Can the person deliver real world projects that look good and function well.
3) Is the person someone my team can work with.

These three items determine whether or not I'm going to take the time to follow up with you or throw your application out right off the bat. Let's assume you nailed #1 by writing a great email. Great. But then, some code on Github and Codepen tell me absolutely nothing about #2 or #3. Was the code you presented ever used in a real project, or was it just some proof of concept or some fun CSS animations you worked up while you were bored one evening? I have no way of knowing. What's more, you're assuming the people reading your application can read code which, spoiler, is something most folks aren't capable of doing ��even the folks reading your application. To them you may as well have said, "here's a picture of me coding things, see how good I look coding things?" and that's absolutely worthless.

Remember that the firms you're emailing are probably comparing you to a hundred other people who have actually provided a portfolio. If I have 99 other portfolios I can look through and one dude who said, "lawl, I can't be bothered to follow the instructions in a job posting, here's some of my code you idiots," I have to do a lot more work to figure out if you're any good or not. Why would I do that? I have 99 other portfolios I can look at. Don't make the people hiring you do more work, make it easy for them to consume your body of work. Make it painfully obvious that you're perfect for the job.

Also remember design firms sell design, not code. Sure code makes designs work, but that's not what clients care about and clients pay the bills. If you can't show how you're able to successfully execute designs I can sell, you're useless to me.

These may be painful truths, but them's the breaks.

This is helpful thanks! I'm about to be fresh out of college and didn't really know what employers want and what constitutes a portfolio.

How do you make a portfolio when none of your stuff is only hosted locally?

Thing is, if the guy explained what they were looking for and didn't have so much sass in his email, i would've said he was making a valid point

# ¿ May 1, 2016 05:27

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Does anyone use Interface.js? I can't get it to run. I'm even trying the test code and none of the widgets are working. I don't know if there's a problem with dependencies because I'm including the interface script in my head, but nothing's happening.

Need some help.

https://github.com/charlieroberts/interface.js

# ¿ May 2, 2016 05:43

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

ynohtna posted:

I used it successfully for a couple of things last year. Have you any code or a Gist that I can scan for clues?

The demos work for you, right? http://www.charlie-roberts.com/interface/

Nope demos won't even work for me. I just straight copied and pasted the code from the demos and I'm getting a blank screen.

code:

<html>
    <head>
        <script type="text/javascript" src="Tone.js"></script>
        <script src="nexusUI.js"></script>
        <script src="interface.js"></script>
    </head>
    <body>
        <script>

            var a = new Interface.Panel({ 
              container:document.querySelector("#buttonPanel") 
            });

            var b = new Interface.Button({ 
              bounds:[.05,.05,.3,.9],  
              label:'toggle'  
            });
            var c = new Interface.Button({ 
              bounds:[.35,.05,.3,.9],
              label:'momentary',
              mode:'momentary'  
            });
            var d = new Interface.Button({ 
              bounds:[.65,.05,.3,.9],
              label:'contact',
               mode:'contact'  
            });

            a.background = 'black';   
            a.add(b,c,d);

        </script>
    </body>
  
</html>

# ¿ May 2, 2016 18:44

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

What errors are in the console?

Getting:

interface.js:282 Uncaught TypeError: Cannot read property 'left' of undefined

# ¿ May 2, 2016 18:59

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Okay cool it's working. Didn't realize you had to use html and style it to get it to show up.

I was just working with Nexus UI which required no styling, but I can't figure it out.

I'm in way over my head using javascript libraries for this final project. Especially ones with limited tutorials

I'm gonna see how successful I am using tone.js with interface

# ¿ May 2, 2016 22:59

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm making a step sequencer. My professor pointed me at tone.js but I looked at interface and thought it would make interaction easy

The idea is to have a matrix of toggle buttons. The y axis is the pitch of the squares while the x axis is the rhythm. When the play button is toggled, it will run through the sequence the user creates

Nexus ui has a preset customizable matrix I need and tone.js has the musical part. I guess I don't need interface but I thought it would help.

Right now I need to give each button on the matrix it's own pitch and then loop through each column on the matrix in whatever beats per minute. Then send that sound created to a toggle button

# ¿ May 3, 2016 00:14

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Welp. Just graduated and looking for a development job and realizing I have nowhere near as many skills as I should.

# ¿ Jun 14, 2016 04:56

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I just got a second interview but the woman asked me to write something in Symfony, a framework I've never used and barely even heard of.

I know it's well documented and has great learning tools, but I'm kinda clueless on what I should even write

# ¿ Jul 25, 2016 20:39

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Just curious what you guys like better: Bootstrap layout (fixed or fluid) or just using flexbox?

I've been trying to dive deeper into Bootstrap design and it's a pain in my loving rear end. Flexbox is just easy to me.

teen phone cutie fucked around with this message at 03:17 on Dec 20, 2016

# ¿ Dec 20, 2016 03:09

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm having a Javascript issue that is driving me crazy. I'm trying to hook up a form to a constructor function. It should grab the values of the input fields and then set them equal to the properties in the new Person object.

The problem is that on submit, it's setting the properties equal to empty strings, and I can't figure out why, even though I know the live values are being update on change.

Script

code:

//will hold an array of people objects
var list = [];

//constructor that builds new people to add to address book
function Person(first, last, address, number, email) { //new person constructor
    this.firstName = first;
    this.lastName = last;
    this.address = address;
    this.number = number;
    this.email = email;
};

//When the submit button is clicked, create a new person and add the values of the form fields
//  to the properties of the object
$("#submitbtn").click(function () {
    var person = new Person($("#addform > input[name = 'fname']").val(), 
			$("#addform > input[name = 'lname']").val(),
			$("#addform > input[name = 'email']").val(), 
			$("#addform > input[name = 'address']").val(), 
			$("#addform > input[name = 'phone']").val());
    list.push(person);
    console.log(list);
});

HTML

code:

<form id="addform">
      <input type="text" name="fname" placeholder="First name">
      <input type="text" name="lname" placeholder="Last name">
      <input type="email" name="email" placeholder="email">
      <input type="input" name="address" placeholder="address">
      <input type="tel" name="phone" placeholder="phone number">
      <button type="button" id="submitbtn">Submit</button>
      <button type="button" id="closebtn">Close</button>
    </form>

teen phone cutie fucked around with this message at 20:14 on Feb 4, 2017

# ¿ Feb 4, 2017 18:15

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Yeah. I just realized that it does work, but since I'm using React, I'm running into issues with the script running correctly.

When I include the script tag into index.html, it gives me an error "Uncaught SyntaxError: Unexpected token <" even though there is no stray brackets.

I guess my new question is: how do you make a custom javascript file and use it in the index file? It doesn't seem very straightforward. I haven't even written any React code yet.

# ¿ Feb 4, 2017 21:13

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I figured it out. I was originally importing the script into the component, as it should be, but I had onClick functions that were supposed to be hiding/showing a form, and that part should have been built into the component, rather than outside of it.

I'm dumb. The thing has been working all day, and I didn't even realize it.

# ¿ Feb 5, 2017 01:44

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 18:15

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Warbird posted:

What would you recommend as an alternative fairly idiot proof alternative?

Drupal seems to be/is becoming the industry standard, correct?

# ¿ Feb 27, 2017 19:19

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

«‹›6 »