Support NeoGAF

[Copons]

So, what I've been doing in the last week or so, the reason why I've been overly annoying with questions and whatnot, is a shameless JS rip-off of the excellent boardgame Ticket to Ride.

It still lacks a lot of the mechanics of the game and more importantly, I just started thinking about the multiplayer (never used Socket.io, so I'm sure I'll soon come back here crying like a baby ), but eh, I feel what I've written until now is good enough to share.

Here's the repo: https://github.com/Copons/Ticket-to-Rome
And here's the app on Heroku: https://ticket-to-rome.herokuapp.com/ (deployed from the WIP server branch, with a different webpack config, as I'm totally new at Node backend development, so I don't know what I'm doing at all)


If you don't know how Ticket to Ride works, well, it's not like you really need to know it, considering my app doesn't offer much fun yet.
Just draw cards from the deck, click on the routes to check if you can claim them with your cards, and claim them to build your very own red railroad.

 

[Syphon Filter]

What do you guys usually do if you are going to design/develop a website for someone? Do you use any framework such as bootstrap or do you prefer doing everything from scratch?

 

[Kalnos]

What do you guys usually do if you are going to design/develop a website for someone? Do you use any framework such as bootstrap or do you prefer doing everything from scratch?

Depends on how creative you are, how good you're at CSS, and how much you want to recreate the wheel. I personally use CSS frameworks to save time and you can still do a lot of customization with frameworks.

 

[Somnid]

What do you guys usually do if you are going to design/develop a website for someone? Do you use any framework such as bootstrap or do you prefer doing everything from scratch?

Depends on the client. Most of ours aren't no-namers but it always varies. Some come to us wanting to use a particular technology, some will take recommendations. Usually if it's small I try to keep it pretty light but for projects that take a larger team of front-end devs we'll use a framework. This is mostly so that it's easier to hand-off to other teams, ultimately part of what you want to deliver is a maintainable product that others can work on easily.

 

[TheSeks]

Is there any site that gives the hex, RGB, and RGBA values for certain colors? I have a color I want in mind, but I need to convert it to RGB(A) values to make the entire CSS code consistent.

Quick Google answers my problem: http://www.hexcolortool.com/

 

[Syphon Filter]

Anyone know about ios and android icons? I have been looking at the design guidelines and icons sizes. They mention app icon sizes for iPhone 6s Plus and iPhone 6 Plus (@3x) are 180px x 180px. I go and draw a square on photoshop and see that it's pretty big so how will I go about designing icons sizes for a mockup? That looks big for a mobile so I guess they mean the resolution for the actual phone but what about for designing in something like photoshop?

 

[Zakalwe]

I've designed a new site. I think this one's better than the last, much simpler, more cohrent, etc...

Link

What do you think?

Note: the Overlay designs aren't finished, I have two different overlay effects to upload, the second and third are currently place holders.

 

[Kalnos]

Admittedly I'm a huge sucker for flat designs but I actually quite like it Zakalwe. Gets me the content I want to see with no effort required on my part. I'm certainly no expert on this point but the only thing I notice about these kinds of designs is that maybe it can be confusing to instantly snap to a different section of the same page with no animation/indication... so maybe actually a quick scrolling animation when you click something? I'm not sure.

Also your arrow at the end reloads the page instead of going to #home. Not sure if that's intentional or not, just a note.

You should definitely look into throwing a GitHub icon on there and to start hosting some of your code! :>

 

[Zakalwe]

Admittedly I'm a huge sucker for flat designs but I actually quite like it Zakalwe. Gets me the content I want to see with no effort required on my part. I'm certainly no expert on this point but the only thing I notice about these kinds of designs is that maybe it can be confusing to instantly snap to a different section of the same page with no animation/indication... so maybe actually a quick scrolling animation when you click something? I'm not sure.

Also your arrow at the end reloads the page into of going to #home. Not sure if that's intentional or not, just a note.

You should definitely look into throwing a GitHub icon on there and to start hosting some of your code! :>

I've added a smooth scroll with some JS I found on GitHub.

It wasn't supposed to reload, no, good catch.

I'm still working on making my code efficient, when I'm happy with it I'll definitely do that.

Thanks man. :3

