• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

Holy moly, glad I found this thread too! I just started diving into html & css recently. I've taken a template and was just copying it for the sake of getting a feeling of it.

You'd think it'd be easy but nooo.... somewhere along the lines I messed up the code and the past hour and a half has been me trying to find what I did wrong! I don't hate it, it's actually kind of fun, but at this point I feel retarded....

What would you guys do? Cut snippets out and start over? I've been looking at the html and making sure every <div> tag is properly closed, ect... I've also been going through the css to see if it's fixable there, but lol nope.

Anyways, what about everyone else? How were you when you were a beginner?

Cheers for the thread.

If you are using chrome, right click on the page and select "Inspect Element" this will open up the webkit web inspector, which will help you a lot in terms of understanding why the browser is rendering the page the way it is. Every browser has some mode like this these days.
 

Daffy Duck

Member
I have a possibly un-endearing question :(. I need work and I'm between a rock and a hard place — the rock being McDonald's and the hard place being cheap web work. I'm comfortable enough with CMS's to take on simple jobs like setting up WordPress sites, doing CSS or content tweaks, etc. I've done this for family, friends, and a couple small businesses... but they don't need me at the moment. Are there any recommended websites for this kind of (inexperienced) freelance work?

Right now I'm eyeing freelancer.com
Promise I'm a good person!

My experience of starting out on that site?

Forget it, (especially in your circumstances where it seems you need a job) you'll be overlooked for cheap Indian labour/coders and if you're lucky enough to get someone take a punt on you it will be for peanuts.
 
If you are using chrome, right click on the page and select "Inspect Element" this will open up the webkit web inspector, which will help you a lot in terms of understanding why the browser is rendering the page the way it is. Every browser has some mode like this these days.

Yup, F12 in every major browser! Most offer similar set of tools, some are better some are worse. Then there's some standalone/extension ones like Firebug which might suit you better or not. I have always been a fan of Firebug because of it's clarity, but recently I have just been using the regular web dev console instead, mostly because Firebug still doesn't support Source Maps and that's pretty much a necessity for me.

Furthermore @Pixeluh, to double check on missing tags etc. validate your files with https://validator.nu/ or make sure you have a some sort of proper editor that notifies you on such.

Those two combined you should be able to find your error in no time!
 

Pixeluh

Member
Yup, F12 in every major browser! Most offer similar set of tools, some are better some are worse. Then there's some standalone/extension ones like Firebug which might suit you better or not. I have always been a fan of Firebug because of it's clarity, but recently I have just been using the regular web dev console instead, mostly because Firebug still doesn't support Source Maps and that's pretty much a necessity for me.

Furthermore @Pixeluh, to double check on missing tags etc. validate your files with https://validator.nu/ or make sure you have a some sort of proper editor that notifies you on such.

Those two combined you should be able to find your error in no time!

Thanks for the link! I've actually been using brackets, I like the live preview feature it has! It ended up being the form tags ( that I skipped out on ) . It wasn't displaying correctly until I out those in. :D
 

Onemic

Member
I apologize in advance if I use any technical words in the wrong way. I'm still a newbie to Linux/networking

Ive been trying to figure out this problem for over a week and none of the related questions others have asked have helped me. I recently built a webserver running on apache2 to host my own website. I also intended to use it for SSH, FTP, and VNC. I registered a domain at GoDaddy, cokongwu.com. A static ip (192.168.0.105) has been setup for the server and I have setup portforwarding as well for port 80, 21, 23, 53 and 443 to the static ip. reading the guides on how to setup a publicly accessible webserver, I thought this was all that was needed, as it was working perfectly at first, but of course I found out that once I tried to access the webserver using the domain name outside the network, I couldnt connect. After some more searching I found out that I needed to change my A record in my zone file at GoDaddy to my public ip. Once I did that I found that I was no longer able to connect to my webserver at all, either inside the network, where I would instead be redirecred to the router page, as well as outside the network where the connection would simply time out. I later figured out that since my public ip couldnt be set to static I had to use a service, specifically dyndns so that it would be able to constantly update the ip when it changes. I setup the dyndns updater from the software update center and setup my dyndns account, cokongwu.com, with an A record that points to my public ip and an alias www.cokongwu.com that points to cokongwu.com. I also setup a hostname, cokongwu.dyndns.org which also points to my public ip and added the dyndns nameservers to Godaddy's nameservers. The A record I have for cokongwu.com at godaddy still points to my internal ip and the CName records (www and cokongwu.com) both point to cokongwu.dyndns.org.(however, since I replaced godaddys nameserves with dyndns nameservers, I can no longer manage the zone file for the domain)

After all this, trying to access hostname.com still provides the same problems as before. Accessing it points to my public ip instead of my internal ip, but within the network I just get forwarded to my routers setting page and outside the network it just times out. I'm out of ideas as to how to fix this, so any ideas are welcome. Shouldnt it(the public ip) be redirected to my internal ip? I can still access SSH and my webserver just fine using the internal ip, but using my domain name or public ip just times out if outside the network or redirects to the router page when within the network. Using a VNC viewer gives me some type of unmatched security type errors

Once again sorry if I'm using any of these technical words in the wrong way, I'm still very new to this whole thing.

I know a lot of questions related to issues like this post certain commands so I'll do the same:

Code:
    Active Internet connections (only servers)
    Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
    tcp        0      0 127.0.0.1:5556          0.0.0.0:*               LISTEN      3387/dyn_updater
    tcp        0      0 127.0.1.1:53            0.0.0.0:*               LISTEN      -               
    tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      -               
    tcp        0      0 127.0.0.1:631           0.0.0.0:*               LISTEN      -               
    tcp        0      0 0.0.0.0:3306            0.0.0.0:*               LISTEN      -               
    tcp        0      0 0.0.0.0:5900            0.0.0.0:*               LISTEN      2729/vino-server
    tcp6       0      0 :::80                   :::*                    LISTEN      -               
    tcp6       0      0 :::21                   :::*                    LISTEN      -               
    tcp6       0      0 :::22                   :::*                    LISTEN      -               
    tcp6       0      0 ::1:631                 :::*                    LISTEN      -               
    tcp6       0      0 :::5800                 :::*                    LISTEN      2729/vino-server
    tcp6       0      0 :::5900                 :::*                    LISTEN      2729/vino-server
    udp        0      0 0.0.0.0:5353            0.0.0.0:*                           -               
    udp        0      0 127.0.1.1:53            0.0.0.0:*                           -               
    udp        0      0 0.0.0.0:39124           0.0.0.0:*                           -               
    udp        0      0 0.0.0.0:631             0.0.0.0:*                           -               
    udp6       0      0 :::5353                 :::*                                -               
    udp6       0      0 :::53973                :::*                                -


ufw:

Code:
    sudo ufw status
    [sudo] password for fender: 
    Status: inactive



000-default.conf:


Code:
    <VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
            ServerName cokongwu.com
            ServerAlias [url]www.cokongwu.com[/url]
    
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
    
        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn
    
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
    
        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
    </VirtualHost>
    
    # vim: syntax=apache ts=4 sw=4 sts=4 sr noet

ibi7uP8lZi5B41.jpg
 
I'm having a bit of trouble with something I thought would be easy to do. I just want to center a div that consists of several identical floated elements, but where the div has a variable width (min-width:640px; max-width:1280px;). Each of the floated elements are exactly 320px wide, so the site looks fine if the browser shrinks the page down to 640px, 960px, or if it's at least 1280px wide, but anything in between has the elements aligning left.

I feel like there's something stupidly simple that I'm missing. Could anyone take a look and clue me in? WIP: http://www.morehigher.com/
 
Networking stuff]

