You have a working example? (codepen, jsfiddle..)
height: 100%; only works inside a correctly prepared surrounding content.
-
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
You have a working example? (codepen, jsfiddle..)
height: 100%; only works inside a correctly prepared surrounding content.
Oh I like. This is elegant. CSS is my weakest skill, and I'd like for it to not be.
One of my favorite things of web dev is how many ways there are to solves problems.
Good for you! I'm offloading some of what I used to do in JavaScript to CSS, and it's made my life so much easier. There's a lot to learn on the subject, but my advice is to really, really build a good understanding of selectors and specificity before anything else. That will save you so many headaches in the future -- and your CSS will be much easier to read when you have to revisit something you wrote weeks or months earlier. I wish I'd been smart enough to approach it that way.
WanderingWind
Mecklemore Is My Favorite Wrapper
Imma be honest, I just scrapped the whole idea in a hissy fit. I'm going to try again next week and I'll put up a fiddle if I can't figure it out.
PetriP-TNT
Member
Sorry for advertising, but I made a project naming extension for Brackets today
It's something I have wanted for a long time so there it is. If you find bugs or have ideas, file a issue or send a PR
https://github.com/petetnt/brackets-name-a-project
It's something I have wanted for a long time so there it is. If you find bugs or have ideas, file a issue or send a PR
https://github.com/petetnt/brackets-name-a-project
Cool extension! I installed it and will try it out. The concept seems great.
Tagging onto the self-promotion train, if you use Brackets with a dark theme, I ported Spacegray (Base16-ocean) to Brackets.
https://github.com/alexpersian/Spacegray-Brackets
I know this is supposed to come with experience, but I swear CSS wizardry keeps blowing my mind. Trying to fuck around getting a footer at the bottom properly till a simple search showed me the way with overflow: hidden
Anyway, are specialized tags like footer or article or aside the way to go these days? I tried looking around websites of tech people I follow and it seems to be sort of 50-50 where some use them completely while others still using divs everywhere.
Anyway, are specialized tags like footer or article or aside the way to go these days? I tried looking around websites of tech people I follow and it seems to be sort of 50-50 where some use them completely while others still using divs everywhere.
Mind posting up the code snippet that you used? My footers always tend to be hacky.
http://codepen.io/anon/pen/YXyqGq
This is basically what I'm currently prototyping with trying to get general layout to align properly.
Awesome, that works pretty damn good.
PetriP-TNT
Member
Yes they are, as long as <IE9 aren't at your target. They only offer semantics, but they do bring a lot of structure to your HTML. For a simple example, compare something like
Code:
<div class="section"></div>
Code:
<section></section>There is a drawback though, if you are going to use the new elements, make sure you use them correctly, otherwise you could (should) just use <divs>.
For the sticky footer, I have used one similar to this for a long while now (from Bootstrap sticky footer http://getbootstrap.com/examples/sticky-footer/sticky-footer.css):
Code:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}I'm currently working on a small web app using Bootstrap/jQuery for a university course, and I'm not sure how to tackle one of the requirements.
The client displays a standard HTML table with some data retrieved asynchronously from the backend. Users can optionally register and choose one of three possible roles. The role is supposed to determine which columns they can see.
So there's four options: Not logged in, and the three roles. For each of these options, I need to display a specific set of columns.
What's the best way to do this? With "best" I refer to readable, maintainable code.
I thought about creating a map, mapping role names to a list of column names or indices. After populating the table, I could retrieve the names/indices, loop through them and hide all columns matching them. Not sure about this.
Alternatively, for each column, I could add the names of the roles who should be able to see them as class names and hide them for the other roles using CSS. For instance:
HTML:
CSS:
This seems like the better option to me.
The client displays a standard HTML table with some data retrieved asynchronously from the backend. Users can optionally register and choose one of three possible roles. The role is supposed to determine which columns they can see.
So there's four options: Not logged in, and the three roles. For each of these options, I need to display a specific set of columns.
What's the best way to do this? With "best" I refer to readable, maintainable code.
I thought about creating a map, mapping role names to a list of column names or indices. After populating the table, I could retrieve the names/indices, loop through them and hide all columns matching them. Not sure about this.
Alternatively, for each column, I could add the names of the roles who should be able to see them as class names and hide them for the other roles using CSS. For instance:
HTML:
Code:
<table class="role1"> only display the columns for role1
...
<td class="role1 role2>...
<td class="role2"...
<td class="role1 role3">...
...CSS:
Code:
table.role1 td:not(.role1), table.role2 td:not(.role2), ...
{ display: none; }This seems like the better option to me.
WanderingWind
Mecklemore Is My Favorite Wrapper
Seven editors does not a cohesive project make. How do yall deal with something like that?
PetriP-TNT
Member
Best option would be sorting out the data received in the backend. If you can't do it in the backend, filter out the data before you populate the table.
Though if you need to be able to switch around the columns without re-requesting the data, the hiding / showing works too.
Not sure what you (yoda?) are asking there
Best option would be sorting out the data received in the backend. If you can't do it in the backend, filter out the data before you populate the table.
Though if you need to be able to switch around the columns without re-requesting the data, the hiding / showing works too.
Not sure what you (yoda?) are asking there
I am already filtering the data in the backend. The data is transmitted as JSON, and the fields the user is not supposed to see are left empty. Not sure how to go from here.
PetriP-TNT
Member
Oh okay, if you can't build the table on runtime, you could just delete the empty columns and rows with something like this:
http://stackoverflow.com/questions/8571286/remove-empty-rows-and-columns-in-a-table-with-jquery
If you still want to go with the CSS route, you could do it like they do on CHMOD on Linux, where combinations of roles 1,2,4 lead to 3, 5 and 7, which could make the CSS easier when you could have just "roles7" instead of role1 role2 role4. :shrug:
I don't know what the requirements are in detail, but it's a bad idea to send data to the client, that should not be readable there.
Hiding things with css isn't enough.
If I misunderstood and the columns are empty (because the server respects the roles), I would try to not render them in the first place.
You could try client side rendering, too. Something like handlebars should do the job just fine.
the web dev's destiny There are always the cool new things you can't use because of some crazy people relying on old browsers...
Hiding things with css isn't enough.
If I misunderstood and the columns are empty (because the server respects the roles), I would try to not render them in the first place.
You could try client side rendering, too. Something like handlebars should do the job just fine.
Trying to get stuff working when flexbox exists is so painful
Analytics put IE9 and lower at 5.5%
the web dev's destiny
There are always the cool new things you can't use because of some crazy people relying on old browsers...Starphoenix
Member
Finally have my first web design internship (or at least one I can accept). Working for a local court house to redesign their web page. They want to be able to post updates to their website faster and add some functionality where they can post dockets easier from their end. Just going through the process I'm nervous as all get out. This is my first real foray into a professional job/application of skills. Still feel like I know so little when it comes to all of the intricacies of servers/back end to front end stuff. Oh well, no better way to learn.
talisayNon
Member
MongoDB is a fucking nightmare, and unless you know how to really use it, stay far the fuck away.
That is all.
That is all.
the web dev's destiny
Story of our lives! I work for an organization where IE is the default browser for all employees, and our IT department has it set for Compatibility View on our domain (because we have some legacy sites that don't work at all in newer browsers). So, I have to build for IE7 first, in many cases. (At least it's not IE6...)
WanderingWind
Mecklemore Is My Favorite Wrapper
Not sure what you (yoda?) are asking there
Heh. Once upon a time, I had a nice looking, simple project. After 7 different editors took at it, it became a monstrosity that I am not longer proud of, and in fact hate.
But on another note, I am working on my next project and there are a couple of things I'd like to learn from the last one that I haven't been able to figure out.
The first is text that starts at say, 18px on the page, but is responsive so that it grows to match on mobile. I have googled around and this seems to be a problem that doesn't seem to have a solution that works worth a damn across all browsers. Second, problem is I created a SUPER janky slider that can contain an iframe and text. The problem is that it's a frame within a frame within a frame.
What I'm trying to do without that is to have a before/after picture slider with some text beside or underneath it. That will be on Slide 1. Slide two will hold a different before/after with text. I have tried with bxslider and some other somewhat open source, but none of them hold iframes very well. And almost none of them will hold an iframe and text without it breaking into a thousand parts and making WanderingWind drink.
Starphoenix
Member
Obviously I've never worked in the web industry, but the idea of seven editors changing one website is horrifying.
WanderingWind
Mecklemore Is My Favorite Wrapper
Yes.
Yes it is. And it's real fun, because none of them work on the same CONTINENT as me, or one another. And they all have equal say in stuff. So, I get to get wildly divergent feedback. For instance, I had a text column. One guy wanted it to go across the 980px space. One wanted it centered aligned and constrained to 350px. One guy wanted it justified, one guy wanted it aligned left.
After all the changes, you know what ended up? My original layout of the text column.
EDIT:
This is what I was talking about. I want to make a non-crappy version of this. Right now, all that you see is in an iframe. The before/after is another iframe, within that larger iframe. The text is in a div, so that it doesn't wrap around, so I have to cut it down substantially.
What? It's a godsend.
Daffy Duck
Member
Can someone help me with this, I have the below query running for people to search a site by choosing a letter of the alphabet, it all works fine apart from the letter 'C' for some reason, there are other queries like the below for events, content etc and these all work fine, but this is not working, I get the error:
The server we have in the office is running standard MySQL and this page works fine on that server, the live server is running MariaDB.
Thanks for any help.
Code:
$sql = 'SELECT * FROM towndirectory WHERE title LIKE "'.@substr($_REQUEST['letter'],0,1).'%" AND address <> ""';
$result = mysql_query($sql);
while($data = mysql_fetch_assoc($result)){
$permalink_category = fetch_row('SELECT * FROM towndirectory WHERE id = '.$data['parentid']);
$permalink_section = fetch_row('SELECT * FROM towndirectory WHERE id = '.$permalink_category['parentid']);
$data['href'] = 'harpenden-town/'.$permalink_section['permalink'].'/'.$permalink_category['permalink'];
$data['type_of_result'] = 'Harpenden Town';
$entries[] = $data;
}The server we have in the office is running standard MySQL and this page works fine on that server, the live server is running MariaDB.
Thanks for any help.
Well, the first solution is basically what I meant earlier when I talked about mapping indices to roles. It would work, but it's a bit crude, isn't it? I'm looking for a more refined, more semantic solution. So I guess I'm gonna go with CSS.
I don't know what the requirements are in detail, but it's a bad idea to send data to the client, that should not be readable there.
Hiding things with css isn't enough.
If I misunderstood and the columns are empty (because the server respects the roles), I would try to not render them in the first place.
You could try client side rendering, too. Something like handlebars should do the job just fine.
the web dev's destiny
Sorry if I wasn't clear. I'm not just hiding the data; the server does already filter it.
First, the server reads all rows from the DB which belong to the user, and then it creates the response JSON based on their role. Fields that should not be readable for the user are left empty.
I do already render the table client-side, so adding the role classes won't take much time at all.
Anybody with experience with Wordpress + Woocommerce + Printful and got some spare time wanna help me A) understand better wtf I am doing, and B) help me set up my shop?
I would pay you for your time. I'll be upfront, I don't have a lot of money floating around currently, but I could probably swing 100+ USD for a few hours of your time explaining shit to me on skype and you setting up my first items so that I could just copy exactly what you did in the future when I add more.
Send me a PM if interested. Thanks.
I would pay you for your time. I'll be upfront, I don't have a lot of money floating around currently, but I could probably swing 100+ USD for a few hours of your time explaining shit to me on skype and you setting up my first items so that I could just copy exactly what you did in the future when I add more.
Send me a PM if interested. Thanks.
ClosingADoor
Member
Don't have experience with MariaDB, but have you tested without the <> ""?
Next to that, I'm a bit rusty on my MySQL implementation like you do (using frameworks mostly), but isn't that one very risky in terms of database injections if you don't filter the input?
Daffy Duck
Member
Yeah I've tested without that, it returns zero results for the directory, even on pages that worked. I didn't write the code and the person who did has left. I believe the input is filtered elsewhere in the code.
ClosingADoor
Member
I'd definitely check that to be sure.
Can't really say I see anything wrong in the code. Feels like it should work. What happens if you just do a: SELECT * FROM towndirectory ?
Daffy Duck
Member
It's on the list to check.
It is really odd, that code works for a,b then d-z but c throws a wobbly and breaks.
Not tried that to be honest.
It is really odd, that code works for a,b then d-z but c throws a wobbly and breaks.
Not tried that to be honest.
Sorry to bump/quote myself. If no one in here is able to help, any suggestions on where to find someone that can?
WanderingWind
Mecklemore Is My Favorite Wrapper
WanderingWind
Mecklemore Is My Favorite Wrapper
I can figure out most everything besides that flyaway panel, which is incidentally the most important part. I really like the feel of that and I got a neat project I can use it on. I'm guessing I should start working more with Bootstrap
Bootstrap is not something you should focus on if you're starting out.
Frameworks such as bootstrap or Foundation do not teach you how to make things, they make them for you. They are heavy, they come with a lot of added bulk and do not have other purposes than saving time in a prototyping phase or when you need to build a back-end site but can't afford something custom.
Dissect it if you want, learn how its grid work, steal its idea for sure, but it should be the last thing on anyone's mind to use a front-end framework for a production website, IMO. Performance is king.
Cool I didn't know there was a web dev thread on GAF (silly me, of course there's a thread about everything)!
Just to introduce me in, I'm currently studying the MEAN stack because nowadays the cool kids apparently hate LAMP and, being totally tired of doing dozens of todo apps tutorials, I thought of just trying to figure out stuff diving into some actual code.
I've tried the angular-fullstack generator and it's mostly clear how it works, except how it handle the admin authentication.
Here's what it generates: https://github.com/DaftMonk/fullstack-demo
Basically, you can login as either admin or user. Both have a settings page (where you can change your password), and only admin as an admin page (where you can delete users).
If you're not logged in and try to access those pages, you get a 401 which is intercepted and redirects to the login page.
So, if I check the client/app/account/account.js, I can see that there's a route for /settings with the authenticate option set to true, and that's fine.
Problem is, in the client/app/admin/admin.js route, there's no such thing, and I couldn't for the sake of god understand how it handles the admin authentication.
Also, in the client/app/admin/admin.controller.js controller, the Auth factory is passed but not used (and apparently, the Auth.isAdmin() function is never used anywhere in the client side - but I may have missed it when searching).
Is there anymone familiar with this generator that could lend me a hand here?
Thanks!
Just to introduce me in, I'm currently studying the MEAN stack because nowadays the cool kids apparently hate LAMP and, being totally tired of doing dozens of todo apps tutorials, I thought of just trying to figure out stuff diving into some actual code.
I've tried the angular-fullstack generator and it's mostly clear how it works, except how it handle the admin authentication.
Here's what it generates: https://github.com/DaftMonk/fullstack-demo
Basically, you can login as either admin or user. Both have a settings page (where you can change your password), and only admin as an admin page (where you can delete users).
If you're not logged in and try to access those pages, you get a 401 which is intercepted and redirects to the login page.
So, if I check the client/app/account/account.js, I can see that there's a route for /settings with the authenticate option set to true, and that's fine.
Code:
.state('settings', {
url: '/settings',
templateUrl: 'app/account/settings/settings.html',
controller: 'SettingsCtrl',
authenticate: true
});Problem is, in the client/app/admin/admin.js route, there's no such thing, and I couldn't for the sake of god understand how it handles the admin authentication.
Code:
.state('admin', {
url: '/admin',
templateUrl: 'app/admin/admin.html',
controller: 'AdminCtrl'
});Also, in the client/app/admin/admin.controller.js controller, the Auth factory is passed but not used (and apparently, the Auth.isAdmin() function is never used anywhere in the client side - but I may have missed it when searching).
Is there anymone familiar with this generator that could lend me a hand here?
Thanks!
PetriP-TNT
Member
I mostly disagree except for the "learn the basics first" first paragraph.
Front-end frameworks, like all tools, have their correct and wrong use cases. Not only are modern frameworks like Bootstrap and Foundation heavily customizable, even on the style/component level, they have also taken great strides towards accessibility, compatibility and performance.
Saying that "[using a front-end framework] should be the last thing on anyone's mind" on production website is like saying write your own CMS instead of using Wordpress because Wordpress has tons of useless bulk. If your website consists mostly of components that are readily available and been most likely been used by millions of users, the chances are that your own implementation will turn out to be worse. If you do happen to make your own and it does prove to be superior to others, do share it and made fork the best features to other major components of the same type if you can!
If your website doesn't benefit from something like Bootstrap at all, then of course you shouldn't use it though.
Same with this. FWIW I only use Bootstrap at work in a fashion that's mostly invisible for the end user but saves me tons of time, but then again I do use large bulk of it's feature set. If I just wanted a fast grid or good modals or something similar, there would be tons of great other options too.
PetriP-TNT
Member
Well I agree, but using a prototype as a base is always a bad idea (though it's often quite inevitable due to time and money restrictions). But like I said, using a framework for a "custom" design isn't always a bad idea if the basic functionality under the hood is same.
Hmm, I would never include a full bootstrap/whatever library to get a grid, for example. There is so much bloat I have to deal with later, that's not worth it. And most of the time there exists a library specialized for a task.
Well, we try not to use frameworks that tell us how to name things in HTML, but mixin-collections like bourbon.io, breakpoint, susy.... there is practically no library out there that uses the BEM methodology, and I can't live without it
Well, we try not to use frameworks that tell us how to name things in HTML, but mixin-collections like bourbon.io, breakpoint, susy.... there is practically no library out there that uses the BEM methodology, and I can't live without it
WanderingWind
Mecklemore Is My Favorite Wrapper
I'm hearing a lot of talk about grids. See, I can dissect things and learn from them and I'm even at the point where I can figure stuff out without needing to look at examples or anything. But when I come across something like that "site" that I've never messed with, I don't know what terminology to Google to get going .
I played with making an accordion element with photos instead of a header text element, but I couldn't get the hover mask to work along side that. And it looked like ass.
Should I be looking at grids to do what I want with that?
I played with making an accordion element with photos instead of a header text element, but I couldn't get the hover mask to work along side that. And it looked like ass.
Should I be looking at grids to do what I want with that?
I'm not familiar with that stack/generator but I have used ui-router with a similar stack using Postgres. The accounts.js page isn't redirecting because of a 401, it's redirecting because it resolves that authenticate: true property and uses it here in app.js when the state changes:
Code:
.run(function ($rootScope, $location, Auth) {
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$stateChangeStart', function (event, next) {
Auth.isLoggedInAsync(function(loggedIn) {
if (next.authenticate && !loggedIn) {
$location.path('/login');
}
});
});
});The admin.js makes it past the previous check because it doesn't set the authenticate property and probably is redirected to here in app.js due to a 401 like you said:
Code:
responseError: function(response) {
if(response.status === 401) {
$location.path('/login');
// remove any stale tokens
$cookieStore.remove('token');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}I don't know why you're getting a 401 there but I would guess that it's maybe this line in the AdminCtrl:
Code:
$scope.users = User.query();So it uses the $resource to make a http GET request for a bunch of users, gets caught by some 401 error handling and redirects you to the login page.
Maaan that's twisted!
I've yet to properly understand how the admin page authenticate (but for now I blame me being drowsy), but anyway I got the whole 401 thing in server/auth/auth.service.js.
There's an isAuthenticated() function that at some point goes:
Code:
if (!user) return res.send(401);There's also a hasRole() function that returns 403 in case the requirement isn't met, so I guess it simply uses the standard responses to deal with authentications and whatnot (401 is unauthorized and 403 forbidden, so it makes sense).