EDIT: First live draft is up. I still have a lot of ideas, but I needed to replace that thing I puked all over the internet...

 

[grmlin]

Anyone know about ios and android icons? I have been looking at the design guidelines and icons sizes. They mention app icon sizes for iPhone 6s Plus and iPhone 6 Plus (@3x) are 180px x 180px. I go and draw a square on photoshop and see that it's pretty big so how will I go about designing icons sizes for a mockup? That looks big for a mobile so I guess they mean the resolution for the actual phone but what about for designing in something like photoshop?

Do you mean all the icons you need for a website? Favicons and whatnot?

I don't do that myself, I use a generator like http://realfavicongenerator.net

 

[Syphon Filter]

Do you mean all the icons you need for a website? Favicons and whatnot?

I don't do that myself, I use a generator like http://realfavicongenerator.net

Not favicons but other icons specifically for mobile. This is the page I am looking at:

https://developer.apple.com/library....html#//apple_ref/doc/uid/TP40006556-CH27-SW1


For example in the tab bar icon section they mention:

About 75 x 75 (maximum: 144 x 96) for iPhone 6s Plus and iPhone 6 Plus (@3x)


If I draw a something that size in photoshop/fireworks then it looks pretty big for a mockup so I was wondering what size would they be then for a mockup.

 

[Haly]