This might be a long shot, but is your routers configuration page set to port :80? If it is, try to change it to something else (like 8127).

I'm having a bit of trouble with something I thought would be easy to do. I just want to center a div that consists of several identical floated elements, but where the div has a variable width (min-width:640px; max-width:1280px;). Each of the floated elements are exactly 320px wide, so the site looks fine if the browser shrinks the page down to 640px, 960px, or if it's at least 1280px wide, but anything in between has the elements aligning left.

I feel like there's something stupidly simple that I'm missing. Could anyone take a look and clue me in? WIP: http://www.morehigher.com/

Instead of floating them to left, you could use display: inline-block; for the `.tile`:s. Then, for the wrapping <div>, set text-align: center;

EeICzPgl.jpg


(This has an side-effect that for example for 3-3-2 rows the last two will be centered to each other instead of the last two being at C1-C2 if you think it as a grid of A1-C3).
 
Instead of floating them to left, you could use display: inline-block; for the `.tile`:s. Then, for the wrapping <div>, set text-align: center;

EeICzPgl.jpg


(This has an side-effect that for example for 3-3-2 rows the last two will be centered to each other instead of the last two being at C1-C2 if you think it as a grid of A1-C3).

That's actually better! I need to trim the margins off the tiles now though. Thanks so much!
 

