I'll add my reply from your thread here, as we are in the same boat and I could really use the advice as well.
-
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
I'll add my reply from your thread here, as we are in the same boat and I could really use the advice as well.
I'm trying to decouple stuff as much as I can in a Socket.io client environment and it seems I'm kinda missing the easiest solution, so here's a quick question.
Let's say in my app/index.js file io have a Socket.io connection callback, that contains the entire app code:
If I want the user.changeName() function to emit a message to the Socket.io server, something like:
what would be the ideal way to pass io to the function, considering that the function could also be nested in other functions or called from other classes?
At first I thought to simply pass io to the constructor, creating a this.io property, but then I realized I was doing it on all the classes, and it seems quite stupid to have a billion io objects spawning around the app (I even got a maximum stack call size exceeded error for the first time in my life!
).
So my current idea is to make the io object global and/or externalize it to a module, but there, well I don't know how I should/could do it, considering that I'd need to export it only after it connected to the server.
Damn, I feel the solution is a super obvious one and I'm totally dumb for not seeing it clearly.
Let's say in my app/index.js file io have a Socket.io connection callback, that contains the entire app code:
Code:
import socket from 'socket.io-client';
const io = socket.connect(window.location.host, { reconnect: true });
import User from './User';
io.on('connect', () => {
// here goes all the application
const user = new User();
user.changeName('new username');
});If I want the user.changeName() function to emit a message to the Socket.io server, something like:
Code:
io.emit('change user name', { name: newName });what would be the ideal way to pass io to the function, considering that the function could also be nested in other functions or called from other classes?
At first I thought to simply pass io to the constructor, creating a this.io property, but then I realized I was doing it on all the classes, and it seems quite stupid to have a billion io objects spawning around the app (I even got a maximum stack call size exceeded error for the first time in my life!
).So my current idea is to make the io object global and/or externalize it to a module, but there, well I don't know how I should/could do it, considering that I'd need to export it only after it connected to the server.
Damn, I feel the solution is a super obvious one and I'm totally dumb for not seeing it clearly.
I would probably put the socket.io logic into a separate file and write some adapter/wrapper around it.
something like:
index.js
and later do
something like:
index.js
Code:
import api from './api';
import User from './User';
api.connect().then(() => {
const user = new User();
user.changeName('new username');
});and later do
Code:
import api from './api';
import * as eventTypes from './eventTypes';
api.emit(eventTypes.CHANGE_USER_NAME, { name: newName });Ah, a sort of thing that takes care of all the communications between client and server?
Ie.
user.changeName() pubs the new name, the "event dispatcher" class subs to it and emits the change to the server.
It makes plenty of sense, even tho I liked having the entire handling changeName inside the User class, including the Socket.io ack callbacks and whatnot.
Oh well, time to add another couple of layers to, say, promisize Socket.io like you did!
For sure. It was my first instinct, to keep it small and neat looking, normal size text on a small screen seemed bloated.
I've realised it's about designing specifically for the devices/screen size, mobile specifically, instead of just shrinking down what your desktop does.
My mobile build will specific, I have some ideas how to make the design fit with the device.
Thanks for the advice.
I get all of that. I sometimes even wake up at night with the urge to implement a fix/design I just dreamt up and have to force myself back to sleep. Other times I just burn out and need to tell myself to quit and let my processes process.
I've not had this much fun in years. I used to game for hours a day, but like I said earlier in the thread I haven't even touched one since I started coding. This is my new uptime and downtime.
It's something I always do. I like to have my api calls in one place. Error handling, setting headers and all this can be easily found in one place this way. And it's very easy to change the library/framework for the ajax/socket handling later.
If you want to use the socket.io api instead you can of course do so. Just open the connection and store it as a singleton for the rest of your app.
esmith08734
Member
Just wanted to tell you that the website you built is quite elegant.
esmith08734
Member
Thanks for the advice in this thread. I was wondering, what type of computer do you guys all use?
I prefer Macs but I am using a MacBook Air with 4GB of RAM and I am really seeing some downsides. I have Android Studio, Brackets, and just a few basic applications running and constantly at about 3.5 RAM used. Once I open Photoshop, forget it, lol.
I prefer Macs but I am using a MacBook Air with 4GB of RAM and I am really seeing some downsides. I have Android Studio, Brackets, and just a few basic applications running and constantly at about 3.5 RAM used. Once I open Photoshop, forget it, lol.
MacBook Pro 15. Very powerful and all in all an awesome piece of hardware
esmith08734
Member
8GB or 16GB of RAM?
I am seriously looking into upgrading? I really wish Apple made that 12 inch Macbook in 14 inches.
I've just started my foray into Web Development but I have a 2010 MacBook Pro. It ran well for the most time until last year. This is when I decided to replace the hard drive with an SSD and upgrade the ram to 8GB. I think the SSD made the most difference, but the RAM upgrade was cheap so I went with it. It has no problem running Chrome now.
esmith08734
Member
Oh, yeah, you got one of the better MacBooks so you can upgrade yourself. I have one of the iterations that doesn't let you upgrade. Plus, I am using a 13 inch, and I am really seeing the limitations of it right now. Really unfortunate.
The 15" retina always comes with 16GB of ram I think. I used a 15" i5 mid 2010 or 11 with an SSD and 8GB ram before and it was fine, too.
The ultrabook CPUs simply are not powerful enough imho
Thanks very much. I put a lot of effort into studying design basics/refining the design. Learning about typography and text layout gave me one of the biggest boosts.
It's come a long way since this.
Man angular's form validation is garbage. I created a directive that adds a datepicker but because this programmatically sets the textbox angular's validation is completely oblivious. So I figure I'll just manually trigger a change when it does change. Nope. After a few hours my solution was to manually set the validity state (because the datepicker should always be a valid format) and then I have to check the ng-model, reach into the scope and manually set that too. You're black magic is terrible angular.
WanderingWind
Mecklemore Is My Favorite Wrapper
I want to out my head through a wall learning this JavaScript. No wonder JQuery took off. So much code to do the most simple shit imaginable. I'm thinking of skipping over the basic lessons to start tackling projects directly and just going back to references as needed. If I have to listen to this guy drone on about sending random numbers to the console - something nobody has ever needed to do ever - one more time, I'm going to quit and join the Amish.
I'm on a Dell XPS 13 9530. It's absolutely stellar. I use my ipad next to it to research while i build, so the smaller screen isn't an issue.
Runs everything without a hitch, Phostoshop and a dozen projects open. Highly recommended to anyone looking for a windows machine.
Look at job specs and find tech/skills you don't have that companies are looking for. You can learn how to use stuff like CSS preprocessor (SASS, LESS) or build tools (Gulp, Grunt) in like an hour and put it on your CV and be able to tell employers about it.
I'd also learn React + Redux and make some stuff.
That's how I learn everything to be honest. If you try to sit through a bunch of lectures before touching anything then nothing is going to stick and you're going to be bored af.
WanderingWind
Mecklemore Is My Favorite Wrapper
I was doing that. I can still do that. But see, this is like, 10 percent job related and 90 percent hobby. I know how to plug in some open source JS, or use a JQuery/Angular plugin. But I was running into problems where I wanted to do something off script and not understanding what I was looking at enough to be able to rewrite it.
Basically, I jumped into playing Dark Souls without knowing how to hold a controller. But learning to hold the controller is some garbage. I think I need to space it out. Do some basics, go through a project, go back to a basic, etc.
WanderingWind
Mecklemore Is My Favorite Wrapper
I'm balls deep in Duckett's book and Eloquent JavaScript. I have the materials, I'm mostly just venting right now about how pointless some of the crap is I'm learning right now. For instance using Math.floor to generate a random number. I will never in my life need to use that I'm sure. I'm sure it'll be of use soon enough. But I think I just need to take a breather and do something with a tangible result.
This is my problem with everything I've learned in JS thus far. None of it seems to apply to the web, it's all programming basics which I already understand. I can code algorithms all day long, but what the hell do I do with JS for websites? When do I stop using the console and start building user experience?
because "why should I know how JS works when I use a JS framework?"
I don't know about the Math.floor stuff, I would skip that too, probably, but a JS developer should know how JS works.
If you don't care for this, sure, go for it. There are tons of web developers who use jQuery all day and have no idea about JS itself.
Yeah I have no interest in learning frameworks until I actually understand what I can do with JS first, and it's one of the main reasons I haven't even looked at JQuery for more than what free code camp taught me of it. It's just a bummer that I cannot find anything in all of my learning materials that applies outside of the console. I want to start making horrendous animations on my web pages! I do have eloquent and from what I've read of the ToC it seems like it gets into ux stuff later on, so I will start working through that.
It's good to learn JavaScript, it makes you a better developer when you understand the fundamentals. If you find that boring, then stick to frameworks, but, if you want to truly understand programming, it means learning the boring stuff and building a strong foundation. The more you know, the better you are at solving problems.
Eloquent JS is such a good book because it's teaching you computer programming concepts. But if all you ever want to do is make fancy effects on the webpage then maybe you don't need to know all the computer science of programming and can just use jQuery instead.
Edit: just wanted to note this isn't directed at anyone in particular. Just saw the discussion going on and wanted to give my input. I think jQuery is great and use it and other JS Libraries all the time to help keep up with deadlines, but knowing the fundamentals of JS helps me a lot.
I got a 2015 15" Retina Macbook and can also say that it's a great piece of hardware. It may be kinda old looking compared to all the other fancy hardware that has come out recently, but it's a really solid device that serves me well. It's also definitely hefty compared to 13" Pro, but, the 16GB base RAM and 256GB SSD and more powerful CPU make the extra weight worth it... not to mention the screen is amazing looking. For anyone looking to get one, Apple refurbished store is the way to go. You save a good bit of money. Got my machine for around $1700. Best purchase I've made in a long time.
Eloquent JS is such a good book because it's teaching you computer programming concepts. But if all you ever want to do is make fancy effects on the webpage then maybe you don't need to know all the computer science of programming and can just use jQuery instead.
Edit: just wanted to note this isn't directed at anyone in particular. Just saw the discussion going on and wanted to give my input. I think jQuery is great and use it and other JS Libraries all the time to help keep up with deadlines, but knowing the fundamentals of JS helps me a lot.
I got a 2015 15" Retina Macbook and can also say that it's a great piece of hardware. It may be kinda old looking compared to all the other fancy hardware that has come out recently, but it's a really solid device that serves me well. It's also definitely hefty compared to 13" Pro, but, the 16GB base RAM and 256GB SSD and more powerful CPU make the extra weight worth it... not to mention the screen is amazing looking. For anyone looking to get one, Apple refurbished store is the way to go. You save a good bit of money. Got my machine for around $1700. Best purchase I've made in a long time.
esmith08734
Member
What do you all think of this color choice thus far?
CSS:
http://pastebin.com/aNy36W0e
HTML:
http://pastebin.com/E56ep2qw
CSS:
http://pastebin.com/aNy36W0e
HTML:
http://pastebin.com/E56ep2qw
Just decided to skip my remaining lessons in JS from freeCodeCamp and go straight to the basic algorithm challenges. These things are awesome, and way less hand holdy. I've done 6 of them very quickly and easily only having to lookup a few things. I need to take a break, but I plan on finishing them tonight if they don't get harder.
esmith08734
Member
How is FreeCodeCamp?
It's a lot like codecademy, but more community driven. It has a built in chat and apparently offers work on nonprofit projects. I have gotten to the end of the javascript basics and it doesn't teach anything super useful. But the stuff after this first basic algorithm scripting section looks promising.
If you're using something like codecademy, I'd recommend it just because of the community aspects.
So it's funny that you guys are bringing up all these issues about learning since my friend is trying to fix those same issues that everyone seems to have when they learn how to code. And this is coming from the guy who wrote the annotated version of Eloquent JS. Anyway I'm actually consulting on his upcoming course and he's trying to fix the issue of knowing JS concepts but not having any idea how to use them in practice.
The course is early access so like a early access steam game except the main course is free. He's trying to update with new videos every day or at the very least weekly. And he'll have optional premium content.
I've mentioned it before but I have taken his angular course and thanks to that I may be on the verge of a dev job despite having no degree or bootcamp experience.
If you guys wanna check it out it's here practicaljavascript.net. And if you guys have any feedback lmk or you can email him.
The course is early access so like a early access steam game except the main course is free. He's trying to update with new videos every day or at the very least weekly. And he'll have optional premium content.
I've mentioned it before but I have taken his angular course and thanks to that I may be on the verge of a dev job despite having no degree or bootcamp experience.
If you guys wanna check it out it's here practicaljavascript.net. And if you guys have any feedback lmk or you can email him.
Thanks for the heads up, I signed up and will keep an eye out for updates.
oh wow, he's using a F2P model with an online course, interesting idea. Love that all the core content will be free.
Yeah he wants to make the course as accessible as possible. When he first told me about it I was like huh I've never seen F2P system used for an online course.
Btw I just noticed the OP has his angular course listed under the Learning category lol.
Well I hit the limit on his content, but I did decide to start building what he built for the console into actual html/javascript. It's not pretty but I think it's not too shabby for literally the first thing I've ever built for a web browser in JS.
http://codepen.io/chadmcartier/pen/MyEPbV
Learning by doing isn't so bad. Google, and especially stack overflow results are a godsend. I need to figure out a way to detect which X button is pressed, and then find the content from that list item, and then splice it out of the array. I have no idea how to do any of that, but I'm sure I can figure it out after enough searching and a decent break.
Wow, tweeted it to Gordon, and he responded instantly. Took the time to actually look at and improve the code a little bit. This guy is alright!
It's lacking UX. It's similar to Codecademy which I don't like. Reason because nothing really sticks with that way of learning. There are algorithm sections that I think you get more meat out of it all.
The community is what sets it apart.
You should put these in codepen or jsfiddle. Kinda hard to tell the colours just from the hex codes.
They're a little clash-y.
There are a few ways I like to handle colours. I often start with simple complimentary, so for you're background this blue would be one.
From there, you can tweak the colours a little in the directions you want, but you have a good base.
There are other ways too, like Triad colours (colours that are evenly spread out on the colour wheel), Compound, etc..
Here's an example of a blue/green from your background's compound colour selection.
There are tools like Adobe's Color Wheel that allow you to play around with the various schemes.
-
I set up your code on JSfiddle, it's a great tool that you can use to share snippets of code. I actually sometimes use it to design individual elements like image overlays or buttons as it offers almost an instant visual update any time you want to check your code.
I once almost built an entire page using the site, but it's probably not best practise for a variety of reasons.
Well, I wanted to make two wells for the purposes of having them stay responsive. But if your second method works, that should work for me. I'll just have to comment in that I want to keep them on a 2 <div> ratio per "block" to keep them responsive. It's dirty and quick, but it gets the method done.
But honestly, I just wanted to "measure" the well size and have the image fit from border left to border right and then make the height something like 200-400pixels for each image to fit within the well. But I guess ther'es no internal/external pixel measuring for sizing since that won't be the same on all monitors. Blech. :/
It's still a work in progress. They changed up some of the order of the lessons (before I finished the beginner Javascript stuff the Portfolio and "Tribute" projects were AFTER that, while doing the JS stuff they changed it to right after HTML5 and Bootstrap), and went from a newspage for their blog posting stuff into a subreddit (which is pretty much what the news page kinda already was with upvote/downvoting of articles). It's constantly in flux compared to Codecademy.
I honestly thought it'd be more than web development as I could use a community for learning C under CS50, but that's nearly impossible given CS50's stuff doesn't have a good "community" aspect. The teacher is great, but their online class support is really dismal.</aside>
PetriP-TNT
Member
Not sure if I follow you, but if cropping is an option you could just do the image as an background-image instead and use background-size: cover; css-property & value instead. That way you can have images that have arbitary widths, go border-to-border but can still stay within your specified heights (say 200 or 400 pixels)
https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage
http://codepen.io/hallaathrad/full/vNEPpL <---What I'm trying to copy without looking at the source.
I'm thinking the "portfolio" bit is just two wells. Same with the contact me part where the left is one well and the right is another well.
esmith08734
Member
You guys like the iPad and MacBook combination?
What do you mean?
...Well, that's fabulous. First example they gave was a straight up template the person never coded themselves. This one is using something they don't list/tutorial in the opening (unless they updated again)
Guess instead of trying to make it pretty, I'll just make a navbar and look like 90's Geocities like I already know how to do instead of trying to learn Flexbox/Bootstrap CSS. >:|
Flexbox is super easy to learn and very useful, https://www.youtube.com/watch?v=G7EIAgfkhmg
Following his example code is there a reason my boxes are still lined up top to bottom instead of reversing like his here? I basically typed out everything he has shown so far and commented the stuff he's deleted out but apparently my boxes in Bracket's live-preview/Chrome aren't reversing horizontally 5-1 like his?
Edit: Oh, missed a ";" in the CSS. Nevermind.
I know how to use position elements otherwise, but is Flexbox supported enough that I can use it as my main method?