IIRC image assets for iDevices, since most of them are Retina these days, are designed at 2x resolution (maybe it's 3x now) of what you expect to see. The devices that don't have retina will resize the icons to fit.

So I would make the designs at a 3rd of their recommended size for mockups and viewing on a typical computer screen.

https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/

 

[grmlin]

So you mean native app icons. No idea about that, sorry

 

[theecakee]

What should I put in the footer of some web app I am making to pad my resume? Usually I never put anything, but I feel like it would be professional looking to.

Just like...

Contact © 2016 My Web App. All rights reserved. Link to my portfolio.

 

[theecakee]

I've designed a new site. I think this one's better than the last, much simpler, more cohrent, etc...

Here's the work in progress.

For reference, here's my first attempt.

What do you think?

Note: the Overlay designs aren't finished, I have two different overlay effects to upload, the second and third are currently place holders.

Looks really good to me nice job.

Only bug thing I noticed though the bottom up the page top arrow button I had to click it several times for it to actually go back to the top.

 

[Kalnos]

What should I put in the footer of some web app I am making to pad my resume? Usually I never put anything, but I feel like it would be professional looking to.

Just like...

Contact © 2016 My Web App. All rights reserved. Link to my portfolio.

Might as well put links/icons to LinkedIn, GitHub, any relevant social media, etc.

 

[Zakalwe]

Looks really good to me nice job.

Only bug thing I noticed though the bottom up the page top arrow button I had to click it several times for it to actually go back to the top.

Thanks theecakee.

It's been updated since then:

I've fixed that now. It was an issue with the JS for the smooth scroll and the X-axis scroll bar.

If the screen was scrolled all the way to the bottom, the up link would on only shift up by a single pixel. As soon as it moved a height equivalent to the X-axis scroll bar, it shot free.

I don't know enough about JS currently to debug it, but hiding the scroll bar worked. As it's redundant on my site it'll do as a band-aid until I know more.

 

[Ikuu]

Your site 'breaks' if the page width is between 1201 and 1370.

 

[Zakalwe]

Your site 'breaks' if the page width is between 1201 and 1370.

So it does. I got sloppy with my media queries.

Thanks for the catch.

 

[The Albatross]

Thanks theecakee.

It's been updated since then:

I've fixed that now. It was an issue with the JS for the smooth scroll and the X-axis scroll bar.

If the screen was scrolled all the way to the bottom, the up link would on only shift up by a single pixel. As soon as it moved a height equivalent to the X-axis scroll bar, it shot free.

I don't know enough about JS currently to debug it, but hiding the scroll bar worked. As it's redundant on my site it'll do as a band-aid until I know more.

Really think you should change the <title> to a word instead of the triangle, especially because the triangle makes less sense with the design direction you've gone in since first starting work on it.

 

[Syphon Filter]

IIRC image assets for iDevices, since most of them are Retina these days, are designed at 2x resolution (maybe it's 3x now) of what you expect to see. The devices that don't have retina will resize the icons to fit.

So I would make the designs at a 3rd of their recommended size for mockups and viewing on a typical computer screen.

https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/

Thanks, will the ios design templates that are around be a good indicator to go by?

So you mean native app icons. No idea about that, sorry

It's ok, thanks though.

 

[Haly]

Thanks, will the ios design templates that are around be a good indicator to go by?

I honestly have no idea. I only answered because I've read some articles on iOS apps, and I've picked up on things via osmosis. I'm not someone who can give you proper guidance.

 

[DrAg0nBoY]

Hey,

I don't know if this is the right thread or if someone could help me. Is here someone who knows how to work with Hikashop and how to redesign some stuff? I would need to switch up some blocks on the product page and on their forums they told me, that I should just need to cut and paste stuff in the php file and it should work, but everytime I do something like that I then get a blank product page.

So if someone knows something I would be really happy for the help. If not, ignore this post .

 

[WanderingWind]

Probably a dumb question, but can you have multiple "or" statements in the same parenthesis? Or is it strictly for comparison between two statements?

Does this work? (agree === "yes" || agree === "ya" || agree = "yup")

If so (or if not) there has to be a better way to account for all potential variations of "yes" right?

 

[Ikuu]

If you're having someone agree to something then just use a checkbox or radio, but yes that is how you would handle multiple Or's.

 

[WanderingWind]

If you're having someone agree to something then just use a checkbox or radio, but yes that is how you would handle multiple Or's.

Cool, thanks.

 

[runningjoke]

Probably a dumb question, but can you have multiple "or" statements in the same parenthesis? Or is it strictly for comparison between two statements?

Does this work? (agree === "yes" || agree === "ya" || agree = "yup")

If so (or if not) there has to be a better way to account for all potential variations of "yes" right?

I'd probably write that as

['yes', 'ya', 'yup'].indexOf(agree) !== -1

or

agree.indexOf('y') === 0

 

[WanderingWind]

I'm still learning, but it feels like it's starting to slowly come together. I've got to really start memorizing methods though. There are...many of them. lol

 

[grmlin]

I'm still learning, but it feels like it's starting to slowly come together. I've got to really start memorizing methods though. There are...many of them. lol

No one memorizes all these methods

My physics teacher always said: It's not important to know everything, it's important to know where to look it up.


PS: http://devdocs.io is your best friend

 

[WanderingWind]

No one memorizes all these methods

My physics teacher always said: It's not important to know everything, it's important to know where to look it up.

True. I would like to know the ones that allow me to do the things I'd like to get done, at least. Simple shit like clicking a thing to make another thing do a thing.

All technical terms, obviously. lol

 

[Zakalwe]

Could someone with a mac please test if my animations are working on the latest Safari?

Really think you should change the <title> to a word instead of the triangle, especially because the triangle makes less sense with the design direction you've gone in since first starting work on it.

How important is the title? If I decide to keep the triangle, is it going to have a significant impact?

If so, I'll definitely change it.

 

[diaspora]

Well... Bash in Windows certainly changes things.

 

[grmlin]

Could someone with a mac please test if my animations are working on the latest Safari?



How important is the title? If I decide to keep the triangle, is it going to have a significant impact?

If so, I'll definitely change it.

Things animate here in 9.1


I would put the triangle icon into a favicon, that's what they are used for. I'm pretty sure the title tag will be processed by search engines and the like.

 

[WanderingWind]

PS: http://devdocs.io is your best friend

That's cool, thanks. Any other resources that I might not know about?

 

[Zakalwe]

Things animate here in 9.1


I would put the triangle icon into a favicon, that's what they are used for. I'm pretty sure the title tag will be processed by search engines and the like.

I completely forgot about favicons.

Thanks for both.

 

[WanderingWind]

Eloquent JavaScript speaks the way my brain understands. A most excellent and cheap resource for any other newbies. Highly recommend it.

 

[Starphoenix]

Ugh. Been working at my job for a few months now and I am constantly feeling like I should be farther along in my web skills than I currently am...

Anyhoo, have a question for my Wordpress friends: need to create two dropdown selects to filter a directory I created for my latest client (which is a custom post type) using two custom taxonomies. Followed some tutorials online and got them to at least be able to control the loop, but I want it to be where someone can select either of the two filters and show the results OR be able to combine both and get a more specific query. Problem is 'relation' => 'AND' will only work if both selects are set, and 'relation' => 'OR' only works if one select is chosen... :\

 

[The Albatross]

Could someone with a mac please test if my animations are working on the latest Safari?



How important is the title? If I decide to keep the triangle, is it going to have a significant impact?

If so, I'll definitely change it.

Aye, like other guy said, make it the favicon. Having your site title be that has a lot of cons and almost no benefits. The major deltas are SEO (nobody could ever search for that character; Google might even block it), or if someone favorited the site by default it'd just show up as that character in their favorites list... History, etc., it'd always show up as that little triangle, which is not descriptive.

But aside from the usability, the major delta is SEO.

Come to think of it... That triangle is a delta itself (the greek character) ....... so if anybody ever asked you could say it's a real play on words/meta joke... Making a literal delta an SEO/usability delta.

 

[Nelo Ice]

So CSS is the bane of my existence. Working on a coding challenge and I struggled to get the app working properly in angular. But at least it made sense when friends showed me what I was doing wrong and I could go off the base they gave me to add functionality on my own.

Not the case with styling the app. As soon as I got one thing working something else broke or in most case the whole layout broke. But really fuck CSS .

 

[Novak]

I am looking for rapid web db app solution/framework.
Something like Zoho, but more flexible and that I can install on my web server.

Some background. I used to do Java EE development (spring framework, etc.) until 2005 (you read it right ) and then moved out of programming completely. Now I am starting my own (side) business and I would like to quickly develop apps I need. So if needed I can get on code level and learn new language, but I would prefer to keep it simple.
I was looking into RoR, but it is coding first and manually building View templates. I am too old for that :/

Any suggestions? Open source if possible.

 

[TheSeks]

Alright, after rewriting this page like 50+ times, I finally got bootstrap to be "enabled"/reacting. Huzzah.

Stupid Question: Is the well size inherited by the "col-*-*" sizes for reacting? If not is there anyway to find the pixel size of the wells?

And also is there anyway to shrink the image sizes to stay "reactive" instead of just popping around? If there is does anyone have a tutorial for that?

 

[PetriP-TNT]

Alright, after rewriting this page like 50+ times, I finally got bootstrap to be "enabled"/reacting. Huzzah.

Stupid Question: Is the well size inherited by the "col-*-*" sizes for reacting? If not is there anyway to find the pixel size of the wells?

And also is there anyway to shrink the image sizes to stay "reactive" instead of just popping around? If there is does anyone have a tutorial for that?

Bootstrap 3 or 4?

The gutter size in 3 is 30pixels divided to left and right sides of an column. The less variable is called @grid-gutter-width, which is defined here: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L327. If you don't want to learn CSS preprocessors like LESS yet, you can use the customizer: http://getbootstrap.com/customize/

How are the images "popping around"? Do you just want to shrink them (in scale?). There's a class called "img-responsive" that you can use in 3: http://getbootstrap.com/css/#images-responsive


In Bootstrap 4 these are called "img-fluid" and "$grid-gutter-width (in SASS)" respectively.

 

[TheSeks]

Well, I'm wanting the image to match the well-size from border-left to border-right and then shrink the image in responsiveness to match.

Basically:

<div class="col-xs-6">
    <div class="well">
        <img src="whatever.here" class="takes-class-that-fits-well (and image-fluid here?)" alt="describe as a possible link, otherwise I'll have to figure out how to place text under this and make them separate boxes. OH GOD" />
        <img ... ... ... />
        <img ... ... ... />
    </div>
</div>
<div class="col-xs-6">
    <div class="well">
        <img ... ... ... />
        <img ... ... ... />
        <img ... ... ... />
    </div>
</div>

Essentially it should look like:

"Well 1"                "Well 2"
"img-1"                "img-2"
"img-3"                "img-4"
"img-5"                "img-6"

 

[PetriP-TNT]

Well, I'm wanting the image to match the well-size from border-left to border-right and then shrink the image in responsiveness to match.

Basically:

<div class="col-xs-6">
    <div class="well">
        <img src="whatever.here" class="takes-class-that-fits-well (and image-fluid here?)" alt="describe as a possible link, otherwise I'll have to figure out how to place text under this and make them separate boxes. OH GOD" />
        <img ... ... ... />
        <img ... ... ... />
    </div>
</div>
<div class="col-xs-6">
    <div class="well">
        <img ... ... ... />
        <img ... ... ... />
        <img ... ... ... />
    </div>
</div>

Essentially it should look like:

"Well 1"                "Well 2"
"img-1"                "img-2"
"img-3"                "img-4"
"img-5"                "img-6"

You can just do this:

<div class="col-xs-6">
        <img src="foo.png" class="img-responsive">
        <img src="bar.png" class="img-responsive">
        <img src="biz.png" class="img-responsive">
</div>
<div class="col-xs-6">
        <img src="foo.png" class="img-responsive">
        <img src="bar.png" class="img-responsive">
        <img src="biz.png" class="img-responsive">
</div>

No need to wrap the inside unless you absolutely want to. However, "img-responsive" only makes the images shrink, not stretch due to "max-width: 100%" so if you want to stretch them you'll need to add your own class with "width: 100%" to them.

  <img src="foo.png" class="img-responsive full-width">

  // CSS
  .full-width {
    width: 100%;
  }

However, if you want to have them side-by-side on larger screens and in order on smaller screens you'll end up in a trouble if you wrap them like that. ( for example if your columns are col-xs-12 col-sm-6 like in this JSBIN: http://output.jsbin.com/kaqefokoge/).

You can use nested columns instead:

<div class="col-xs-12 col-sm-6">
   <div class="row">
      <div class="col-xs-12 col-sm-6">
        <img src="image 1.png" class="img-responsive">
     </div>
      <div class="col-xs-12 col-sm-6">
        <img src="image 2.png" class="img-responsive">
     </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6">
        <img src="image 3.png" class="img-responsive">
     </div>
      <div class="col-xs-12 col-sm-6">
        <img src="image 4.png" class="img-responsive">
     </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6">
        <img src="image 5.png" class="img-responsive">
     </div>
      <div class="col-xs-12 col-sm-6">
        <img src="image 6.png" class="img-responsive">
     </div>
   </div>
</div>

Now they'll be

"img-1"                "img-2"
"img-3"                "img-4"
"img-5"                "img-6"

on small screens and

"img-1"                
"img-2"
"img-3"               
"img-4"
"img-5"                
"img-6"

On extra small screens.


Also I misunderstood when you wanted to know about the well-size: I thought you were asking about the gutters. But you don't need to know the size of the columns, because they can be anything and in-between. In the 12-split grid, col-xs-6 is 50%, col-xs-12 is 100% and so on. You can estimate the sizes though by checking out the breakpoints.

 

[TheSeks]

Uh... you're going way over my head.

I just want the images to go where the border is gonna be or at least 5px from the left/right of the well's border (which I'm gonna remove once I finally have the layout set). Then, I'm trying to make them "responsive" by shrinking down. I guess you're jsbin works because it'd move the right column down and have everything work like that.

 

[PetriP-TNT]

Uh... you're going way over my head.

I just want the images to go where the border is gonna be or at least 5px from the left/right of the well's border (which I'm gonna remove once I finally have the layout set). Then, I'm trying to make them "responsive" by shrinking down. I guess you're jsbin works because it'd move the right column down and have everything work like that.