grmlin

Member
Don't forget to remove whitespaces when using inline-block. I normally add comments between the elements to avoid those extra 4px to accidentally stack up.

Code:
<ul><!--
    --><li></li><!--
    --><li></li><!--
--></ul>
 
Don't forget to remove whitespaces when using inline-block. I normally add comments between the elements to avoid those extra 4px to accidentally stack up.

Code:
<ul><!--
    --><li></li><!--
    --><li></li><!--
--></ul>

Yeah, it took me a few minutes to figure out what was going on there since it looked like margin or padding. In the end, I changed letter-spacing to a different value (-.333em for the font I'm using) so that the renderer jumps back to where it was prior to adding the white space.

edit: I'm not using an unordered list, although I probably should be. This is what the CSS should look like for that:

Code:
ul {
    letter-spacing: -.25em;
}
li {
    letter-spacing: normal;
}
 

Onemic

Member
This might be a long shot, but is your routers configuration page set to port :80? If it is, try to change it to something else (like 8127).



Instead of floating them to left, you could use display: inline-block; for the `.tile`:s. Then, for the wrapping <div>, set text-align: center;

EeICzPgl.jpg


(This has an side-effect that for example for 3-3-2 rows the last two will be centered to each other instead of the last two being at C1-C2 if you think it as a grid of A1-C3).

How do I change the port of the configuration page?
 

Granadier

Is currently on Stage 1: Denial regarding the service game future
So I'm just getting into the MEAN stack for a project we've started.

To anyone with experience using this stack, do you have any recommended reads?
 

Cyport

Member
I'm looking into a new host for my websites. Who would you suggest is the best provider and what way would be best? Most if not all the websites will be Wordpress. I will be hosting 3 websites initially with room to increase in future.
 

Mabef

Banned
My experience of starting out on that site?

Forget it, (especially in your circumstances where it seems you need a job) you'll be overlooked for cheap Indian labour/coders and if you're lucky enough to get someone take a punt on you it will be for peanuts.

Wow, yes. Ridiculously saturated, and everyone's working for so cheap. I bid a few hours worth of coding for ~$15, and so does everyone else. I think I have to work under $5perhour to win some bids.
 
I'm looking into a new host for my websites. Who would you suggest is the best provider and what way would be best? Most if not all the websites will be Wordpress. I will be hosting 3 websites initially with room to increase in future.
I can't comment on shared hosting. But for our websites we are pretty happy with Amazon EC2. You can pick out a free micro server to test it out.
 

Ghost

Chili Con Carnage!
Do any of you use/recommend any online training course websites?

I've been made a manager and I want to offer my junior guys the opportunity to broaden their skillsets (with our money), I like the look of Udemy https://www.udemy.com/ but would like to have some alternatives.
 

ferr

Member
Do any of you use/recommend any online training course websites?

I've been made a manager and I want to offer my junior guys the opportunity to broaden their skillsets (with our money), I like the look of Udemy https://www.udemy.com/ but would like to have some alternatives.

I like pluralsight.com and microsoft's virtual academy. Also Codeschool, from what I've used of it, forces a hands-on approach and actually gets you to write code instead of just watching videos -- which is really good.
 
Do any of you use/recommend any online training course websites?

I've been made a manager and I want to offer my junior guys the opportunity to broaden their skillsets (with our money), I like the look of Udemy https://www.udemy.com/ but would like to have some alternatives.

I have a course on Udemy, actually :) Not about web design, though. (that link is a free coupon code for Gaffers, btw)

Just make sure you wait for a discount. They often do $10 or $19 sales. It's nice to get those $500 courses real cheap! You can even search around the Internet, as well.
 
Stuff that I friggin' hate and I have had to deal with quite regularly for the past 5 or so years: SCORM. Screw SCORM and everything related to it.

