Correct. See my edit. I misread his original comment.
-
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
- Thread starter gutshot
- Start date
Correct. See my edit. I misread his original comment.
PetriP-TNT
Member
I think that in year 2015 lacking even the basic understanding of JavaScript will severely gimp your abilities as a web developer and even as web designer. Of course you can just develop and design static sites, but the demand might be pretty low for that. Sure you can design your sites in Photoshop or Illustrator too, but the tooling has evolved so much that it's becoming more and more unnecessary if you have the front-end skills to complement that.
Why does JavaScript seem boring to you @Pixeluh? There's much much more to JavaScript than your basic Code Academy course will teach you, but then again you are pretty lost with the bigger picture if you don't learn the basics first.
Even if you worked in a team where say you do the visible parts and someone else does all the scripting, it will still help both of you immensely if you both know what you can and cannot do with. Designing a nice looking concept on paper is nothing if it's not reasonable in implementation phase.
Why does JavaScript seem boring to you @Pixeluh? There's much much more to JavaScript than your basic Code Academy course will teach you, but then again you are pretty lost with the bigger picture if you don't learn the basics first.
Even if you worked in a team where say you do the visible parts and someone else does all the scripting, it will still help both of you immensely if you both know what you can and cannot do with. Designing a nice looking concept on paper is nothing if it's not reasonable in implementation phase.
Treechopper
Member
Well, in the case of my roommate he doesn't necessarily hate Javascript; he just feels like there's no good way to learn it on your own outside of the basics on Codecademy. I think he has Eloquent Javascript, but he doesn't know what projects to build to grow and challenge himself
It's hard for me to understand, which is why I'm not enjoying it.
When I try to read through some books or such, it's becomes such a headache. I'll probably just try and go through a couple of books anyways. I guess everyone has a beginner's hurdle at some point over something. PetriP-TNT
Member
It's hard for me to understand, which is why I'm not enjoying it.
Well that I can understand. I guess it will click with you at some point, at least when you notice that some things you can just do much more easier with JavaScript than without. But yeah, the first steps might be tough especially if you haven't coded before.
I don't know if it will help your motivation or not, but here's a random cool thing you can do with JavaScript: remaking the intro from the movie "Birdman" with JavaScript: http://markmarkoh.com/birdman/
overflow: hidden would help so much with that site.
Very cool though, and it highlights a lot of the awesome things you can do with JavaScript.
I can only speak for myself, but I found the most effective way to learn for me was to just build random crap sites that relied on JavaScript.
Like I made a browser whiteboard, and then a Spotify search page using their API and AJAX calls, among others. And whenever I wanted to solve a programming problem I would try to do it in JavaScript first.
This is easier said than done, at least for me. I am also struggling getting my head wrapped around JavaScript.
Before you can just 'learn' from building or recreating sites using JavaScript, you have to have some basic understanding of logic.
I think of JavaScript as a set of plugs you have to connect to your html/css to 'power them Jo's, this has helped my understanding a little to put together scripts that do what I need. And has also helped on how to read them.
But I am still very basic.
Sites like Treehouse, Codecademy don't work for me. You're doing stuff but WHY? What does it do? You're just going through the motions getting achievements...blah.
It doesn't discourage me at all though as I am in this for the long haul. I am currently in school for development. But is one of those accelerated courses. 6 quarters, 10 weeks at a time and it moves fast.
I'm a slow learner lol.
I like the things that JS can do! I really enjoy going over to codepen as well and seeing what people can create with html/css/JS. Thanks for the link, I'll be checking it out.
Are back languages fun? I haven't touched or read much about them. I'm still a complete noob to all of this.
PetriP-TNT
Member
Depends on the language... I hate some and love some. I love modern JavaScript because you can rock it in the front and in the back, kinda like a mullet.
Javascript is the language I love and write everyday, so I'm a little biased
I read a lot of books. I think it's important to start with the very beginnings/fundamentals of Javascript so you will understand all the fancy new stuff that was added in the last years.
A book I like a lot is Crockford's bible »JavaScript: The Good Parts«. It may be a little outdated in places (because of javascripts evolution the last years) but is still full with important basics.
Basic programming books may be a good idea, too. Better not to end in a big pot of spaghetti code
What's great about javascript is the range of things you can do with it. Enhance websites, build [web|mobile|server]apps, games. 3D, program hardware... possibilities are endless.
Btw.: there is still room for HTML/CSS devs out there, but I think there will be no webpage in 2015 anymore, that works without js. And with frameworks like Angular/React etc. it's really hard to avoid the js in a project, you will always get in touch with it.
Not everyone has to be a js developer, as not everyone has to be a css wizard, but without any knowledge and basic understanding of it your life as a modern web developer may be pretty complicated.
I read a lot of books. I think it's important to start with the very beginnings/fundamentals of Javascript so you will understand all the fancy new stuff that was added in the last years.
A book I like a lot is Crockford's bible »JavaScript: The Good Parts«. It may be a little outdated in places (because of javascripts evolution the last years) but is still full with important basics.
Basic programming books may be a good idea, too. Better not to end in a big pot of spaghetti code
What's great about javascript is the range of things you can do with it. Enhance websites, build [web|mobile|server]apps, games. 3D, program hardware... possibilities are endless.
Btw.: there is still room for HTML/CSS devs out there, but I think there will be no webpage in 2015 anymore, that works without js. And with frameworks like Angular/React etc. it's really hard to avoid the js in a project, you will always get in touch with it.
Not everyone has to be a js developer, as not everyone has to be a css wizard, but without any knowledge and basic understanding of it your life as a modern web developer may be pretty complicated.
talisayNon
Member
new job i started this month has all pretty much been backend .Net with no JS. It's been a nice change of pace. I forgot how much easier it is to strictly code in c# =)
Codecademy was where I started. That quickly got boring though because it was just "do this because reasons" like you mentioned.
I transitioned into making my own stuff by just getting an idea and then Googling/reading until I could actually make it.
Thanks for replying. Did that work? Just googling around? I figure though, a lot of developers are self taught.
I Google around too, I think the most valuable skills are being resourceful, understanding logic, and being creative.
It did. The tactic might not work for everyone. I end up just thinking of ideas or things I'd like to make and then Googling around for information about how to make that thing.
Something that helps a lot is to break the idea/problem into smaller bits. Then each piece can be researched to learn how to accomplish it, eventually allowing all of the pieces to be put together into something that hopefully functions.
I use React, it's awesome! I needed some time to adapt to the new style of coding with it, but now it feels great. (using a flux application structure)
Have fun
React is so hot right now.
I love reading about all the new fancy things people use that they'll replace in 6 months.
also, Google just released something called foam
"FOAM is a full-stack, reactive, deeply MVC metaprogramming Javascript framework."
excuse me while I blow my brains out.
if your friend still hates JS I would honestly advise you stay as far away from what's hot right now and make some browser extensions or something. Learn the language because there's some good things in there.
I love reading about all the new fancy things people use that they'll replace in 6 months.
also, Google just released something called foam
"FOAM is a full-stack, reactive, deeply MVC metaprogramming Javascript framework."
excuse me while I blow my brains out.
if your friend still hates JS I would honestly advise you stay as far away from what's hot right now and make some browser extensions or something. Learn the language because there's some good things in there.
I'm coming into a company where some of the development was outsourced to an agency. A lot of it is too entrenched for me to turn around before the launch date. Otherwise I'd just be happy with Node and vanilla or Jquery.
kylebarker
Member
I have a question I recently started developing in JavaScript/Jquery. I have had prior XP with the language yet it was a two lecture dabble in my Web Dev class.
My question is I can I add a string of text to an already existence text, yet I desire to add the added text at the back of the string that is already present.
Illustration: "<existing text>"There goes the guy................Nchracter"
I have added the extra text with the (.append) function yet it is added to the front of the existing text.
Illustration1: <added text>"How goes there"---- "<existing text>"There goes the guy................Nchracter"
So, do I have to write a custom function to read the text of the existing string to see where the last character exist and then add the append text after it. Or is there any native function to the libraries that could help me.
Thanks, Web GAF
My question is I can I add a string of text to an already existence text, yet I desire to add the added text at the back of the string that is already present.
Illustration: "<existing text>"There goes the guy................Nchracter"
I have added the extra text with the (.append) function yet it is added to the front of the existing text.
Illustration1: <added text>"How goes there"---- "<existing text>"There goes the guy................Nchracter"
So, do I have to write a custom function to read the text of the existing string to see where the last character exist and then add the append text after it. Or is there any native function to the libraries that could help me.
Thanks, Web GAF
.append() can definitely be used to add text to an element. It should append to the back of the string by default as well. If you post a code snippet of where you are getting the wrong functionality we might be able to help out more.
In the mean time, here is an example I just made showing the .append() function in action.
http://codepen.io/alexpersian/pen/QbwmmN
Press the button more than once for the funnies.
PetriP-TNT
Member
I find it funny that the new MS browser is called Edge.
IE=Edge, get it?
IE=Edge, get it?
DUFFMCWALIN
Member
Ya thats gross.
I have an error I haven't been able to figure out (yet). This is a mixture of JS and C# so I didn't know which programming thread to post it in. I'm getting an error that one of my JS functions is not defined. The problem is that is in a JS bundle and is dynamically added to a page via C#. The thing I can't figure out is that Chrome is giving the error location of VM7106:1. I have no clue where that is. If anyone has any idea what that means let me know please. I'm off to hunt through Google and figure it out.
edit: VM... seems like some JS file that Chrome generates but I'm not sure why.
edit2: Nevermind it was CoffeeScript mangling my JS. Bah.
That's amazing lmao
Sent them a counter offer with explanation and haven't heard a thing for days. Probably for the best if they were willing to offer that to an actual person. It seemed like a great shop though beforehand.
Trying to redesign my personal website landing page, would appreciate some guidance.
If I want to divide it into something like this
Is this what Flexbox would be best at? Or should I be trying divs everywhere and try to make the boxes responsive.
If I want to divide it into something like this
Where they are divided perfectly and change into 4 boxes vertically if viewed on small screens.
Is this what Flexbox would be best at? Or should I be trying divs everywhere and try to make the boxes responsive.
Flexbox is probably what you are looking for. You could do the same with responsive <div>'s in a grid/column, but flexbox would be cleaner I think.
Here's a good writeup with an example towards the bottom that's damn near exactly what you want. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Yeah it seems to be a good solution. A bit annoyed by some of the browsers support from IE and Safari.
Treechopper
Member
Thinking about getting a Raspberry Pi to run my personal site. Is this a good solution since I'm not expecting lots of traffic or should I look into website hosting solutions instead? If the Pi route is fine, what software do I absolutely need? Trying to keep things as minimal as possible.
I would just go with a $5/mo Digital Ocean or $10/mo Linode VPS if you can afford it. Very reliable and super simple.
If you are a student you can get I believe 100 dollars credit from Digital Ocean with Github student pack. You can get a lot of free months to host your website this way.
Or you can just use Github Pages if you don't expect to run any server side code.
Damn, that's a great deal. Good point, I didn't even consider something like Github Pages for a small static site.
The hosting solutions are great, but your Rasp Pi would be perfect for hosting. In fact my coworker hosts his personal site on his Pi with a CMS that he built himself. It's perfectly capable for hosting!
Personally I use GitHub pages for my main site, and DigitalOcean for hosting my blog that runs on Ghost.
If it gives you confidence they did a study around the biggest tech companies in silicon valley and found that 47% of software developers are self taught. It might take time (or it might click for you and you're doing crazy ish in like 5 months) but don't give up!
I'm a rails developer, haven't messed with React much.
Treechopper
Member
These are really cool options and I will definitely look into them. I liked the idea of having it local though so I can maintain everything myself. I'm really comfortable with Windows/Linux command line and just completed a networking class so I figured the next step in learning was taking control of my website instead of using Weebly.
Hmmm...now that I think about it, I'm running several resources on my page as blog posts but they could easily be static pages. Might make the Github offer more tempting.
Flexbox seems to do the task I wanted fine. Took very little code to get it to do it after some small fuck ups with understanding flex layout.
Now time to rack my brain for some good sense of design to add to the boxes.
Now time to rack my brain for some good sense of design to add to the boxes.
PetriP-TNT
Member
How about
with something like Jekyll? (http://jekyllrb.com/). If your blog is running on Wordpress or similar, you might even be able to automatically import all your content with jekyll-import.
Treechopper
Member
I was talking with a friend last night that recommended that. Probably the easiest route. Anything else I should consider essential?
Well,
static site generation is covered for you by a lot of systems.
Have a look here https://staticsitegenerators.net or here https://www.staticgen.com
static site generation is covered for you by a lot of systems.
Have a look here https://staticsitegenerators.net or here https://www.staticgen.com
PetriP-TNT
Member
I haven't used Jekyll as blogging platform very much, but I do use it to as a documentation platform but here are some of my experiences:
- Installation is very simple, but on Windows you need to take few extra steps: see http://jekyll-windows.juthilo.com/
- If you haven't used Ruby before, you might need to learn few Ruby-isms if you want to get in-depth with some of the stuff. That said, if you are familiar with modern web design and development tooling (such as package managers and using templates), you'll get hang of it pretty quickly
- If your blog contains code, I prefer Rouge (https://github.com/jneen/rouge) over Pygments for syntax highlighting
- If you haven't learned to write Markdown yet, now is the time (it's very simple anyway)
- The Jekyll site contains lots of information so it's worth checking out
WanderingWind
Mecklemore Is My Favorite Wrapper
Why are simple text sliders so gorramn difficult?? Today, I made a really kick ass content slider that could hold an iframe'd before/after image slider in it. Took a good part of the day (it works on my server, but completely borks out when I put it up on the company page). That's not the real point, though.
After I got that part to sort of function, I thought I would quickly knock out a text slider with a thumbnail pager vertically on the left. I good lord, that took way too long and I'm still not close to having anything functional.
It's always the small things that trip you up. Well, and the big things for me, but that's to be expected.
After I got that part to sort of function, I thought I would quickly knock out a text slider with a thumbnail pager vertically on the left. I good lord, that took way too long and I'm still not close to having anything functional.
It's always the small things that trip you up. Well, and the big things for me, but that's to be expected.
Treechopper
Member
Well,
static site generation is covered for you by a lot of systems.
Have a look here https://staticsitegenerators.net or here https://www.staticgen.com
Holy cow, those are huge lists lol. Thanks for the rundown PetriP-TNT!
WanderingWind
Mecklemore Is My Favorite Wrapper
Can anybody explain to me why a DIV with a height="100%;" doesn't work when the content inside is text? I can put a background image or color and it holds shape, but without that, the box collapses with just a <p>Lorem ipum</p>
What am I missing here?
What am I missing here?
schlongdog
Banned
Ok, so I'm trying to do something really simple but it won't work and it's driving me crazy.
All I want to do, is display a different image when the user mousesover the current image.
So,
Is the code in my JS file. Help me out here please someone, it's driving me crazy.
All I want to do, is display a different image when the user mousesover the current image.
So,
is my code on the HTML page.
Is the code in my JS file. Help me out here please someone, it's driving me crazy.
jQuery solution:
Vanilla JavaScript solution:
and here's a pen with it in action!
http://codepen.io/alexpersian/pen/yNNzNR
Code:
// Called when mouse enters the element
$('#large').mouseover(function() {
$(this).attr('src', 'Images/largepalm.jpg');
});
// Called once the mouse leaves the element
$('#large').mouseout(function() {
$(this).attr('src', 'Images/palm.jpg')
});Vanilla JavaScript solution:
Code:
// Called when mouse enters the element
document.getElementById('large').addEventListener('mouseover', function() {
this.src = 'Images/largepalm.jpg';
});
// Called once the mouse leaves the element
document.getElementById('large').addEventListener('mouseout', function() {
this.src = 'Images/palm.jpg';
});and here's a pen with it in action!
http://codepen.io/alexpersian/pen/yNNzNR
Sure can. I feel more comfortable separating my logic from my structure though.
HTML
Code:
<img src='Images/palm.jpg' id="large" alt="palm"
onmouseover="document.getElementById('large').src='Images/largepalm.jpg'"
onmouseout="document.getElementById('large').src='Images/palm.jpg'"
>PetriP-TNT
Member
You can just refer to the element itself with "this" to make it even tighter
Code:
<img src='http://i.imgur.com/m7DCgSP.png' id="large" alt="palm"
onmouseover="this.src='http://i.imgur.com/PYJNmCb.jpg'"
onmouseout="this.src='http://i.imgur.com/m7DCgSP.png'"
>I'd most likely just do it with background-images
http://codepen.io/anon/pen/WvvdGo