Sorry about that! I'll try to summarize it a bit:

- First go back a bit and re-read the stuff on how Bootstraps Grid works: http://getbootstrap.com/css/#grid. If this is your first time using a grid system, it might take a while for it to "click". Use containers to center your content. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. So at least at some point your HTML will look something like this:

<div class="container">
  <div class="row">
    <div class="col-x-size">...</div>
    <div class="col-x-size">...</div>
  </div>
</div>

- In your example, you have set of two 50% columns that are side-by-side on every screen size. (two col-xs-6's)

- Inside these columns you should have your images. You don't need a "well" or any other wrapper unless you want one for styling etc. purposes.

- Give these images class "img-reponsive". This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element. However,
say your images are 500pixels wide. In screens that are less than ~960 pixels wide, your images are going to go from side to side. But when you react the point where the screen size is bigger than your two images side by side natively, they won't scale upwards. If you want them to scale upwards, you'll need to give them another class that applies width: 100% to the images.

 

[Zakalwe]

Aye, like other guy said, make it the favicon. Having your site title be that has a lot of cons and almost no benefits. The major deltas are SEO (nobody could ever search for that character; Google might even block it), or if someone favorited the site by default it'd just show up as that character in their favorites list... History, etc., it'd always show up as that little triangle, which is not descriptive.

But aside from the usability, the major delta is SEO.

Come to think of it... That triangle is a delta itself (the greek character) ....... so if anybody ever asked you could say it's a real play on words/meta joke... Making a literal delta an SEO/usability delta.

Done.

Favicons take a lot more code/images than I thought they would...

-

To anyone interested:

The site's foundation is complete, in Chrome and Edge at least. It's currently using the 'Zoom' property to emulate proper responsive design, so Firefox breaks entirely. It was a quick build to see how the design worked in the wild.

If you'd like to take a look I'd recommend Chrome as it's looking how I want it to there.

http://tetrisforkicks.com/

(each section has it's own completely ignorable animation, reload the page when you're viewing each to see if you missed it).

-

Going to spend the day tomorrow coding it properly to fit all browsers. Although Firefox seems to have overtaken IE as the awkward browser to code for...

Please bear in mind, the site is a shell. It currently has none of my design projects attached. I'm still deciding which to include, and the primary one (a set of CSS image overlays) is being re-factored to be tidy enough for release.

Me and a friend are also working on our first proper job. Designing an app for actual money, I'm handling the front end and he's doing the heavy lifting. Exciting though, I'll have something proper to show on my profile.

-

I'm spending a ridiculous amount of time coding, around 10-12 hours a day easily on average. Did anyone else get the bug like this when they started?

 

[PetriP-TNT]

Done.

Favicons take a lot more code/images than I thought they would...

The site's foundation is complete, in Chrome and Edge at least. It's currently using the 'Zoom' property to emulate proper responsive design, so Firefox breaks entirely. It was a quick build to see how the design worked in the wild.

http://tetrisforkicks.com/

First of all, I like the design quite a lot. Nice work!

I was going to complain about how the text is unreadable in anything smaller than say ~1000px screens but then I saw that paragraph on your message so I am just going to disregard.

But anyway, just a note about smaller screens and font-sizes: I have ran into cases tons of times where someone wanted to use smaller font-sizes on smaller screens so that they would fit better. This might sound right, but in general it's completely awful. When you are on your small(ish) mobile device, do you really want to look at even smaller text than normal? You don't, no matter how close you are going to keep your mobile phone. As a matter of fact, I quite often look closer at my desktop screen than I do my mobile, which sits close to my lap on the bus.

What's the solution then? Always keep your font at good, readable sizes: 16 pixels is usually a good base font height.

I'm spending a ridiculous amount of time coding, around 10-12 hours a day easily on average. Did anyone else get the bug like this when they started?

When I started yes, but even more so later. Sometimes I come home from work where I have done the same thing for 8 hours only to dive into a pet project or some open source contribution to spend hours with it. Sometimes I wake up early to do some feature I really want to see. And sometimes it's just better to call it quits when you don't feel like you are progressing and try again the next day.

 

[esmith08734]

For someone who recently started getting into web development with CSS, HTML, JavaScript, and jQuery, what would you all recommend I do to market myself for entry level jobs?

 

[Kalnos]

For someone who recently started getting into web development with CSS, HTML, JavaScript, and jQuery, what would you all recommend I do to market myself for entry level jobs?

Frontend? Backend? Both?

In this field you want to show people that you can teach yourself and that you're motivated to learn new things and build stuff. The best way to do that is to make something and make the code publicly available on GitHub, GitLab, etc. There are a ton of free open APIs (Spotify, Twitch, etc) that you can use to make an interesting project. Lots of people make tools for things they're interested in (ex. I'm sure someone is making a Dark Souls 3 character builder, etc right now).

Consider learning something like Angular or React also.