I hadn't checked/used the plain SCORM crap from Rustici in a while and just used the Pipworks wrapper (which is pretty okay!) instead, but remember the Articulate Storyline 2 program I complained about some weeks ago? So I had to push one project out as LMS package using SCORM 1.2 or 2004, and there results were pretty... interesting.

For example, I wondered why the debugger told me my browser was Netscape 5, so I dived into ominously named "browsersniff.js"

Code:
//<!--
// Ultimate client-side JavaScript client sniff. Version 3.03
// (C) Netscape Communications 1999-2001.  Permission granted to reuse and distribute.
// Revised 17 May 99 to add is_nav5up and is_ie5up (see below).
// Revised 20 Dec 00 to add is_gecko and change is_nav5up to is_nav6up
//                      also added support for IE5.5 Opera4&5 HotJava3 AOLTV
// Revised 22 Feb 01 to correct Javascript Detection for IE 5.x, Opera 4, 
//                      correct Opera 5 detection
//                      add support for winME and win2k
//                      synch with browser-type-oo.js
// Revised 26 Mar 01 to correct Opera detection
// Revised 02 Oct 01 to add IE6 detection
// Revised 16 Oct 03 to add explict NS 6 detection vs NS 7 - Mike Rustici

If you ever want to figure out if your client is running on Windows 95, this is your tool!

Except...

Code:
    // NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
    //        Win32, so you can't distinguish between Win95 and WinNT.

... bad news if your user is rocking Opera 3.0. But at least the WebTV detection is rock solid!

Anyhoo, I was still having some issues so I jumped to index_lms.html that is supposed to launch the whole thing to see what's what and it turns out the whole page is made with frames.

Code:
    <frameset rows="100%,0%,0%,0%" onload="Start()" border="0" onbeforeunload="Unload()" onunload="Unload()">
        <frame name="scormdriver_content" src="lms/blank.html" scrolling="false">
        <frame name="AICCComm" src="lms/AICCComm.html">
        <frame name="rusticisoftware_aicc_results" src="lms/blank.html">
        <frame name="NothingFrame" src="lms/blank.html">
    </frameset>
    <noframes>
        Your browser must be able to view frames for this content to display.
    </noframes>

Old skool. But turns out there's an HTML5 version too!

That builds the page using tables by document.write():ing everything.

Fuuck yoou Mike Rusticiii
 

Ghost

Chili Con Carnage!
I like pluralsight.com and microsoft's virtual academy. Also Codeschool, from what I've used of it, forces a hands-on approach and actually gets you to write code instead of just watching videos -- which is really good.


Oh thanks Pluralsight looks like exactly what I'm looking for in terms of the course offerings and the business pricing. I guess the real test will be whether I can get anyone to actually use it.

Thanks for all the other suggestions as well!
 

ferr

Member
This criticism and follow-up on Dart's wiki is great,

Microsoft's JavaScript team has stated that: "Some examples, like Dart, portend that JavaScript has fundamental flaws and to support these scenarios requires a 'clean break' from JavaScript in both syntax and runtime. We disagree with this point of view."[26] Microsoft later released a JavaScript superset language, TypeScript
 

grmlin

Member
Javascript, especially with ES6, is awesome and it is, because it's not like other languages (Java etc)

For me it's absolutely sufficient to use proper documentation and a capable editor like Webstorm, the rest of the time i enjoy the simplicity of Javascript.
 

Granadier

Is currently on Stage 1: Denial regarding the service game future
Jetbrains owns me. I can't think of using anything outside of their ecosystem. Their editors are sooooooooo damn good. And plugins make them work with just about everything on the planet.

Their strategy of giving out their editors for free to students is genius.
 

Daffy Duck

Member
Jetbrains owns me. I can't think of using anything outside of their ecosystem. Their editors are sooooooooo damn good. And plugins make them work with just about everything on the planet.

Their strategy of giving out their editors for free to students is genius.

True that, I moved to PHP Storm last year and haven't looked back. It's brilliant.
 

ferr

Member
Jetbrains owns me. I can't think of using anything outside of their ecosystem. Their editors are sooooooooo damn good. And plugins make them work with just about everything on the planet.

Their strategy of giving out their editors for free to students is genius.

