Support NeoGAF

[PetriP-TNT]

sup web gaf

Do any of you know what these css animations are called? Or a good resource on how to code something like that?

http://do.live147.com/html/rockox/index-dark.html

Specifically the spinny colored boxes up top and the portraits with social buttons appearing down further.

Transitions (the portraits and spinnyboxes)
https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Transforms (the spinny boxes)
https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Animation (the portraits, bounceIn)
https://developer.mozilla.org/en-US/docs/Web/CSS/animation


that template is like animations fireworks!

 

[Daffy Duck]

Thanks a lot! I'll show what I'm working on soon. I'm hoping it looks good to the end

EDIT - How do you guys do your spacing with your code? Do you use tab to indent or use space a few times to get the desired amount of spaces? I notice when looking at source code, it looks like the code is indented with spaces instead of tabs

What are you trying to do? Indent text? Images?

 

[phazedplasma]

Transitions (the portraits and spinnyboxes)
https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Transforms (the spinny boxes)
https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Animation (the portraits, bounceIn)
https://developer.mozilla.org/en-US/docs/Web/CSS/animation


that template is like animations fireworks!

Awesome thanks!

found this resource too fro anyone else interested.
http://css3.bradshawenterprises.com/transitions/

I feel like I see a lot of cool front end stuff but dont know what any of it is called and have no idea how to search for it haha

 

[jokkir]

What are you trying to do? Indent text? Images?

I mean the indentation of the source code. Are spaces or the tab key better?

 

[Daffy Duck]

Lol, I use tabs.

I must add, I do my programming in php storm, which helps keep code looking nice and generally sorts the code out.

 

[BreakyBoy]

I mean the indentation of the source code. Are spaces or the tab key better?

This is practically a holy war between all coders of any stripe. You're unlikely to find a consensus.

Personally, I have my editors convert tabs to spaces to make my indentations explicit. I've received my share of grousing for that.

 

[PetriP-TNT]

Any IDE or editor that can't handle tabs to spaces is pretty much worthless. I use tabs to make four (or two with HTML/JSON) spaces to indent. It's best of both worlds really.

 

[flyover]

This is practically a holy war between all coders of any stripe. You're unlikely to find a consensus.

Yeah, it's a matter of personal preference. You can't go wrong with either tabs or spaces, so long as you pick spaces.

 

[Onemic]

I mentioned linters, which while isn't quite as accurate (or similar) to errors compilers throw, they most often warn you about easy errors like misspelled variable names, unreachable code and so on. The downside of them is that they are somewhat opinionated, which means that they also tell you how you should write your code, which you might or might not like.

