-
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
Don't use Compass, it's old, crazy slow and does not work with Libsass.
I switched to Libsass + Postcss for autoprefixing and it works like a charm.
Go with PostCSS.
I prefer SASS for writing my CSS by a mile though. I really dislike the new css properties/variables syntax and projects with tons of PostCSS plugins are really a mess for bigger teams, because no one knows what features are available.
SASS is a closed garden where everyone knows what to do. Much preferred.
I think it is still worth becoming familiar with it since there are a lot of projects out there still using Ruby to compile. I agree that moving forward, LibSass is the way to go though.
I don't where I've seen (blindly copied) it, but I'm currently using PostCSS + PreCSS, a plugin that adds some SCSS syntax to normal CSS.
After some weeks of using it, I'm totally missing its point though.
Like, ok, I'm using some limited SCSS stuff in CSS files, well big deal...
After some weeks of using it, I'm totally missing its point though.
Like, ok, I'm using some limited SCSS stuff in CSS files, well big deal...
too lazy to replace it with proper SCSS though
Well, you can easily learn Compass in an evening, in the end it's only a (pretty cool) mixin-collection.
The only thing I miss is the sprite generator. That worked like a charm.
PetriP-TNT
Member
Do note that these aren't (even close to) equivalent of SASS (or other preprocessed) variables anyway, but it's really no wonder that people are confused (not saying that you in particular would be).
All the parties involved can be blamed somehow: CSS Custom Properties for Cascading Variables Module from w3 is rather crappy name so people rolled with calling them "CSS Variables" which is close to the truth but then people confused them with SASS-like variables, which are more macros than variables in the first place, which means that...
Well, honestly, I don't care why we got the mess we have at the moment. The one thing works, the other is ugly as f*** and feels like the language designer was drunk while creating it.
So for me it's easy, I don't use it. I stick with SASS until something better arises, but I have a feeling I'll have to wait a while...
PetriP-TNT
Member
"The mess" is there because like I said, it's not even close to equivalent to SASS variables. For example, have you tried to change a SASS variable at runtime? You can always argue that one doesn't need things like that, but mostly it's because such things have not been possible in the past at all.
Not only that, but the CSS Custom Properties for Cascading Variables Module-spec is created in mind of being able to polyfill future CSS properties via JavaScript which would be HUGE mega win for everyone.
Yeah, maybe I'm a little old-fashioned here, as I don't see any benefits for me in this.
I don't want to change css vars after compilation, and I don't want to rely on js and polyfills for my stylesheets.
Maybe it's because everybody uses PostCSS for this today and I really don't like it as a SASS-replacement.
I don't want to change css vars after compilation, and I don't want to rely on js and polyfills for my stylesheets.
Maybe it's because everybody uses PostCSS for this today and I really don't like it as a SASS-replacement.
PetriP-TNT
Member
The first one would enable super easy themes for applications with wide variety of options for say user configuration and modification.
Second one means that if new layout engine called Uberbox was introduced to Chrome 66, Edge 6 and Firefox 71 which magically uses neural networks for computing best layout for you page, you couldn't need to wait for users to update their browsers as the implementation could be easily polyfilled.
Best of all? You can use SASS to write this, you can use SASS variables with these and you can run your PostCSS plugins for additional enhancements.
There's some things we're just now figuring out with CSS variables (custom properties). Here's controlling loading with them: https://jakearchibald.com/2016/css-loading-with-custom-props/. However, even though they have an interesting cascade abilities it still doesn't excuse the horrendous syntax. The double dash naming was a poor choice, using var() instead of a coalesce operator was dumb. But hey, people have been fighting this forever so I'm just happy it's here.
polyfills aren't always the answer because the performance of most is trash and should never be considered for older browsers.
making things pixel perfect across browser in this day and age is a fool's errand. Nobody ever actually bothers to test what it's like to scroll their fancy bootstrap jquery whiz bang parallax site on some shit dell from from 2005.
PetriP-TNT
Member
Polyfills are always an compromise, not an answer. I don't really find "performance" being trash for "most" polyfills today, and polyfilling isn't a synonyme to "bad performance", but obviously new things can optimize and streamline things further than ever before, making polyfills even more viable option than they are today or were yesterday.
There's a vast difference between "pixel perfect across browser" and "not displaying at all on some browsers" too. And many do test their fancy sites on crappy hardware, even myself. Like I said, it's always a compromise.
Certainly forward polyfills aren't a bad idea. That's actually why things like Houdini are exciting. We can actually experiment with stuff and use that to help drive standards. Hell, CSS variables and mixins probably wouldn't exist without SASS and LESS showing that there is clear demand for it.
Daffy Duck
Member
So today I learnt some historic code for updating the 3 day forecast on a site we have hasn't worked for 5 years.
It was based on the BBC xml feed and there's custom code for taking this, sorting it and storing it in the database and then serving it up on the site.
This is nearly 9 years old and I'd like to look to implement something better, any recommendations? Ideally it will be free.
It was based on the BBC xml feed and there's custom code for taking this, sorting it and storing it in the database and then serving it up on the site.
This is nearly 9 years old and I'd like to look to implement something better, any recommendations? Ideally it will be free.
JonathanEx
Member
At work we use Wunderground as a free option for some clients for weather data if that's worth looking in to.
Daffy Duck
Member
That looks great!
I'll have a further look at it. Thanks.
I'll have a further look at it. Thanks.
The Albatross
Member
I'd also recommend OpenWeatherMap, whcih I used for a hotel client before:
http://openweathermap.org/api
http://openweathermap.org/api
Daffy Duck
Member
I went with this one in the end. I will keep Wunderground in mind though for future projects. One thing I did notice with Wunderground (and this is what drove me to quickly go to openweathermap, was {and this could be just me being a derp}) was that I couldn't find the structure for the output of the XML fil from them to be able to know what I am querying or what output I get, do they push you down the json route even though they say both json and xml are available?
Thanks guys.
So I've been fiddling around with Javascript a bit more this week, and decided I would try making a calculator. Turns out it's not very hard to do and was actually pretty fun. I feel like I understand working with the DOM a lot better now that I'm not following any tutorials, and I'm just sort of experimenting instead. I only had to google how to do one thing and that was how to parse an integer from html. Other than that I was able to complete this without any help (other than googling certain javascript syntax stuff that I can never remember), and that feels fucking awesome.
https://codepen.io/chadmcartier/pen/WwKvja
I know I can clean up the code a lot, add keyboard support, and probably reduce the overall amount of functions for the arithmetic buttons into one probably as well, but I will save that for another day. I think I'm going to build a version with jQuery next just to compare the two.
https://codepen.io/chadmcartier/pen/WwKvja
I know I can clean up the code a lot, add keyboard support, and probably reduce the overall amount of functions for the arithmetic buttons into one probably as well, but I will save that for another day. I think I'm going to build a version with jQuery next just to compare the two.
Damn I wish I could do that. I feel stupid when I can't just come up with code without google or following a tutorial and it happens like every single time.
PetriP-TNT
Member
ES2015 has Object.is() which can tell the difference between -0 and
+0
Code:
Object.is(-0, +0)However, -0 === +0 does make sense (at least from a users perspective) because you really don't want to check the signedness if every time you compare to zero (it's also how the spec says it should work).
Funny thing is that is-negative-zero was one of those one liner modules that got tons of slanter during the npm kik gate, eventhough it's a concept that so many don't know about and most certainly couldn't write the comparison check correctly from memory.
Easy refactoring tip: Instead of keeping global state, just pass the state to the calculate function and do the checks there. That alone removes like ~50% of your lines, mostly repetitions, while making your code more sane.
-
-0 === 0 is fine although it shouldn't exist at all and parseFloat("-0") should yield 0. x /-0 = -Infinity is suspect because zero does not contribute to things being positive or negative. Probably an IEEE floating point thing.
PetriP-TNT
Member
Why?
Because -0 shouldn't be dealt with outside of floating point representation. It's not useful, it's an implementation particularity that should be hidden.
PetriP-TNT
Member
You just presented a situation where it is useful and it's implementation particularity shouldn't be hidden yourself. It also helps with the consistency. Maths are weird anyway.
(The parseFloat (and Int) spec explictly define this behaviour too, which is nice)
No, actually hiding this would yield the correct result and reduce the surface area of when this could possibly happen. I mean if I did something like -Infinity/1 that isn't technically something that's possible then whatever but to take external textual representations that have no concept of it and implement it on top is a bad idea because it would almost never be expected. If it's needed then you can write the explicit case.
WanderingWind
Mecklemore Is My Favorite Wrapper
I need some help understanding returns and how they work within functions. Here is a code example from Treehouse that I was smart enough to Google, but not smart enough to really understand.
My problem is this. I understand creating the function named getYear
I understand creating the variable within that function, but I don't understand what that variable is storing. What does "new Date().getFullYear();" do?
Then, when I return the variable, the lesson and book says it is exiting the function and bringing the variable year back to....where? And what is that doing?
Lastly, after calling the function after the code block, why is there another variable that consists of the function? What is that doing, and why?
I know that is a ton of questioning, but I'm just misunderstanding a fundamental part of what this does and I think if I can have an actual human explain it to me, I could get over the hump and continue. Any help would be appreciated.
EDIT: It doesn't help the learning process when this
Pops up as incorrect in the lesson, and it doesn't explain why. Treehouse sucks with explaining why something is wrong. It just says "lol nope task doesn't pass try again." What the test wants you to put in is
That's it. The space between the getRandom and the (12); in the function call causes it to be flagged as an error, even though it doesn't in the brower console.
Code:
function getYear () {
var year = new Date().getFullYear();
return year;
}
getYear();
var yearToday = getYear();My problem is this. I understand creating the function named getYear
I understand creating the variable within that function, but I don't understand what that variable is storing. What does "new Date().getFullYear();" do?
Then, when I return the variable, the lesson and book says it is exiting the function and bringing the variable year back to....where? And what is that doing?
Lastly, after calling the function after the code block, why is there another variable that consists of the function? What is that doing, and why?
I know that is a ton of questioning, but I'm just misunderstanding a fundamental part of what this does and I think if I can have an actual human explain it to me, I could get over the hump and continue. Any help would be appreciated.
EDIT: It doesn't help the learning process when this
Code:
function getRandom( upper ) {
return Math.floor(Math.random() * upper) + 1;
}
getRandom (12);Pops up as incorrect in the lesson, and it doesn't explain why. Treehouse sucks with explaining why something is wrong. It just says "lol nope task doesn't pass try again." What the test wants you to put in is
Code:
function getRandom( upper ) {
return Math.floor(Math.random() * upper) + 1;
}
getRandom(12);That's it. The space between the getRandom and the (12); in the function call causes it to be flagged as an error, even though it doesn't in the brower console.
Code:
var year = new Date().getFullYear();this is creating an instance of the Date object (which in this case will give you back an object that represents the current date and time of your computer because you haven't passed any parameters to it) it's then using the method .getFullYear() to get the year of that date (which will be 2016 in this case)
It's a shorter way of writing
Code:
var date = new Date();
var year = date.getFullYear();when you call the function getYear(); it's creating a Date instance, getting the year and then saying "here's the year, I'm done. You deal with it" but simply calling
Code:
getYear();will do nothing because the returned value of the year isn't being assigned to a variable or being output anywhere like to the console or a web page so the script is getting the year but then doing nothing with it and moving on.
when you use this though
Code:
var yearToday = getYear();the script is creating a variable yearToday and then saying "right, I need to go call the function getYear() and see what it gives me". getYear() is then run and creates a Date instance, gets the year and says "here you go, it's 2016" and that's what yearToday is set as.
does that make sense?
WanderingWind
Mecklemore Is My Favorite Wrapper
Okay, yeah, that makes a little more sense. I really appreciate you typing all that out. There really is a limit to self-education. Sometimes you really need to ask somebody to explain things to you like you're 5. I don't quite get returns yet, but I think that's just because of a pre-misconception about how the language works.
I asked this on Reddit but...
What makes a portfolio website design/layout strong?
I'm looking to redesign my portfolio website, however, my initial ideas for the designs seem to be conflicting with one another. I have one side of me looking into a somewhat long single page layout showcasing my pieces into different sections (with the layout going from Name/logo > About > Piece 1 > Piece 2 > Piece 3, etc > contact(?) > Footer ) while the other is making me lean towards a more simple layout consisting of a short page just showing my pieces front and centre seeing most of my site at a glance.
They both have their advantages and disadvantages (details of the project vs being too simplistic) so I can't decide which one to go for especially since my portfolio ranges from a whole lot of mediums (illustration, design, photography, web development, etc)
Employers or people who have experience looking or making portfolio websites: What do you think makes for a good design/layout for a portfolio website?
What makes a portfolio website design/layout strong?
I'm looking to redesign my portfolio website, however, my initial ideas for the designs seem to be conflicting with one another. I have one side of me looking into a somewhat long single page layout showcasing my pieces into different sections (with the layout going from Name/logo > About > Piece 1 > Piece 2 > Piece 3, etc > contact(?) > Footer ) while the other is making me lean towards a more simple layout consisting of a short page just showing my pieces front and centre seeing most of my site at a glance.
They both have their advantages and disadvantages (details of the project vs being too simplistic) so I can't decide which one to go for especially since my portfolio ranges from a whole lot of mediums (illustration, design, photography, web development, etc)
Employers or people who have experience looking or making portfolio websites: What do you think makes for a good design/layout for a portfolio website?
The easiest way to think about is that whenever a function is called, it's essentially creates a sandboxed context from the rest of the code. With some slight exceptions, this means all the code that is run, everything that was created by the function is erased once interpreter finishes reading all the code. This means if you want to get the value of newly created variables from that function it needs to be returned so it can be carried out of the local sandboxed context. Inversely, if you want the function to know about values outside of it, you need to put it inside the parentheses. Any changes to those fed values are still locked in that local context though.
Try messing around with this.
I'd recommend my friend's course since he does exactly that lol. His course is aimed at people who don't know anything besides having a computer and using a browser.
practicaljavascript.net
I cannot agree more. This course, while not finished, is the best one I've found.
Returns give you a value back from a function. They are essentially the 'output' portion of a function. Without 'returning' the value, you'd be unable to use it.
function sum(a, b) {
let sum = a + b;
}
If you ran this function, it would be absolutely pointless, because nothing would be 'returned' from the function. In order to extract the result, you have to return it.
function sum(a, b) {
let sum = a + b;
return sum;
}
so if you ran sum(5, 4), you'd be returned the value 9. Now if you just ran that function without storing the result in a variable, it'd be pretty useless.
let result = sum(5, 4);
now the variable result will hold the value 9. In JS, if you don't explicitly define a return value for a function, it will implicitly return undefined.
Do what looks pleasing to you while taking design cues from some of the better looking sites out there. Nobody can really give you a formula because what looks great is ultimately subjective.. so the best thing to do is continually experiment and develop YOUR tastes. You will run yourself crazy trying to predict what you'd imagine some employer will like because everyone likes different things. Don't spend overly long obsessing about what is the perfect design... Pick something and run with it, and if it isn't sufficient, change it later. Paralysis by analysis ultimately ends up being a huge problem in the programming field because you have nearly unlimited choices at your fingertips.
I think standard practice is to split your portfolio up by discipline rather than dumping it all together. Your photos won't need blurbs but for your programming work you'll need to elaborate with case studies in all likelihood. If I was in your position I'd have separate pages for each discipline tailored to what best shows them off, with further sub pages if I need blog-ish posts. So Photos and Illustrations can be shown off simply as a grid with a lightbox overlay on click, but Design and Programming should link to further elaboration.
WanderingWind
Mecklemore Is My Favorite Wrapper
Ha. Nice annotation on that. Did you make that?
I'll give it a look. EloquentJS is really good, but the online version skips around a ton and while the book is excellent, I rarely have that with me when I'm working out a problem. I need to organize better.
Oh, shit. This is super clear. You should teach idiots how to computer. You're excellent at it. Cheers.
Jack The Nipper
Banned
I figure I could make a simple splash page pretty easily for a game in making. Wouldn't make sense to hire someone for that.
How much would it run me? Server, domain and such I assume less than 100 dollars. Been out of the game for a long time
How much would it run me? Server, domain and such I assume less than 100 dollars. Been out of the game for a long time
PetriP-TNT
Member
If you host your page on say Github Pages (https://pages.github.com/), the total yearly cost could be something downwards of 5 bucks depending of your domain name.
Jack The Nipper
Banned
I am hoping for a bit of traffic, guess I'll have to look into it a bit. We are still a bit away from a webpage but I want to do a teaser before we start up officially
PetriP-TNT
Member
I am hoping for a bit of traffic, guess I'll have to look into it a bit. We are still a bit away from a webpage but I want to do a teaser before we start up officially
There's no hard traffic limits on Github Pages whatsoever, and there are some pages hosted there that get millions of hits daily for sure (say the Bootstrap docs) and the hosting is completely free (for public repositories, private repos cost 7 bucks for 5 per month). Caveat is that the sites will have to be relatively static, but that shouldn't be too much of a problem.
For front enders, learn the basics of jQuery, but don't spend too much time on it. A lot of modern companies are limiting their use of it and instead are going to the native dom functionality where they can since browsers have improved their compatibility by a lot. Still, it helps to know the basics so you know what is going on when you see it. Instead, spend your time on semantic HTML, CSS and particularly 'responsive web design'. Learn media queries. Pick up bootstrap. Learn Javascript and then learn the DOM. The type of framework you want to focus on is something along the lines of React, Angular 1 or 2 or Ember. Angular 1 is pretty much deprecated due to the much superior Angular 2, but a lot of companies have Angular 1 codebases since it was the most popular JS front-end framework at the time. React is picking up a lot of steam... my personal favorite right now is Angular 2, especially since it allows you to do things like have locally scoped CSS. With that said, test them out and just PICK ONE and roll with it. Don't waste time trying to worry about whether you are using the 'perfect framework', because the reality is that in a few years, that framework will probably be replaced with some new framework. The key is to actually make something. You can pick up whatever other framework when your job requires it.
If you want to focus on something, focus on the elements that will likely still be here 10 years from now, and that is base HTML, CSS and Javascript. Also, the DOM.
If you want to focus on something, focus on the elements that will likely still be here 10 years from now, and that is base HTML, CSS and Javascript. Also, the DOM.
Uh, I noticed a weird behavior in how Promises catch errors: if something wrong happens in the then() block, it somehow throws the error (that usually would appear in the console) to the catch() block.
Basically, I have a class wrapping Socket.io in Promises and another class called Message, that simply shows a success/error popup on screen.
So, if something wrong happens in the "// do something" of the then() block, it sends the error to catch(), where it's funnily enough (as the builtin Error actually HAS a message property) properly passed to the Message.error() function instead of console.log().
Now, am I doing something wrong (except accidentally having used ".message" in a catch block) or is the then-catch of Promises actually supposed to work like this?
Basically, I have a class wrapping Socket.io in Promises and another class called Message, that simply shows a success/error popup on screen.
Code:
/* response is an object like this:
{
type: 'success',
message: 'Something good happened!',
body: { ... },
}
*/
class IO {
// ...
emit(name, data) {
return new Promise((resolve, reject) => {
this.io.emit(name, data, response => {
if (response.type === 'success') {
resolve(response);
} else {
reject(response);
}
});
});
}
}
// somewhere else...
IO.emit('name of the event to emit', data)
.then(response => {
// do something
Message.success(response.message);
})
.catch(response => {
Message.error(response.message);
});So, if something wrong happens in the "// do something" of the then() block, it sends the error to catch(), where it's funnily enough (as the builtin Error actually HAS a message property) properly passed to the Message.error() function instead of console.log().
Now, am I doing something wrong (except accidentally having used ".message" in a catch block) or is the then-catch of Promises actually supposed to work like this?
PetriP-TNT
Member
Yup, that's how .catch() works: it catches rejections and throws that occur in your chain.
Yeah, but somehow I thought that Promise.catch() was simply the Promise.reject()'s callback, not the actual catch of an implicit throw-catch block wrapping everything.
This way, what would be the best practice to keep the catched error to show in the console? Should I just do something like this?
Code:
// ...
.catch(response => {
console.error(response.message);
});