Have you used Visual Studio before to compare with? I've been thinking of trying out Webstorm for web dev stuff, been a VS user for 15+ years, though. I'd imagine with the right plugins both IDEs could support the same features, however I'm sure execution of said features might be vastly different. i.e. code completion for JavaScript libraries might exist in both, but might be slower in Webstorm -- and honestly it comes down to little things for me, like being able to hit space, semi-colon, tab, etc to complete a code completion suggestion..
 

Pixeluh

Member
Sorry again for the newb/beginner questions. : (

How long before html and css clicked for you guys? I'm going through a couple of books to try and get a solid foundation for it. I did code-academy but it feels like it didn't really help.

Most people seem to recommend making your own websites + googling everything, but even making a simple page is a huge hurdle to me. Any tips?

I personally want to get a solid track of studying for 6mo - 1 yr to be able to get a front end dev job at some point. I'm gonna try to learn HTML/CSS/JS.
 
Sorry again for the newb/beginner questions. : (

How long before html and css clicked for you guys? I'm going through a couple of books to try and get a solid foundation for it. I did code-academy but it feels like it didn't really help.

Most people seem to recommend making your own websites + googling everything, but even making a simple page is a huge hurdle to me. Any tips?

I personally want to get a solid track of studying for 6mo - 1 yr to be able to get a front end dev job at some point. I'm gonna try to learn HTML/CSS/JS.

I did Flex (Flash Desktop Applications) for 2 years before going to Web Dev... the coding stuff certainly "clicked" at some point for me on the Flex thing, but the web dev thing has been more of an constant progress for. I learn and try to learn new stuff every day. Surely doing other similar stuff helped but in this field there is just so much to figure out.

I wouldn't say that 6 months of very active studying and creating so that you can land a job in that time frame is impossible, but it will be hard if you don't have any previous experience. Check out the last few pages of this topic, there has been many similar questions with many good answers. Most of all, start small, learn the ropes the hard way, use proper tools and methods.
 

ferr

Member
I did Flex (Flash Desktop Applications) for 2 years before going to Web Dev... the coding stuff certainly "clicked" at some point for me on the Flex thing, but the web dev thing has been more of an constant progress for. I learn and try to learn new stuff every day. Surely doing other similar stuff helped but in this field there is just so much to figure out.

I wouldn't say that 6 months of very active studying and creating so that you can land a job in that time frame is impossible, but it will be hard if you don't have any previous experience. Check out the last few pages of this topic, there has been many similar questions with many good answers. Most of all, start small, learn the ropes the hard way, use proper tools and methods.

Definitely hard question to answer as I'm sure a lot of programmers have at least some basic web dev experience from HS/College classes, but may have been a desktop app developer for 10 years before getting into web dev -- and that web dev knowledge was bound to grow prior to the switch.

Personally, I think learning by doing is the best way to go for programmers. And getting a cert is a good way to force yourself to learn something. I can say that I built my first website and wrote my first javascript in the 90s, but as someone that ended up as a desktop app developer, html/css/js didn't click for me until I spent time getting a cert that involved an exam on html/css/js (microsoft's mcsd exam).

That said, I only had to study for 2 weeks to pass that exam. It filled in the gaps like grout on tiles that had been slowly glued to my knowledge walls over the past 15 years. So for someone coming in fresh, don't expect to become one with the universe anytime soon -- but I really think passing an html/css/js cert exam would do wonders in building a good foundation in a very wide and deep field..
 
Most people seem to recommend making your own websites + googling everything, but even making a simple page is a huge hurdle to me. Any tips?

This is the only way I can learn anything. Start small and work your way up. Make a page about your cat or whatever and just keep adding stuff, then throw it all away and start over.
 

grmlin

Member
I did it the hard way: university. Web development was more a side effect, of course, but by far what I always had the most fun with!

Web development is all about practice, years of practice. The good thing is though, that you don't have to do it for years to get things done. It's more about the details that will drive you nuts, and and experienced developer with years of browser fighting background will fix in no time.


Have you used Visual Studio before to compare with? I've been thinking of trying out Webstorm for web dev stuff, been a VS user for 15+ years, though. I'd imagine with the right plugins both IDEs could support the same features, however I'm sure execution of said features might be vastly different. i.e. code completion for JavaScript libraries might exist in both, but might be slower in Webstorm -- and honestly it comes down to little things for me, like being able to hit space, semi-colon, tab, etc to complete a code completion suggestion..

I used VS for some time when we developed a Windows Store App with WinJS. I didn't like VS very much. Maybe it's because I'm so used to the Jetbrains stuff, but I always missed features and searched for replacements.

Webstorm/PHPStorm is awesome, they constantly add features for all the hyped webdev libraries etc. Code completion works for almost everything, HTML, JS, CSS, Sass, Less... the list is endless. Most of the time it works really well, JS of course, by it's nature, works good in some places, not so good in others.

Try it and give it some time (30 days are free anyway ;)), but after 15+ years using the same IDE it may be very hard to change.
 

