-
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 thought Treehouse is for $20. 'Tis a pity because I was thinking about becoming a member for long time.
USD$25. Converted to Canadian dollars though...
What can I do if Chrome and IE refuse to show a favicon? It works fine in Firefox.
Here's the relevant code:
It's a JSF/Primefaces web app. The path is resolved correctly. When I click on the link in the Chrome web inspector in order to open the favicon file directly, it works.
I have tried clearing the cache, restarting the browser, and deleting the favicon database. I have tried different file types and resolutions. No issue in Firefox, but Chrome just doesn't display it.
The app is running on a local server, but it doesn't work with our live test server either. And it's not just me; for my team members the favicon doesn't show up either. Except when they use Firefox, of course.
edit: Fixed. I moved the link tag to the top of h:head. I have no idea why, but now it works.
Here's the relevant code:
Code:
<h:head>
(other stuff)
<link rel="shortcut icon" href="#{request.contextPath}/resources/img/favicon.ico" type="image/x-icon" />
</h:head>It's a JSF/Primefaces web app. The path is resolved correctly. When I click on the link in the Chrome web inspector in order to open the favicon file directly, it works.
I have tried clearing the cache, restarting the browser, and deleting the favicon database. I have tried different file types and resolutions. No issue in Firefox, but Chrome just doesn't display it.
The app is running on a local server, but it doesn't work with our live test server either. And it's not just me; for my team members the favicon doesn't show up either. Except when they use Firefox, of course.
edit: Fixed. I moved the link tag to the top of h:head. I have no idea why, but now it works.
runningjoke
Member
Tried to find a solution on google for like 2 days, maybe you guys can help. I have a page with these kind of slanted tabs: http://codepen.io/sheridanms/pen/wnvCc but they are on a sidepanel that flies in when the user does something. Firefox apparently can't handle transforms when they happen offscreen, because it doesn't render correctly. Works fine in Chrome and IE. Any ideas? http://codepen.io/anon/pen/NqgrNo
If you place a file favicon.ico onto the root of your web server you can leave out the html code and the browsers know to load it. It's even in the spec.
http://www.w3.org/TR/html5/links.html#rel-icon
PetriP-TNT
Member
Works on Firefox by using transform: translateX(xx) instead of animating the right pos
http://codepen.io/anon/pen/bdReMP
PetriP-TNT
Member
Use Brackets? Feeling lucky? Want to test my new persistent history extension for Brackets? Well here it is:
https://github.com/petetnt/brackets-persistent-history
The extension saves your editing history between changing projects or closing Brackets. It's also somewhat tolerant to outside changes. It hasn't been thoroughly tested yet and I am in mids of creating unit tests so YMMV.
https://github.com/petetnt/brackets-persistent-history
The extension saves your editing history between changing projects or closing Brackets. It's also somewhat tolerant to outside changes. It hasn't been thoroughly tested yet and I am in mids of creating unit tests so YMMV.
runningjoke
Member
Works great, thanks!
Yeah. I've been working on a side project recently (redesigning the PSTV homescreen to look more like the PS4), largely as an excuse to improve my knowledge of things I haven't had much of a chance to try at my job: CSS animations, flexbox, and working without any JS libraries.
Probably the biggest takeaway was to avoid using left/right/top/bottom/width/height properties in animations, if you can help it. If you want to be lazy (and who doesn't?), the positioning and sizing math can sometimes be easier with them than with translate and scale, but the results are so unpredictable.
Performance can take a hit; things work inconsistently across browsers; and you can get some weird effects, even on the elements you aren't animating. For example, when I was first scaling and moving some items, every single background image on my page would turn aliased until the animation was done.
It's very pretty, seems to lag on my Macbook, but I'll blame Chrome on a retina screen. Also, I had no idea what the company does until the very bottom with the tiny sliver of a footer that gives an 'about us'
I get like 3 fps on my decent laptop... Time for some optimization.
It seems pretty cool, but I just simply didn't know what the site is about until the end.
Fusion Pizza
Member
Hey I'm gonna be revamping my websites so this thread is sure handy.
Whats everyones favorite frameworks?
Also, I want to try out some high end HTML5 stuff, but where should I host?
Whats everyones favorite frameworks?
Also, I want to try out some high end HTML5 stuff, but where should I host?
Bots are better than you
Banned
Well, if the (german only?) proverb "many roads lead to rome" has any example in real life, then it's the web and web development.
The Javascript-based frameworks are pretty hot right now, Angular, React, i have the feeling that every week another one shows up.
They work pretty well with Node.js, also javascript-based, although they should work with other solutions, too.
Maybe you look into the MEAN-stack (MongoDB, Express.js, Angular.js, Node.js), Express as a backend js-framework, angular for the frontend, node as the server. Mongo is also a no-sql db-solution.
About hosting, you should decide the backend technology first, then look for a hosting-provider that suits your needs.
It really comes down to what you want to work with/are interested in, HTML5 works with everything, but the IE9 and lower.
Fusion Pizza
Member
Well, if the (german only?) proverb "many roads lead to rome" has any example in real life, then it's the web and web development.
The Javascript-based frameworks are pretty hot right now, Angular, React, i have the feeling that every week another one shows up.
They work pretty well with Node.js, also javascript-based, although they should work with other solutions, too.
Maybe you look into the MEAN-stack (MongoDB, Express.js, Angular.js, Node.js), Express as a backend js-framework, angular for the frontend, node as the server. Mongo is also a no-sql db-solution.
About hosting, you should decide the backend technology first, then look for a hosting-provider that suits your needs.
It really comes down to what you want to work with/are interested in, HTML5 works with everything, but the IE9 and lower.
I started to learn some node a while ago but got busy with other stuff, the MEAN-stack sounds interesting, I've heard about mongo alot but havent actually tried it out.
For the html5 hosting stuff, I just need something that's relatively high-bandwith (LOTS of multimedia stuff goin on) but inst gonna break the bank, maybe amazon web services? I've never dived into that whole ecosystem however.
Well,
to use HTML5 you don't need a specific framework. And MEAN has nothing to do with HTML5. HTML5 is a buzzword, nothing else. The web evolves so fast all the time, it's really hard to say: <XXX> is HTML5.
Anyways, I personally love React and hate Angular. Take your time and try things you're interested in for more than 5 minutes.
If you want some well supported frameworks in the client, you have a lot of options.
Angular, React, Ember, Backbone (and all it's forks/enhancements)... have fun
to use HTML5 you don't need a specific framework.
And MEAN has nothing to do with HTML5. HTML5 is a buzzword, nothing else. The web evolves so fast all the time, it's really hard to say: <XXX> is HTML5.Anyways, I personally love React and hate Angular. Take your time and try things you're interested in for more than 5 minutes.
If you want some well supported frameworks in the client, you have a lot of options.
Angular, React, Ember, Backbone (and all it's forks/enhancements)... have fun
There are some good syncing instructions on the Package Control site and you can actually backup/sync all of your settings in addition to packages which is nice.
As for good packages, Scotch.io has a pretty good list of useful plugins. Some of my favorites though are:
- SFTP - FTP client that can automatically upload/download when you save/open a file
- SublimeCodeIntel - adds tons of nice features like autocomplete and function tooltips
- BracketHighlighter - highlights brackets (), [], {}, <>, etc
- Color Highlighter - adds a colored background to hex/rgb/etc colors in code
Also there are a ton of really nice themes for Sublime such as:
Numix
Spacegray
PetriP-TNT
Member
There is a semi-large festival happening outside of the street and I tried to look up the timetables from the site:
https://www.youtube.com/watch?feature=player_embedded&v=rWs3hgrvh-E
#webdevnightmares
https://www.youtube.com/watch?feature=player_embedded&v=rWs3hgrvh-E
#webdevnightmares
Starphoenix
Member
Ugh, I keep running into a bug with my website I can't seem to fix.
My right-column slides around when the screen is being resized, and once it touches the left-column/main body it immediately shifts right below the main body, disappearing from the right side. When I foot the column left it'll be lined up with the left column, but once my viewport shrinks and touches the column, the same behavior repeats itself. I've tried everything to get it to resize getting "pushed" below. Everything else resizes correctly as it should for my light responsive elements. Just not this column.
My right-column slides around when the screen is being resized, and once it touches the left-column/main body it immediately shifts right below the main body, disappearing from the right side. When I foot the column left it'll be lined up with the left column, but once my viewport shrinks and touches the column, the same behavior repeats itself. I've tried everything to get it to resize getting "pushed" below. Everything else resizes correctly as it should for my light responsive elements. Just not this column.
Yeah, I actually discovered Numix just yesterday. It's great. I had to make a few adjustments, though. Like reducing the padding of the command palette items.
It goes really well with the Brogrammer color scheme. Dumb name, but it's beautiful.
dang. that seems to be an issue I have been running into.
Yeah, my boss doesn't want to give away too much at the moment (i just think hes too lazy to write the actual content for it lol)
soundahfekz
Member
Anyone familiar with Jinja, Jquery & Bootstrap implementation? I have a light project I'm looking for a quote on and Odesk is a bit spammy. PM me if interested
Chrome Dev Editor is dead: https://plus.google.com/+SriramSaroop/posts/6EwgknwKpeS
Such a promising tool and the best you could find on a Chromebook. This plus no real presence for Chrome OS, apps or extensions at IO, I wondering if they're killing the Chrome platform in favor of Android.
Such a promising tool and the best you could find on a Chromebook. This plus no real presence for Chrome OS, apps or extensions at IO, I wondering if they're killing the Chrome platform in favor of Android.
Classic Google move.
Well, shit. I just got a Chromebook for development purposes not too long ago. At least there's still Crouton.
Also, is there a good resource to learn fancy animations or effects using Javascript? I don't really use Javascript that much since I never really had a major use for it but it would be nice to learn.
Well first of all, you should use CSS instead of JS if possible. It's easier, cleaner, and in many cases better performing.
As for JS animation, don't reinvent the wheel. There are a ton of nice animation libraries such as Velocity.js. Or if you've already got jQuery as a dependency, just use .animate().
Yeah, this is good advice, all around (and the linked article is great). Try learning CSS animation, first, and then find where JS fits into the workflow. You may/will need to integrate JS at some point, for more complex animations and event handling, but CSS alone can do a lot, for starters.
I'm back! Javascript has been a lot easier to learn with the book " A Smarter Way to Learn Javascript". I love the exercises too. I didn't realize that I actually might enjoy this, even if I still struggle with it. I'm glad I ventured out and tried different things before giving up.
Anyways, what do you guys think would land a junior web dev job? I'm hoping to be good enough for one in ~ a year or so. I have SO much to learn but it's so worth it!
From what I've gathered it's pretty much :
What else do you guys think I should look at in the future? I'm gonna do jQuery after I get vanilla Javascript down. I hear people talk about frameworks all the time, but I haven't quite looked into them. Angular and React seemed to be talked about a lot of reddit though.
I haven't touched base with HTML or CSS frameworks either. Bootstrap, SASS, ect? Is using bootstrap "cheating", when building a portfolio?
Sorry for the wall of text again, you guys are really helpful though!
Anyways, what do you guys think would land a junior web dev job? I'm hoping to be good enough for one in ~ a year or so. I have SO much to learn but it's so worth it!
From what I've gathered it's pretty much :
- html
- css
- JS/JQuery
- git/gulp/ect
- having a decent portfolio with side projects
- lots of github stuff
What else do you guys think I should look at in the future? I'm gonna do jQuery after I get vanilla Javascript down. I hear people talk about frameworks all the time, but I haven't quite looked into them. Angular and React seemed to be talked about a lot of reddit though.
I haven't touched base with HTML or CSS frameworks either. Bootstrap, SASS, ect? Is using bootstrap "cheating", when building a portfolio?
Sorry for the wall of text again, you guys are really helpful though!
No. Just shows that you learned how to use bootstrap. If anything it's a good thing because you will constantly need to learn new frameworks, libraries, etc.
Well you're definitely on the right track. Get the JS fundamentals down and make sure you're solid on that because that's everything. If you're already pretty comfortable as a programmer in general, a site like Javascript Garden can be very useful (it details the unique/quirky parts of JS without holding your hand with basic programming concepts).
As for jQuery, it's still useful to know how (and more importantly when) to use it, but its relevance is fading. jQuery was primarily useful for two things: finding DOM elements and writing code for every browser easily. Both of these issues are mostly mitigated by the adoption of newer browsers (for example querySelector() and querySelectorAll() completely solve the former). So learn it but definitely don't rely on it and know when not to use it.
JS frameworks would be a very good next step, so definitely look into those once you're comfortable with JS. Angular, React, and Ember are all very popular frameworks and they all take a slightly different approach.
Using Bootstrap is not cheating by any means (and knowing how to use Bootstrap is important) but knowing how to build a front-end from scratch and style it with CSS is much more impressive (in my opinion). So in other words: do both.
Lastly, CSS preprocessors are a big deal and I would recommend (eventually) learning them. Luckily, they're all fairly similar, so you can learn the concepts of one and then the syntax differences of the rest for the most part.
WanderingWind
Mecklemore Is My Favorite Wrapper
I have a potentially stupid question. I'm tweaking a grid layout and I want to be able to style the grid items individually. I have grid_item, grid_item2 and grid_item3 in the HTML. In the JS, I have the following gridItems = gridItemsContainer.querySelectorAll('.grid__item'),
How do I go about adding
gridItems = gridItemsContainer.querySelectorAll('.grid__item2'), and gridItems = gridItemsContainer.querySelectorAll('.grid__item3'),
I thought I was clever and just copy pasted those last two after the first and it killed like, everything.
EDIT: HOLY CRAP I FIGURED IT OUT FINALLY. BEHOLD MY NEWBNESS
gridItems = gridItemsContainer.querySelectorAll('.grid__item, .grid__item2, .grid__item3'),
How do I go about adding
gridItems = gridItemsContainer.querySelectorAll('.grid__item2'), and gridItems = gridItemsContainer.querySelectorAll('.grid__item3'),
I thought I was clever and just copy pasted those last two after the first and it killed like, everything.
EDIT: HOLY CRAP I FIGURED IT OUT FINALLY. BEHOLD MY NEWBNESS
gridItems = gridItemsContainer.querySelectorAll('.grid__item, .grid__item2, .grid__item3'),
Classes should be used for similar elements. Having class 1, 2, and 3 is not really good practice. Instead maybe think about having a single "grid_item" class and using other selectors to find the ones you want. Or if these are very specific use ids. Note that your classes should also be more semantic. grid_item3 doesn't really mean much to someone looking at it, does it have a specific purpose different from the others?
WanderingWind
Mecklemore Is My Favorite Wrapper
So, I'm teaching myself a lot of this on the fly. What I'm currently learning is responsive design. I started off with Adobe Muse, then relearned all the HTML and CSS I had forgotten after not messing with anything for years. Yeaaaarrrrsssss.
JavaScript is very much new to me. CodeAcademy was useless and I don't know what next step to take. Basically, my MO right now is to come up with a project I want to do, and use tutorials and the small amounts of things I'm remembering along the way to improve. In my defense, I am learning a lot along the way and getting even this far on this one would have taken me a couple of days.
Now, back to what I'm doing. I'm making a responsive grid to hold 3 different stories. The top grid__item (grid__item) is 100% width, below that is (grid__item2 and 3). Both of those are 50% width.
When the user clicks any of those grid items, they expand out into a scrollable story. I need each of those grid items to be independent from one another, as they each have a background-image and I need to be able to size them differently.
I would not use css classes for Javascript selectors at all. Use a data-attribute or something like that to find things with javascript, and meaningful css classnames for your css.
This is much more robust, css changes a lot, it's a pain to keep things in sync.
Do you know BEM, more? I can't recommend this convention enough. My life got so much better when I started using it some years ago.
This is much more robust, css changes a lot, it's a pain to keep things in sync.
Do you know BEM, more? I can't recommend this convention enough. My life got so much better when I started using it some years ago.
Code:
.grid__item{}
.grid__item--top {}
.grid__item--left{}
.grid__item--right{}
Daffy Duck
Member
What good sub reddits are there for web design stuff?
By stuff I mean good topics of discussion about latest trends etc, ideas and so on.
https://www.reddit.com/r/web_design/ just found this one.
Please don't laugh, but the studio I am at (they're pretty old school) and don't really do any new stuff, but I just discovered Angular today (I'm basically the only in house web guy now after the lead guy left before Christmas, you may remember a topic I made { I'm still a relative n00b to all this and have only been in my first job for just short of 2 years) but I've been building a site for a client that is a recruitment consultant with jobs and oh boy do I like what I'm seeing, there's some neat stuff with filters I'm looking to use.
That's all rather disjointed I know, but it seems like a god send, and is something else which is new for me to learn and apply to all our projects going forward.
By stuff I mean good topics of discussion about latest trends etc, ideas and so on.
https://www.reddit.com/r/web_design/ just found this one.
Please don't laugh, but the studio I am at (they're pretty old school) and don't really do any new stuff, but I just discovered Angular today (I'm basically the only in house web guy now after the lead guy left before Christmas, you may remember a topic I made { I'm still a relative n00b to all this and have only been in my first job for just short of 2 years) but I've been building a site for a client that is a recruitment consultant with jobs and oh boy do I like what I'm seeing, there's some neat stuff with filters I'm looking to use.
That's all rather disjointed I know, but it seems like a god send, and is something else which is new for me to learn and apply to all our projects going forward.
WanderingWind
Mecklemore Is My Favorite Wrapper
Funny you should bring that up, this is the very first project that I'm dabbling in that naming convention. Mostly because I'm working off of this.
http://tympanus.net/codrops/2015/04/15/grid-item-animation-layout/
Except I'm going barebones with it, and have only 3 elements. And because of the backend I am forced to use, I have to actually place this inside of an iframe.
Thanks! I didn't realize JQuery was fading. Wish I could save this post somehow, lol.
Copy the text and paste it in a word doc or notepad on your comp.
jQuery isn't actually "fading" per se, it's still used in many (MANY) projects, if only because it enables you to use pre-made plugins without reinventing the wheel. But like any library it has its flaws and the growing number of full-stack pure JS users have been vocal about the fact that they could do without it. Which is true and fine, but it's equally ok to rely on it for what it is: a time-saver.
Typing this, I realise I recently vocalized my hatred for Bootstrap and other frameworks for reasons that are comparable to the ones people use to critique jQuery. After all, both save time even though there are other ways to do it. The thing is, Bootstrap isn't just a library of functions built on JS. It's that, plugins built on it and a lot of CSS that you'll often have to overrule. So why should you use jQuery without too much consideration (some is still relevant, as other posters have said) but really ponder using Bootstraps? Well because jQuery's weight is a fraction of Bootstrap's and it mostly won't hinder the rest of your coding while saving you time. Bootstrap without care is jQuery plus lots of added baggage, a fraction of which you usually use, and a lot of wasted time battling its base styles.
In short, if you're using jQuery because you need a couple plugin and are faster ad coding with it, go for it, no harm done. If you're not actually using intricate plugins and just simple functions you could do in pure JS, consider the second option. And for front-end frameworks, steal their ideas and organisation (reusability of code is king) but don't rely on them in the long run. They were made for prototyping and lazily building back office when the dev can't be bothered to do CSS. Use them for that.
I'm thinking of signing up for a web development boot camp. General Assemb.ly has a branch near me in D.C. which is a massive plus since I can commute there from home. They seem to be pretty legit but I'd really appreciate some feedback on their curriculum. They offer a 12-week full-stack web development immersive. Check the syllabus and FAQs sections for more info.
https://generalassemb.ly/education/web-development-immersive/washington-dc?where=washington-dc
Ther other option is Bloc. They have an online 12-week Front-End Web Development course that I'm also eyeing. There's obvious pros and cons of it being online, but since there's no back-end training I'm wondering if it's even worth my time.
https://generalassemb.ly/education/web-development-immersive/washington-dc?where=washington-dc
Ther other option is Bloc. They have an online 12-week Front-End Web Development course that I'm also eyeing. There's obvious pros and cons of it being online, but since there's no back-end training I'm wondering if it's even worth my time.
Really curious if I should look into one one of these things as well since right now I'm just working my ass off to make ends meet. I have sadly dropped learning how to program for the past few months
. Won't make any excuses but I know I need to get back right on the train.Aside from the already mentioned in this thread, Project Manager (https://github.com/randy3k/Project-Manager)
Testicular Sound Express
Member
So I work totally remote for my job and I've run into a problem with some client work. Two clients need to whitelist ips in order to deploy code to their dev server through git. When I am traveling it causes problems, I've gotten better at coordinating my schedule but sometimes things pop up that I can't fix while I'm on the road. You guys have any solutions for what I could do in this situation?
PetriP-TNT
Member
Use an VPN and whitelist that VPN's address
WanderingWind
Mecklemore Is My Favorite Wrapper
I have another stupid question that I have spent hours trying to solve. I have a basic styled tabbed content box. I would like the tabs to live on the left hand side, versus the top. I thought other such boxes floating the tabs left, but that doesn't seem to work here. I would have thought it would work under the .tabs-wrapper, but that just broke everything. What am I doing wrong here?
Jfiddle https://jsfiddle.net/WanderingWind/p3rLq3zr/
Jfiddle https://jsfiddle.net/WanderingWind/p3rLq3zr/
Battersea Power Station
Member
Are any of you NYC-based guys looking for part-time work? I work with a non-profit and we're looking for someone to redo our slow and clunky WordPress site that's held together with duct tape at the moment.