The usual ones are JSLint (http://jslint.com) and JSHint (http://www.jshint.com/). Looks like WebStrom 8 has JSHint built in: http://www.jetbrains.com/webstorm/webhelp/jshint.html

Of course this doesn't save you from errors such as undefined objects or trying to compare strings to integers but it's something.

Then there's the other side of Browser developer tools which will help you solve the other problems. All the browsers have their own built in, and then there's things such as Firebug http://getfirebug.com/javascript and other Library specific add-ons. These bring you stuff like breakpoints and line-by-line analysis of JS code and much much more. And of course there are try-catch-finally blocks so you can throw your own errors too. Plus console.log() is much less annoying to use for debugging than using alerts

Further on to test driven development, there are robust test suites available for you, build systems & task runners to automate all this (and more!)... The robust debugging features are there, but they are a bit spread around because of JavaScripts history.

Thanks! I had no idea JSlint and JShint were built in. My professor always requests that we check our code by pasting it into JSlint. This makes things much easier.

Only problem now is figuring out how to get the debugger in WS8 to even work. Whenever I try and run the debugger it keeps saying that the path to the node executable is empty(I have no idea what this means) so when I try either running or debugging the code in WS8 nothing happens.

 

[D4Danger]

Thanks! I had no idea JSlint and JShint were built in. My professor always requests that we check our code by pasting it into JSlint. This makes things much easier.

Only problem now is figuring out how to get the debugger in WS8 to even work. Whenever I try and run the debugger it keeps saying that the path to the node executable is empty(I have no idea what this means) so when I try either running or debugging the code in WS8 nothing happens.

does it want you to install node.js?

 

[Onemic]

does it want you to install node.js?

hmm, it never asked me. I'll try installing it and see if that does anything

EDIT: well, now it shows some activity, but its saying that there are errors where there shouldn't be, like saying that prompt() is undefined.

 

[Syphon Filter]

if you want to do some algorithms check out http://coderbyte.com/

Interesting, i'll check this out. Thanks.

Have you programmed before? If so, read up on JavaScript patterns like Addy Osmani's book. If that's too much, look for other shorter sites with more specific patterns such as the module and class patterns. The problem is that there are quite a few ways to accomplish some things in JavaScript, and they all have tradeoffs.

If not, I'd look at some well established fully JavaScript libraries (so not bootstrap) and start with something simple. Avoid Backbone.js. It's a good API, but is so loose you can easily hang yourself with it if you're new.

Above all else, understand closures and scoping in JavaScript. It will cause you so many problems.

I'll read that link, lots of info i can learn there. Is jQuery fine for a library? I checked it out a bit and i understood it,just need more time to get better with it. Also is code academy worth a look for JS?

 

[ferr]

Not sure where to ask, but maybe someone here has some insight..

What is the 'legal stuff' behind using a (free/MIT licensed) JS library in a JS library that I want to create and sell. Specifically interested in jQuery, AngularJS, and Bootstrap being integrated into my custom UI kit. Do credits need to be given? Is it just a matter of the fact that my users will need to download bootstrap from bootstrap's site to use my kit, so that satisfies 'crediting'?

Just noticed that KendoUI is integrating AngularJS. Exchange of money behind closed doors, or could they be just doing it without any sort of request?

The MIT License

Copyright (c) 2010-2014 Google, Inc. http://angularjs.org

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

I take that as- you can use the library as long as your library is under the MIT License? So Kendo is selling AngularJS to people, how does that conform to the license?

 

[PetriP-TNT]

Not sure where to ask, but maybe someone here has some insight..

What is the 'legal stuff' behind using a (free/MIT licensed) JS library in a JS library that I want to create and sell. Specifically interested in jQuery, AngularJS, and Bootstrap being integrated into my custom UI kit. Do credits need to be given? Is it just a matter of the fact that my users will need to download bootstrap from bootstrap's site to use my kit, so that satisfies 'crediting'?

Credits don't need to be given, but under the MIT license the license itself should be left intact. That is, the comments in the headers of the files.

For instance, Bootstrap has this as a banner in all the code files (example, Alert.js)

/* ========================================================================
* Bootstrap: alert.js v3.2.0
* http://getbootstrap.com/javascript/#alerts
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */

jQuery has this:

/*! jQuery v2.1.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */

For even clearer explanation, see this: https://jquery.org/license/

link Source Code

jQuery projects are released under the terms of the MIT license.

The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with a jQuery project.

You are free to use any jQuery project in any other project (even commercial projects) as long as the copyright header is left intact.

Don't remove those, or claim that the code you are running is all by yourself and you will be fine. Exactly like the KendoUI guys are doing it.

 

[ferr]

Don't remove those, or claim that the code you are running is all by yourself and you will be fine. Exactly like the KendoUI guys are doing it.

Thanks for the info!

 

[Onemic]

Anyone know how to get the WS8 debugger to work? After installing node.js and using that as my node path, the debugger now thinks everything is undefined. For example it thinks that prompt() is undefined.

 

[jokkir]

I need feedback on this website I've been working on and if you have any suggestions to improve it would be greatly appreciated.

http://www.yorku.ca/jisa/preview/v3/index.html

However, the mobile view is broken (I know I should have went mobile first) and I only tested it on Chrome. It's using Polymer so the compatibility with older browsers and some browsers is a bit limited.

 

[PetriP-TNT]

I need feedback on this website I've been working on and if you have any suggestions to improve it would be greatly appreciated.

http://www.yorku.ca/jisa/preview/v3/index.html

However, the mobile view is broken (I know I should have went mobile first) and I only tested it on Chrome. It's using Polymer so the compatibility with older browsers and some browsers is a bit limited.

Looks great with large screens. Buttons, such as the "Twitter" and "Instagram" buttons on top, could use some padding on the right side too.

As the site is pretty simple (as in clean), the mobile situation isn't too hard to solve at all: after a certain breakpoint, just collapse the divs on top of each other with 100% width with some padding.

For the browser support, there's polyfills for almost every everything for IE10 and up https://www.polymer-project.org/resources/compatibility.html

Some polymer component kills Firefox (newest) and the site feels somewhat slow on all of the browsers

 

[emb]

I need feedback on this website I've been working on and if you have any suggestions to improve it would be greatly appreciated.

http://www.yorku.ca/jisa/preview/v3/index.html

However, the mobile view is broken (I know I should have went mobile first) and I only tested it on Chrome. It's using Polymer so the compatibility with older browsers and some browsers is a bit limited.

On Firefox I see nothing. In IE it shows up, and looks quite nice. The contact button in the upper right looks messed up though?

(Sorry, I know other browsers probably weren't what you were looking for feedback on.)

 

[Linkark07]

On Firefox I see nothing. In IE it shows up, and looks quite nice. The contact button in the upper right looks messed up though?

(Sorry, I know other browsers probably weren't what you were looking for feedback on.)

Must be a problem on your side since I can see the site on Firefox without problems.

So far, it looks good for me. Clean and you can understand everything.

 

[emb]

Must be a problem on your side since I can see the site on Firefox without problems.

Oh, for some reason ad block was getting it. Weird.

But now that I see it correctly, I think it looks good. As mentioned, very clean.

 

[-Plasma Reus-]

Probably asked to death. But how does one make sure divs don't go over each other? I find CSS to be difficult in terms of getting things to stick where you want them to. For example when you add a bunch of text to a div. It will spill over into a neighbouring or lower div. Is there a framework or guideline I can use for this?

 

[D4Danger]

Probably asked to death. But how does one make sure divs don't go over each other? I find CSS to be difficult in terms of getting things to stick where you want them to. For example when you add a bunch of text to a div. It will spill over into a neighbouring or lower div. Is there a framework or guideline I can use for this?

Do you have an example? You can use the overflow property to control what happens in some situations.

For example if you have a box that is 300x300 and set overflow:auto, if the content is larger than the box you'll get scrollbars on the box.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

is that what you mean?

 

[PetriP-TNT]

Probably asked to death. But how does one make sure divs don't go over each other? I find CSS to be difficult in terms of getting things to stick where you want them to. For example when you add a bunch of text to a div. It will spill over into a neighbouring or lower div. Is there a framework or guideline I can use for this?

Some source material:

Visual formatting model:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model

Block formatting context:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

Box model:
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

 

[-Plasma Reus-]

Thanks guys.

 

[jokkir]

Looks great with large screens. Buttons, such as the "Twitter" and "Instagram" buttons on top, could use some padding on the right side too.

As the site is pretty simple (as in clean), the mobile situation isn't too hard to solve at all: after a certain breakpoint, just collapse the divs on top of each other with 100% width with some padding.

For the browser support, there's polyfills for almost every everything for IE10 and up https://www.polymer-project.org/resources/compatibility.html

Some polymer component kills Firefox (newest) and the site feels somewhat slow on all of the browsers

Thanks a lot! The button was actually I have listed to fix next once I get everything on it first. And yeah, the mobile view shouldn't be too difficult to fix. Do you happen to know which Polymer elements make it slow/kills Firefox? I'll try not to add that if I can.

On Firefox I see nothing. In IE it shows up, and looks quite nice. The contact button in the upper right looks messed up though?

(Sorry, I know other browsers probably weren't what you were looking for feedback on.)

Yeah, the nav bar is actually there by a quick job I decided to do to see how it looks like. I'll fix it soon but I somehow seem to have lost access to the FTP server >>

Also, any suggestions to make it look less... plain? My friend says there's too much white space which I somewhat agree and trying to fix it. It's hard trying to do Material Design on a larger screen when there's no real world examples as of yet.

 

[PetriP-TNT]

Do you happen to know which Polymer elements make it slow/kills Firefox?

No idea (my bet is on Shadow DOM though), I tried to profile it but couldn't as the page most often just killed the tab and the "stop unresponsive script" warning showed me just the one that was currently running.

Also, any suggestions to make it look less... plain? My friend says there's too much white space which I somewhat agree and trying to fix it. It's hard trying to do Material Design on a larger screen when there's no real world examples as of yet.

I don't think there's too much whitespace. I do love white space though. Maybe for Web 3.0ish (heh) approach you could add some fancy graphics though, sort of like: https://www.vagrantup.com/

 

[Onemic]

Anyone know how to get the WS8 debugger to work? After installing node.js and using that as my node path, the debugger now thinks everything is undefined. For example it thinks that prompt() is undefined.

Anyone? I'm back to being forced to using JSlint to debug

 

[PetriP-TNT]

Anyone? I'm back to being forced to using JSlint to debug

Goddammit, I wrote an long answer to this and then accidentally pressed CTRL+W which closed my browser. Anyway, here's it again:

I am not completely sure how the WS8 debugger works (but judging from the everything is undefined thing I'd say), but if the debugger is using JSHint, you need to define a file called .jshintrc in your project root. You are running into the "undefined" problems, because you haven't specifically marked native browser globals as predefineds. In the JSHint docs we can see that the keys you are looking for are "browser" and "devel" (browser for stuff like document and devel for console.log, prompt and so on). So add these to your .jshintrc file

{
  "browser" : true,
  "devel" : true
}

For JSLint, you can type this on top of each of your files for the same effect:

/*jslint browser:true, devel:true*/

(or replace the jslint by jshint to achieve the same in un-global scale, unlike with .jshintrc)

There are many other convenience options in JSHint to autodefine other globals for popular JS libraries. For instance, if you are using jQuery, you can add "jquery" : true to defined jQuery and $. Same for node, underscore, mootools and so on.

{
  "browser" : true,
  "devel" : true,
  "jquery" : true
}

It's worth noting that JSHint doesn't autodefine any globals for you, unless explictly stated in the .jshintrc. If you are using JSHint, it's worth going through the options and defining all (or most) of the variables to fit your needs.

 

[Ikuu]

Pretty good deal for any students, or access to a student email: https://education.github.com/pack/

 

[PflargBlarg]

I started checking out Angular for fun as it seems like it's going to keep growing. I can't say that it will be super helpful for future career moves as Angular jobs are still heavily outnumbered by ASP.NET MVC jobs (which is what I've done for almost my whole career so far), but it should be at least interesting.

Made up a side project to work on with it, as it will also be a good opportunity to learn all the backend database/infrastructure stuff that I have no damn idea about.

 

[PetriP-TNT]

Pretty good deal for any students, or access to a student email: https://education.github.com/pack/

That's really awesome for any student

 

[Somnid]

Pretty good deal for any students, or access to a student email: https://education.github.com/pack/

Looks like mostly corporate cloud-services. I can't even fathom why a student would need/want most of those.

 

[_Zento]

This might get lost but should probably add the SilverStripe CMS to that list OP?

 

[-COOLIO-]

Looks like mostly corporate cloud-services. I can't even fathom why a student would need/want most of those.

to host a personal site, mumble servers, experimentation, start up ideas, class assignments etc.

 

[survivor]

Pretty good deal for any students, or access to a student email: https://education.github.com/pack/

Do namecheap and dnsimple offer the same service? Not quite sure what the difference is between them.

 

[diaspora]

I need feedback on this website I've been working on and if you have any suggestions to improve it would be greatly appreciated.

http://www.yorku.ca/jisa/preview/v3/index.html

However, the mobile view is broken (I know I should have went mobile first) and I only tested it on Chrome. It's using Polymer so the compatibility with older browsers and some browsers is a bit limited.

My alma mater =D

 

[railGUN]

Squarespace just announced their updated platform "7" and I happened to get into the beta. It's pretty fucking slick - no more jumping between "Preview" and "Content Manager" (or Settings etc.) pages is the biggest improvement IMO - everything is handled within a single page, with information and settings and whatnot sliding in from the side - and you basically build on the actual page, not a "content page" that then gets applied / viewed in "Preview mode".

Sounds like it will be available to general public within a few weeks - and you can port any 6 site to the 7 interface without any hassle (or so they claim). It's more of an interface / backend skin, rather than a new system entirely (like 5 to 6 was).

Preview for it can be found here: http://www.squarespace.com/seven

 

[mephesta]

Dumb noon question, but if I wanted to make a social cataloging site (similar idea to goodreads), what should I be learning/working in? PHP?

I've got a long term project that I want to work on as a fun hobby. If anyone has suggestions about what I should be learning, I'd really appreciate it! I can find my way around HTML and CSS okay, but that is it.

 

[Somnid]

Dumb noon question, but if I wanted to make a social cataloging site (similar idea to goodreads), what should I be learning/working in? PHP?

I've got a long term project that I want to work on as a fun hobby. If anyone has suggestions about what I should be learning, I'd really appreciate it! I can find my way around HTML and CSS okay, but that is it.

Learn node.js, it's simple, it's free, it's modern, it gets you trendy jobs and you only have to learn javascript once. Also pick up some sort of database. MySql is a good SQL option, MongoDB is a good no-SQL option.

 

[SpookyFries]

Having a hard time deciding if I want to use Polymer or Bootstrap. I haven't messed with BS yet but polymer was extremely easy to implement with great results.

 

[pxleyes]

Having a hard time deciding if I want to use Polymer or Bootstrap. I haven't messed with BS yet but polymer was extremely easy to implement with great results.

Completely different pieces of code for different purposes.

 

[PflargBlarg]

Having a hard time deciding if I want to use Polymer or Bootstrap. I haven't messed with BS yet but polymer was extremely easy to implement with great results.

Completely different pieces of code for different purposes.

Yeah, an equivalent to Bootstrap would be something like Foundation.

 

[Angelus Errare]

Having a hard time deciding if I want to use Polymer or Bootstrap. I haven't messed with BS yet but polymer was extremely easy to implement with great results.

As the others have said Polymer's purpose is completely different to Bootstrap. If you're looking for Bootstrap type frameworks. I suggest looking into

Foundation
Boilerplate
Ink

 

[mephesta]

Learn node.js, it's simple, it's free, it's modern, it gets you trendy jobs and you only have to learn javascript once. Also pick up some sort of database. MySql is a good SQL option, MongoDB is a good no-SQL option.

Thanks! These seem like they will keep me busy for a while. I'm picking up some JavaScript foundations and then I'll dive into node. Hopefully I don't annoy all of you too much in the future.

 

[Buckethead]

Dat Coda 2.5 doe

 

[dokish]

Hello designer GAF.

Can anyone here make a very simple slogan for me? Please. It will take you 10 minutes tops if you know how to use the right tools, doesn't require a lot at all. Only one small figure with solid colors, no text.

I'll give you 5 bucks for your time. PM me asap.

 

[moniker]

I have a question about Browserify and Backbone.

If I npm install Backbone it comes with Underscore as a dependency. I use Lo-Dash for the rest of my project though and of course I don't want both Underscore and Lo-Dash in my bundle. Is there any to make Browserify switch out Underscore for Lo-Dash when Backbone is requiring it?

 

[maeh2k]

Do any of you use services like Visual Website Optimizer, Optimizely, ABTasty, Adobe Test&Target?

If so, what are your experiences with them? Which have you tried and which do you like best? Any issues?
How do they impact performance? Can they cause rendering issues (e.g. on mobile devices)?

I'm evaluating using on of these services for a mid-size ecommerce website. So far they haven't done a lot of A/B-Testing and I think there might be some potential there.

 

[PetriP-TNT]

I have a question about Browserify and Backbone.

If I npm install Backbone it comes with Underscore as a dependency. I use Lo-Dash for the rest of my project though and of course I don't want both Underscore and Lo-Dash in my bundle. Is there any to make Browserify switch out Underscore for Lo-Dash when Backbone is requiring it?

You could just change the dependency from Underscore to Lo-Dash in the package.json and do npm install again.