Ikuu

Had his dog run over by Blizzard's CEO
I should probably give WebStorm another go, honestly I prefer Sublime as it looks better lol.
 

ferr

Member
they constantly add features for all the hyped webdev libraries etc.

This is what's kind of prodding me to check out webstorm. I'm sure that VS has plugins/whatever for this stuff, but it seems like Webstorm's focus on this area is much more keen. I'll have to try it out.
 

flyover

Member
Have you used Visual Studio before to compare with? I've been thinking of trying out Webstorm for web dev stuff, been a VS user for 15+ years, though. I'd imagine with the right plugins both IDEs could support the same features, however I'm sure execution of said features might be vastly different. i.e. code completion for JavaScript libraries might exist in both, but might be slower in Webstorm -- and honestly it comes down to little things for me, like being able to hit space, semi-colon, tab, etc to complete a code completion suggestion..

I use both, and I prefer WebStorm for any projects that aren't ASP.NET-specific. It's so good for JavaScript and CSS/SASS. And on my particular computer, it's a little faster (after its interminable startup) for most things. Or maybe I'm just a little faster when using it.

That said, when I'm doing legacy ASP.NET stuff at work, VS (or Notepad++ for quick-hit edits) is still the way to go.
 

Ghost

Chili Con Carnage!
I love Webstorm, so powerful, so configurable. Having things like Karma testing run whenever you save a file changed the way I work for good. It also just does simple things like proper javascript code complete so well, I started life as a Java developer and thought my days of easily navigating my code were over but I'm glad to say the good times are here again.

Every time I have to open eclipse for some legacy work i cry a little inside.

I have used Visual Studio for web stuff, that's pretty great too tbh, I was shocked the first time I opened it and it actually indexed all my JS & CSS, but you do lack the library plugins that webstorm has for seemingly everything you could ever want.

Its so cheap as well for what you get, I really can't recommend it highly enough.
 

Granadier

Is currently on Stage 1: Denial regarding the service game future
This is what's kind of prodding me to check out webstorm. I'm sure that VS has plugins/whatever for this stuff, but it seems like Webstorm's focus on this area is much more keen. I'll have to try it out.

For reference:

These are the JavaScript libraries I currently have installed.
And these are all the libraries available, (JetBrains allows community made libraries)
Note the scrollbar.

I've used Visual Studio in the past. We've been tied to a TFS server and .NET stack for a certain project for quite a while, so whenever I'm active on that I'm having to work through VS. It always feels like a pain compared to my comfort zone of JetBrains. To each his own though.

For reference my main dev box is a Mac. Parallels makes Windows+VS painless, but I thought I'd disclose that anyways.
 
Hey ya'll, newbie needs help :)

using Angular

Is there an easy way to parse through the text value of each item in the list...

http://codepen.io/Russbrown/pen/IgBuh

Also, i what do i use if i need to add a class to the <li> of the element?

What do you want to do with the parsed value? If it's to filter the list you could do that like

Code:
<input ng-model="search.text">
<li ng-repeat="todo in todos | filter:search:strict">

You can just add classes to a li or let angular do it
Code:
<li class="done" ng-repeat="todo in todos" ng-class="{done: todo.done}">
 

tubster68

Member
What do you want to do with the parsed value? If it's to filter the list you could do that like

Code:
<input ng-model="search.text">
<li ng-repeat="todo in todos | filter:search:strict">

You can just add classes to a li or let angular do it
Code:
<li class="done" ng-repeat="todo in todos" ng-class="{done: todo.done}">

Basically i want to make the list color coded depending on the category where the item belongs. I.E. if the item is BANANA, it is a fruit, so it'll be colored red. LETTUCE, is a veggie = green...

