PetriP-TNT
Member
For creating a portfolio / CV site or in general?
-
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
For creating a portfolio / CV site or in general?
Bots are better than you
Banned
Bit of both, i'd like to use some new things to build it with, should've said that in my first post. ^^
Since i'm stuck in the technical medieval ages here at work, a portfolio/cv site is the only way of using something new in a productive way instead of just playing around with such things on low work days.
runningjoke
Member
I've used Angular and React, and I still enjoy using React. I'd suggest trying that.
WanderingWind
Mecklemore Is My Favorite Wrapper
Man, JS, why so simple, yet so complex. Thanks.
Bots are better than you
Banned
Thanks! Will check out React. Made some tutorials with Angular couple of months ago, but didn't manage to finish it on a level that i can actually use it, due to work.
But i'm a bit concerned about Angular 2 and it's switch to Typescript, don't want to use that one.
Is Ember a valid alternative? Might look into that then.
Angular 1 is pretty much at the end of it's live. Well, there will be many more projects using it, of course, as it's really popular, but Angular 2 is the way to go now. But you should really be using Typescript with it I think, something I will not do for example. Meh
React on the other hand is pretty amazing and I can't recommend it enough.
Ember is nice, too, but a much more complete package. You can throw React into almost everything you have to build, Ember not so much.
React on the other hand is pretty amazing and I can't recommend it enough.
Ember is nice, too, but a much more complete package. You can throw React into almost everything you have to build, Ember not so much.
I always see Ember described as "convention vs configuration" since Ember makes so many technology choices for you and has its own way of doing things such as EmberCLI, Handlebars, etc where React is a build your own sort of deal. Ember is massive though, definitely only worth it for a large app I think.
Bots are better than you
Banned
Big thanks for all answers.
About Ember, i thought more of an alternative for Angular, not React. I wouldn't even call React a "framework" in traditional meaning.
About Ember, i thought more of an alternative for Angular, not React. I wouldn't even call React a "framework" in traditional meaning.
So to leverage this conversation, it sounds like I'll be moving to an Angular 2 project coming up. Mostly a new section with new code. I really don't understand why they chose Angular 2, we haven't used it and they do very little of their own front-end so it's not a maintenance thing either. I'm guessing it has to do with them currently using Angular 1 but since they'd need to modify their code to upgrade the existing portions it doesn't seem there is any benefit to it and I'm personally tepid on using something marked as "beta". I'm not sure how set on this path they are but if anyone would like to chime in with pros and cons it might help drive our conversations with them.
So, the angular 1 to angular 2 migration path is pretty good, with the angular team developing a couple of tools to marry the two libraries. The biggest concern is going to be the build and potentially compile process if you are planning to use es6 or typescript with angular2.
Angular2 being in beta isn't too much of a problem - the documentation is significantly improved from a few months ago, and it's been in beta long enough that people are starting to flood stackoverflow with questions and answers. That being said, I think unless the goal is to convert the entire application to angular2 eventually, it seems like a lot to throw on your plate. Some of the best gains in using angular come from using immutable data structures and something like redux or rxjs for your data flow, in my opinion.
Have a laugh people!
The project I've been lend to got in production and is currently swamped by bugs, most of them quite hard to fix, as per the complete lack of modularity that forces us to copypaste a fix over hundreds of files (and thousands of places inside those files).
But eh, who cares, I'm getting almost zero work done because this is not something a developer should do - and also I'm quite annoyed by the fact that most of the current problems were pointed out by me several months ago (as in: 10 minutes after they explained the project to me).
So, the project manager turned out to be an idiot.
He forced us to take some wrong decisions, then he basically fucked up the entire ODT-PDF conversion system applying some bug-filled macros all over the place, then he asked to rewrite the ODTs (hundreds of them!) from scratch so he could apply his new fixed macros on them, but his macros weren't fixed, so now he's asking us to rewrite the ODTs again but following the layout of the macro-ed ODTs instead. Yeah right.
But right now, he asked us the most hilarious thing I've ever heard.
Apparently, he doesn't have direct access to the production DB (of a major Italian bank, mind you: even if this project isn't related to the accounts and whatnot, there still is a huge amount of private data and stuff), but he totally feels the need of hot-fixing some procedure bugs.
The solution he came up with?
He wants a page, hidden from the navigation tree of the project (because SECURITY!!), containing a simple textarea where he can write his queries and have them executed directly on the production DB.
Let it sink in.
Yup!
The project I've been lend to got in production and is currently swamped by bugs, most of them quite hard to fix, as per the complete lack of modularity that forces us to copypaste a fix over hundreds of files (and thousands of places inside those files).
But eh, who cares, I'm getting almost zero work done because this is not something a developer should do - and also I'm quite annoyed by the fact that most of the current problems were pointed out by me several months ago (as in: 10 minutes after they explained the project to me).
So, the project manager turned out to be an idiot.
He forced us to take some wrong decisions, then he basically fucked up the entire ODT-PDF conversion system applying some bug-filled macros all over the place, then he asked to rewrite the ODTs (hundreds of them!) from scratch so he could apply his new fixed macros on them, but his macros weren't fixed, so now he's asking us to rewrite the ODTs again but following the layout of the macro-ed ODTs instead. Yeah right.
But right now, he asked us the most hilarious thing I've ever heard.
Apparently, he doesn't have direct access to the production DB (of a major Italian bank, mind you: even if this project isn't related to the accounts and whatnot, there still is a huge amount of private data and stuff), but he totally feels the need of hot-fixing some procedure bugs.
The solution he came up with?
He wants a page, hidden from the navigation tree of the project (because SECURITY!!), containing a simple textarea where he can write his queries and have them executed directly on the production DB.
Let it sink in.
Yup!
PetriP-TNT
Member
Are you actively searching for a new job? Because you should be
StopMakingSense
Member
Oh christ I remember you, you still work there???
Yeah, I still work here (too many reasons, mostly because I'm an idiot, so plz just don't rub it in).
I sort of became the go-to guy for all Angular problems in this branch, it's kinda fun.
It's also not fun when they ask me to fix problems in projects like this, but at least I have some great stories about fucked up development!
Make a mock login-page to that page with hardcoded user and password in the js file. If there is a login page then it's secure, problem fixed.
PetriP-TNT
Member
Is it a controlled component? You'll want to change the value of `value` with a change handler
Code:
class Foo extends React.Component {
constructor() {
this.state = {value: 0};
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return <input type="range" min="0" max="255" value={this.state.value} onChange={this.handleChange.bind(this)} />
}
}https://facebook.github.io/react/docs/forms.html#controlled-components
You can also use uncontrolled components, in which case use defaultValue instead of value, otherwise your component is stuck at the value.
WanderingWind
Mecklemore Is My Favorite Wrapper
I'm curious. Do you guys make things like sliders, or do you just use whatever open source tool you can find?
The Albatross
Member
If you're building a static CV site, opt for Bootstrap or Foundation for front-end. They're both great for getting up and running quickly and getting a production-ready usable site at the end of every day.
If it's a static site that you're going to put up on shared hosting, you don't need a backend other than the apache/whatever server that your host will setup for you... You can just move your files up via FTP and it'll be on the web.
I start almost all of my projects from some front end framework like Boostrap, Foundation, or Material Design Lite (Google), and then use what they have.. building off of it for what a client's specs are. I could build an image slider from scratch, but the basic image sliders from Bootstrap or Foundation are going to think of a lot more edge cases than I will and they'll work predictably in every environment.
WanderingWind
Mecklemore Is My Favorite Wrapper
So, I shouldn't feel like an asshole for using Bootsrap and Slick?
/bootstrap-rant
Yeah so every time it comes up I feel like I'm on a mission. Bootstrap is bad when taken as a whole in places where tiny parts of it only are needed. You need its grid? Sure! You need its slider? Great! But chances are you don't need slider, grid, a fucking tone of styles, navigation and the Bible in typographic rules. Bootstrap is great for prototypes and quickly-built back offices. It's also, as Kalnos just pointed out, a great resource in which to learn good front-end patterns.
Yeah so every time it comes up I feel like I'm on a mission. Bootstrap is bad when taken as a whole in places where tiny parts of it only are needed. You need its grid? Sure! You need its slider? Great! But chances are you don't need slider, grid, a fucking tone of styles, navigation and the Bible in typographic rules. Bootstrap is great for prototypes and quickly-built back offices. It's also, as Kalnos just pointed out, a great resource in which to learn good front-end patterns.
How about just stock native web? http://caniuse.com/#feat=input-range
Supporting dead browsers or obnoxious styling is something to avoid if you're able.
WanderingWind
Mecklemore Is My Favorite Wrapper
Basically, when I started re-learning all of this, I was told to stay away from Bootstrap because of all it's additional components. Which ended up good for me, because along with not being able to use anything dependent on JQuery 2.X or higher, I can't use anything with * box-sizing in the work environment I have to use.
When I started, I wouldn't have been able to figure out how to cut down the Bootstrap CSS to just what I need (protip: the customize your own download for Bootstrap CSS is garbage and still throws in a ton of extra weight).
So, I was just going back over old notes and rethinking stuff I thought I "learned" the first time around. Relooking at Bootstrap and maybe not fighting with trying to make everything from scratch would be beneficial.
Even so, I still with there was a good learning source for stuff like Tether. I can envision how I want to use it, but the annotation is crazy gibberish to me. Now. But a year ago, half the crap I can do now would've been.
I dunno. Period of reflection.
EDIT: kalnos, swear on me mum I wasn't talking smack lol. I wrote that independently of your comment. I swear!
When I started, I wouldn't have been able to figure out how to cut down the Bootstrap CSS to just what I need (protip: the customize your own download for Bootstrap CSS is garbage and still throws in a ton of extra weight).
So, I was just going back over old notes and rethinking stuff I thought I "learned" the first time around. Relooking at Bootstrap and maybe not fighting with trying to make everything from scratch would be beneficial.
Even so, I still with there was a good learning source for stuff like Tether. I can envision how I want to use it, but the annotation is crazy gibberish to me. Now. But a year ago, half the crap I can do now would've been.
I dunno. Period of reflection.
EDIT: kalnos, swear on me mum I wasn't talking smack lol. I wrote that independently of your comment. I swear!
I think by "slider" it was meant "slideshow". As for dead browsers, clients decide for you most of the time :/
Yeah, you can take "just what's needed" in theory, but it's seldom done... How many login pages have been done that load bootstrap's whole JS and styles when they're just actually using the .form stuff
Oh my bandwidth WanderingWind
Mecklemore Is My Favorite Wrapper
Yeah, sorry. Slideshow. I deal with intensively photo heavy projects, so slideshows are an everything thing in my world. Slick is the best open source one I've used, but even it isn't perfect for my needs. So I was batting around learning how to do one from scratch. But again, risk/reward.
I think by "slider" it was meant "slideshow". As for dead browsers, clients decide for you most of the time :/
Yeah, you can take "just what's needed" in theory, but it's seldom done... How many login pages have been done that load bootstrap's whole JS and styles when they're just actually using the .form stuff
In general practice the CDN is actually the better way to go as it will cache and given how pervasive bootstrap is it's likely they already have it. Rehosting is generally not useful but people do it anyway, I guess in the very unlikely scenario the CDN goes down.
PetriP-TNT
Member
And as always, I'll come back at that and say that Bootstrap is uberly customizable, well scaling and overall very flexible framework that is great for prototypes and big production type apps and websites a like.
Most likely you won't need everything it offers (all 200 kilobytes of it), but if you are just dumping it in as a whole the convenience it offers most likely triumphs over the things you saved looking for that 1kb grid system and perfect modal popup and okay-ish something else. If you know what you are doing, you can always cherry pick the parts that you absolutely need. And I am not saying it's something every project needs either, but the "great for prototypes and quickly-built back offices" parts irks me to hell.
side note but I started blocking third-party js to cut down on the amount of shit that loads and it's amazing how many sites don't render anything when some piece of js fails to load. It's actually quite concerning that nobody seems to test for that.
The Albatross
Member
There are huge benefits to using a framework like bootstrap to start a project with, more benefits than the negatives of keeping a slimmed down library in my opinion. If a requirement is to keep your package slim, then use the package customizer that's built into bootstrap.
It's also nice to think about the developer who may take over for you later, and while developing all of your own components is fine if you have the time and your clients have the budget, whenever I take over any project from any developer, if I see Bootstrap or Foundation being called I'm immediately relieved... Because it's something that I'm familiar with, that most of us all understand. It's not some obscure grid system that you have to re-learn the ins and outs of again.
So, there's nothing wrong with using a framework like Boostrap or Foundation. They're both great. They'll save you a ton of time and get you into, in general, a "best practices" mode, other developers typically prefer working with them rather than something homegrown, and there's also a likelihood that many of your projects can use many different components and shortcuts that bootstrap provides.. Things like floats, positioning, tables, and other areas that you might forget about when developing a site, and you hand it off to the client and down the line they want to add a label into a page... voila, they can if you used bootstrap.
It's also nice to think about the developer who may take over for you later, and while developing all of your own components is fine if you have the time and your clients have the budget, whenever I take over any project from any developer, if I see Bootstrap or Foundation being called I'm immediately relieved... Because it's something that I'm familiar with, that most of us all understand. It's not some obscure grid system that you have to re-learn the ins and outs of again.
So, there's nothing wrong with using a framework like Boostrap or Foundation. They're both great. They'll save you a ton of time and get you into, in general, a "best practices" mode, other developers typically prefer working with them rather than something homegrown, and there's also a likelihood that many of your projects can use many different components and shortcuts that bootstrap provides.. Things like floats, positioning, tables, and other areas that you might forget about when developing a site, and you hand it off to the client and down the line they want to add a label into a page... voila, they can if you used bootstrap.
I'm 100% with you.
I've used Bootstrap in lots of projects, and it rarely failed me.
Actually, I remember it failing on me when trying to rebuild its LESS package (it was the v2, I think? years ago anyway) and cherry picking its modules was a huge pain, as everything was super interconnected and I grew tired of the trial-and-error required to understand what file was actually required and what wasn't.
I'm sure, though, Bootstrap grew tighter over the years.
Fact is, I always use it when I feel the project I'm working on is prone to feature-creep, so having a full-fledged framework always handy for whatever shit they gonna throw at me is a great commodity.
For any other project, where I can handcraft everything, Bootstrap has always been useful as a reference codebase.
All in all, I find it to be well-written and very similar of the kind of code I'd write on my own (naming conventions and whatnot). I'm super comfy using it, and in the end I guess this is the reason I never bothered trying other frameworks.
Tathanen
Get Inside Her!
In my experience, Bootstrap is for one of three situations:
1. You're building a site where the design doesn't matter
2. You're a backend developer, not a frontend developer
3. You're a designer, not a frontend developer
I have never needed a grid, I have never needed pre-built components (barring a datepicker here and there, which I'd get on its own via 400 other options, not something like bootstrap). I've been building CSS elements from scratch for almost 20 years, these kind of things honestly slow me down more than help me out.
If there's a spec that's "make an admin site" with zero design direction, fine, drop boostrap in there and let it look like bootstrap. But if your project is designed to look like it looks like, rather than like bootstrap, it's just not worth it.
Again, just in my experience.
(I've never understood this "use Bootstrap because it's responsive" claim either, I just straight-up don't know what it means. Design components aren't responsive, actual site designs are responsive. Bootstrap is not a design. When you have a layout that needs to stretch and break, I don't know what Bootstrap offers me here that writing a breakpoint myself doesn't.)
1. You're building a site where the design doesn't matter
2. You're a backend developer, not a frontend developer
3. You're a designer, not a frontend developer
I have never needed a grid, I have never needed pre-built components (barring a datepicker here and there, which I'd get on its own via 400 other options, not something like bootstrap). I've been building CSS elements from scratch for almost 20 years, these kind of things honestly slow me down more than help me out.
If there's a spec that's "make an admin site" with zero design direction, fine, drop boostrap in there and let it look like bootstrap. But if your project is designed to look like it looks like, rather than like bootstrap, it's just not worth it.
Again, just in my experience.
(I've never understood this "use Bootstrap because it's responsive" claim either, I just straight-up don't know what it means. Design components aren't responsive, actual site designs are responsive. Bootstrap is not a design. When you have a layout that needs to stretch and break, I don't know what Bootstrap offers me here that writing a breakpoint myself doesn't.)
PetriP-TNT
Member
Like I said above, my opinion is exactly the opposite. It's not like I couldn't write it all from scratch, but why should I really? Reinventing the wheel over and over and over and over again is just unnecessary. It's quite the same as saying that "oh I don't use SASS or LESS" or whatever because they slow you down: obviously you should be using the tools that are best suited for the job. If Bootstrap or Foundation or whatever is not best suited for the job at hand, then fine. But casually just saying that they are good for building a site where "design doesn't matter" mostly just echoes how ignorant one can be on how flexible those large model frameworks are.
You say you have never needed a grid, which I can assume that you have never needed a pre-made grid, because gird-like structures are there on nearly every single page. You have never needed pre-built components, which means that you most likely have an quite impressive collection of components that will never ever be used again, are outdated, hacky or just plain dated.
Not sure what there is not to get about the "Bootstrap is responsive" statement. Components can be and should be responsive. Responsiveness means much more than a layout: it's also providing accessible and well working designs and components for multitudes of devices, browsers and environments. The media queries part is the easy part there.
That's a sidepoint but yes, it's true and it would be interesting to benchmark what's more lean and efficient: a trimmed-to-what-you-need bootstrap you're providing yourself, or the full-blown thing on a CDN...
Convenience has its limits and I'm not sure it's the best thing to go for, especially when you're starting out. I'm not against people using bootstrap for its convenience, I'm saying it's great for that but should be used for what makes it convenient to you (most often, the grid and some of the js components). Cherry-picking its components, if it is the norm, is very very fine with me and you'll never read me herald the "D all of IY" model which is unrealistic in this industry. Additionally, if you've got the know-how to build these components yourself but understand that Bootstrap's version wouldn't be enhanced by what you could do, then indeed there's no need to reinvent the wheel.
I see too many junior "front-end devs" jumping on the use of a framework and never trimming it down, or reading it up for what it's worth. I've worked on too many projects where Bootstrap styles are fought against and contradicted on endless lines of !important CSS (can you hear the sound of my tears?). It's a fact that it is indeed great for prototypes and websites where design has little relevance because then Bootstrap's objective shortcomings aren't part of the equation. It's also a fact that despite the great things Bootstrap comes with, its use shouldn't be trivialized because of those very shortcomings and because of the very often blind usage it's been seeing over the years.
We've seen the "Should I do this using jQuery" crawl up more and more, well it's the same with Bootstrap. Yes it's convenient and popular, but none of these make it inherently good and all I'm really advocating is knowledge here : know what components you need and use only them, try to know how they work and if they'll really be convenient in the long run, know if you're going to fight the framework or really rely on it etc... In my experience (which might still make me ignorant), Bootstrap is way to often slapped on without any care for these criteria and provides little but a sense of comfort for people afraid to read other coders' stuff.
Which brings me to one of the best things about using a framework, albeit sparingly: its ability to format the way you code. I've considerably trimmed down on my use of pre-made solutions for HTML/CSS elements but my teammates have no trouble using, improving and building on my code because its semantics all make cohesive sense, which is how a good framework is built. My grid is modular and uses Foundation's naming nomenclature for a base, for instance. So yeah, they're great learning sources and they've shaped the industry quite a bit. It shouldn't make them dogmatic either.
I do believe it's always important in web development to keep the package as slim as possible, which is never convenient. I also believe every tool, no matter how great it is or familiar and comforting it is, has a time and place in which to be used - which is essentially what you're saying. We disagree however on how often Bootstrap has its place, apparently.
runningjoke
Member
For some reason I thought local storage would be hard to use and I didn't check out how to use it. Now I had to change the login page to our application to show the user's name and avatar on the next visit. The avatar would probably be too big to go in a cookie and I don't want to build a service that returns user info before you log in (preventing probing for usernames by generating fake avatars would help, but it still feels wrong).
So I decided to check out localStorage. Super easy! 5/5 will use again
So I decided to check out localStorage. Super easy! 5/5 will use again
Regarding frameworks like bootstrap.
I for myself decided that I have a better life as a developer avoiding these huge frameworks. Most of the time I have to implement a finished design provided by some agency and it's to late to specify grids and whatnot. Adjusting bootstrap etc. takes more time than using something else.
I prefer smaller components and libraries like susy for grids. Things like bootstrap work best if you use their css classes/naming conventions, and as they are not written in BEM, they don't fit into anything I do.
building some admin backend, backoffice or anything else where design is not important, is another story though. Bootstrap is a godsend in these projects.
I for myself decided that I have a better life as a developer avoiding these huge frameworks. Most of the time I have to implement a finished design provided by some agency and it's to late to specify grids and whatnot. Adjusting bootstrap etc. takes more time than using something else.
I prefer smaller components and libraries like susy for grids. Things like bootstrap work best if you use their css classes/naming conventions, and as they are not written in BEM, they don't fit into anything I do.
building some admin backend, backoffice or anything else where design is not important, is another story though. Bootstrap is a godsend in these projects.
Opinion question: How do people feel about starting a reset.css with
since this should be the sensical default anyway.
Just be careful to have a fallback as local storage isn't big (don't expect more than about 5MB max before it starts booting things) so if you use it more you might get caching bugs. If you need to go bigger or have more durable storage use indexdb (which is very hard to use but there are some decent wrappers).
Code:
* { box-sizing: border-box }since this should be the sensical default anyway.
Just be careful to have a fallback as local storage isn't big (don't expect more than about 5MB max before it starts booting things) so if you use it more you might get caching bugs. If you need to go bigger or have more durable storage use indexdb (which is very hard to use but there are some decent wrappers).
Tathanen
Get Inside Her!
I've been doing that lately. I'm torn on including it in a reset file tho since it's pretty significant, you really have to know ahead of time that it's there.
Me, too. First thing I add to a new (S)CSS file.
I'm using a change handler.
PetriP-TNT
Member
Can you show your markup?
It is by far the most sensible default. Only times it will screw you up is issues with some third party things (I am looking at you, Google Maps).
-COOLIO-
The Everyman
is the latest chrome messing with anyone else's flexbox stuff?
https://twitter.com/josericaurte/status/692889447361216512
https://twitter.com/josericaurte/status/692889447361216512
PetriP-TNT
Member
https://code.google.com/p/chromium/issues/detail?id=580196 contains the issue and some workarounds (add min-widths and heights to fix most common cases)