What I'm trying to do is parse through each items in the list, and see if it matches with another array containing words... If it matches, i want to add a class to the <li> or <span> of that item, so that the css can color code it...

Looking at ng-class but not really sure what to do with the condition cause i need to parse through an array...

Something like this?

<span ng-class= "('fruits': {{todo.text}} == '?????')" class="done-{{todo.done}}">{{todo.text}}</span>
 

Tathanen

Get Inside Her!
Basically i want to make the list color coded depending on the category where the item belongs. I.E. if the item is BANANA, it is a fruit, so it'll be colored red. LETTUCE, is a veggie = green...

What I'm trying to do is parse through each items in the list, and see if it matches with another array containing words... If it matches, i want to add a class to the <li> or <span> of that item, so that the css can color code it...

Looking at ng-class but not really sure what to do with the condition cause i need to parse through an array...

Something like this?

<span ng-class= "('fruits': {{todo.text}} == '?????')" class="done-{{todo.done}}">{{todo.text}}</span>

You have access to the items in the list you're iterating through. For example, you can do something like this:

Code:
<li ng-repeat="item in items" ng-class="{ 'highlight' : isInThatOtherArray( item.name ) }">{{ item.name }}<li>

Assuming isInThatOtherArray takes a string argument, looks in your array, and returns true/false if it's found. You could also reference the "item" object via any child elements, such as a span. It's available within the scope of the ng-repeat, to any children.
 

tubster68

Member
You have access to the items in the list you're iterating through. For example, you can do something like this:

Code:
<li ng-repeat="item in items" ng-class="{ 'highlight' : isInThatOtherArray( item.name ) }">{{ item.name }}<li>

Assuming isInThatOtherArray takes a string argument, looks in your array, and returns true/false if it's found. You could also reference the "item" object via any child elements, such as a span. It's available within the scope of the ng-repeat, to any children.

I'm missing something. Am i doing it right?

HTML

<span ng-class="{'fruits': Fruits({{todo.text}})}"class="done-{{todo.done}}">{{todo.text}}</span>

JS

var food = ["BANANA","APPLE"];
var len = food.length;
for (var i=0;i<len;i++){
food.push(food.toLowerCase());
// $scope.todos.push({text:food, done:false});
}
function Fruits(item){
var exist = ["BANANA", "APPLE"];
if (exist.indexOf(item) != -1){
return true;
}
}

I tried using fiddle, but its giving me an error whenever i add something...

https://jsfiddle.net/13ebfhwc/
 

Tathanen

Get Inside Her!
I'm missing something. Am i doing it right?

HTML

<span ng-class="{'fruits': Fruits({{todo.text}})}"class="done-{{todo.done}}">{{todo.text}}</span>

JS

var food = ["BANANA","APPLE"];
var len = food.length;
for (var i=0;i<len;i++){
food.push(food.toLowerCase());
// $scope.todos.push({text:food, done:false});
}
function Fruits(item){
var exist = ["BANANA", "APPLE"];
if (exist.indexOf(item) != -1){
return true;
}
}

I tried using fiddle, but its giving me an error whenever i add something...

https://jsfiddle.net/13ebfhwc/


Can't check the fiddle right now but you don't need the {{ }} around todo.text in your ng-class. You're also pushing the food into the source array, which accomplishes nothing. Use the line you have commented out instead. And don't make the words lowercase unless you do that in your Fruits function as well. You also need to initialize $scope.todos as an array before pushing to it.
 
This is what's kind of prodding me to check out webstorm. I'm sure that VS has plugins/whatever for this stuff, but it seems like Webstorm's focus on this area is much more keen. I'll have to try it out.

I may be wrong, but I believe that RubyMine is a superset of WebStorm, so if you ever want to do RoR, I would consider RubyMine instead. It's only $9 more so (shrug)

I should probably give WebStorm another go, honestly I prefer Sublime as it looks better lol.

WebStorm has community created themes/color schemes, so you can likely find something you like.
 

Granadier

Is currently on Stage 1: Denial regarding the service game future
How do you guys handle an ng-repeat that is pulling data from a MongoDB source?

As in, do you do an API call on page load, then ng-repeat on the returned JSON object?

I'm somewhat lost trying to get list of data from my database populated onto the page.
 
Top Bottom