Had the same problem with live reload and chrome. Had to turn it off.
-
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
Had the same problem with live reload and chrome. Had to turn it off.
I'm pretty sure it's Chrome's problem... I did a simple test when it was still in the 180k's and that was just to remove all scripts and stylesheets from index.html (it's a one page app). It still bizarrely showed ~180k memory usage.
I assume like 90 copies of my app was being cached somewhere?
PetriP-TNT
Member
As you were using livereload that most likely was the case methinks.
Chrome has a memory profiler. You should use that.
PetriP-TNT
Member
Haha, this reminds me of this old CSS bug in IE you could use to crash it. It was IE6 I think.
I looked at it closer using the DevTools and it is indeed on my end. It's accruing a few KB every second.
Time to hunt for leaks.
So finally ran into a massive issue trying to develop on windows. Taking a front end class and learning how to use middleman. The install is not working properly at all. Was trying to figure out how to make it work but just gave up lol. I'm going to install a linux distro on my old fucked up laptop that still has vista on it.
So with that said how should I go about installing linux?. Was gonna wait till wed and go to a meetup group and learn how to install linux via usb. But if possible I may as well install it now since it would be nice to a working dev laptop asap. Otherwise I was depending on using my sister's laptop whenever I attended tech events or meetups. Also once again I am idiot for realizing I should have just installed linux on my old laptop in the first place haha.
So with that said how should I go about installing linux?. Was gonna wait till wed and go to a meetup group and learn how to install linux via usb. But if possible I may as well install it now since it would be nice to a working dev laptop asap. Otherwise I was depending on using my sister's laptop whenever I attended tech events or meetups. Also once again I am idiot for realizing I should have just installed linux on my old laptop in the first place haha.
PetriP-TNT
Member
Installing a modern Linux distribution is as easy as it is to install Windows (or Mac): download the distro, put it on a stick, boot from the stick and just follow the next next next dialogs. Choosing a distribution is another problem, stick with something popular like Ubuntu or Mint and you should be good to go.
My web development issue today:
I have an video that I need to blend to background. Here's the thing: Firefox with hardware acceleration enabled shows the colors wrong, because Nvidia drivers, by default, renders the videos in limited RGB.
Solutions: turn off hardware acceleration or go fiddle in NVidia settings. Both of which are perfectly viable in a public website. ...
...
...
If your PC is sufficiently fast with some RAM to spare, I'd just set up a Linux VM. Try VirtualBox or vmware Player. You can just 'insert' the .iso image into the virtual CD drive and install it like Windows. Using a VM you avoid any issues with drivers and hardware and being able to just save the state of the VM is comfortable.
Bots are better than you
Banned
Do you, per chance, have a Codepen to take a look at this? I can't really imagine how it should look/work.
PetriP-TNT
Member
Sorry, can't provide a fiddle right now, but consider a div that's split to half: 1 side is a div with color #123. The other side is video that has solid color background, also color #123
It results in something like this:
Turning HW Acceleration off or setting RGB to full makes Firefox look like Chrome (and IE and other browsers). But obviously that is not an option here.
What I did just now is that used two canvases key out the wrong color to create an "video" with transparent background. It works great... but it's also rather heavy process.
In code it looks something like this: https://gist.github.com/petetnt/5577d6cf44466f411a72
Onwards to the next option: sampling the color and modifying the background accordingly. This has another drawback: the overall look and fell changes slightly.
Bots are better than you
Banned
If the solution is working and the rest of the page is not process-heavy itself ... might keep that one.Sorry, can't provide a fiddle right now, but consider a div that's split to half: 1 side is a div with color #123. The other side is video that has solid color background, also color #123
It results in something like this:
Turning HW Acceleration off or setting RGB to full makes Firefox look like Chrome (and IE and other browsers). But obviously that is not an option here.
What I did just now is that used two canvases key out the wrong color to create an "video" with transparent background. It works great... but it's also rather heavy process.
In code it looks something like this: https://gist.github.com/petetnt/5577d6cf44466f411a72
Onwards to the next option: sampling the color and modifying the background accordingly. This has another drawback: the overall look and fell changes slightly.
A rather simple (stupid?) option would be using a gradient background to ease the cut from the video's blue tone to the correct one on Firefox.
Although that would result in Firefox still having a different look compared to other browsers...
Tricky one.
PetriP-TNT
Member
Yup. I did the sample-a-pixel thing just now and the change is not as drastic as one would think. I'll go with that one for now.
Thanks for the help everyone. Still deciding what to go with since right now. My laptop is in good condition but the time is fucked up and I can't connect online unless I manually change the time every time. The charger was fucked up and it happened while my laptop was plugged in. Cuz right now I just want to avoid using the windows portion due to that issue.
WanderingWind
Mecklemore Is My Favorite Wrapper
Ahahahaa and I thought web design was hard before. Learning the intricacies of CMSs is basically like learning Roman algebra.
While on fire.
While on fire.
Daffy Duck
Member
Which CMSs you looking at?
We use a bespoke one here, but to get it upto modern standards is quite a bit of work and I was looking at other options available.
Thomasorus
Member
Are designers still using 960 grid? Is there something newer? I'm in need of a one-page layout but not those kind of masonry tiled designs since I have very specific elements I want available at all times and organized clearly with minimal scrolling. Think of it as a floor plan where you can click areas for detailed information.
So on linux now via an 8 GB usb and made whatever was leftover for persistence. Thinking I'll be doing the bulk of my coding on my desktop so eventually I'll get to making a partition there. Not worried about having enough space since the usb ubuntu will only be used when I'm not at home and have to use a laptop. Also only reason I'm not going to install on my desktop immediately is I don't want to go through installation process again right now lol.
But anyway yay, have a proper dev environment to work with now. Also I have no idea what I'm doing but at least I feel like Mr. Robot whenever I use the terminal
.
But anyway yay, have a proper dev environment to work with now. Also I have no idea what I'm doing but at least I feel like Mr. Robot whenever I use the terminal
.
D
Deleted member 30609
Unconfirmed Member
ES6/React+Redux/Webpack is super cool. That is all.
WanderingWind
Mecklemore Is My Favorite Wrapper
Oh, I'm still learning the very basics. Polopoly and WordPress are where I'm starting the learning process.
Good grief, let me vent for a bit here please.
We're 2 weeks from production release of the big flashy software I've built the front-end for and I've argued with the back-end guys because it's clear they never ever touched anything back-end related (and turned out true, by their very admission).
So, now we're bug fixing and refining stuff and a couple of things are totally sticking out like sore thumbs, but apparently no one except me gives a shit about them, when we totally have to change a couple of translation strings that don't break anything and can be easily changed in prod without having to rebuild the entire project.
1) Turns out back-end rarely sanitizes and escapes queries.
I've never even thought to test quotes in search fields because I thought they were using some prepared statement function that Hibernate totally has available, exactly like I would do with PHP/PDO without even thinking twice about it.
Apparently, they didn't prepare shit for LIKE comparisons, and now if our dear customers send a single quote, here's what they see:
I AM CRY, but especially for the back-end peeps, because they'll have to rewrite hundreds of queries just before the deadline.
2) Passwords. Oh, passwords.
Passwords are stored in plain text, always have been and always will be.
I pointed it out, like, the second they put the database online. No one cared.
We're gonna ship a product for a multinational with plain text passwords. Hurray!
3) The super user.
Now, this is linked to the previous point, but you know, it's also worse.
The software will have a super user with all permissions enabled, it can only be created and modified manually in the database, and it's obvious purpose is to fix eventual customer's screw-ups.
The super user is called "admin".
Its password is "admin".
Today I was reviewing the user manual the project manager's going to give to the customer, and when I read about the super user he told me, all proud of himself like it was the most important IT security breakthrough of this decade: "I didn't write the password in the manual, so we can give it only to important people and any other users won't ever know how to log in as the super user!"
I was, like: "yeah well, of course we're not giving away the key to the entire software to everybody, but I'm sure you're going to change the password before production, aren't you?".
He looked at me puzzled. "No, it's not gonna change. If I had to change it now, I would need to change all the DB population scripts and test them again. And what's the point? I'm not writing it in the user manual, they'll never know about it!"
Goddamit, why not going with "1234", then? At least it's different than the username...
4) The non relational DB.
We have this super-object that contains a tree of sub-objects, all hierarchically ordered and whatnot.
We built a table for the super-objects and a table for the sub-objects, and at that point... did we build a table to relate them in some kind of hierarchy?
Nope!
The great solution they came up with is to create an XML of the sub-objects tree and shoehorn it in a CLOB field of the super-object.
Cons:
- DB population scripts are an absurd chore when you have to populate thousands of super-objects containing XML trees of thousands of sub-objecs each;
- XML this long are inevitably prone to syntax errors, and they all show both in back- and front-end everytime the DB is burned down and rebuilt to insert a new super-object;
- the software is REST, so the back-end has to convert the XML to JSON before sending it to me, just for the fun of adding a completely avoidable layer of complexity to the system;
- of course for each of these sub-objects you also need to send a SELECT to their own table to get additional infos that cannot be put in the XML because they would exceed the CLOB size.
Pros: I honestly don't know, and the back-end guys don't know either.
5) They goodamn hardcoded the localization folder, and called it something like (the original is in Italian btw): "Test_Folder_Translations_for_the_Software". I'm sure the customers' IT guy will have more than a laugh, but I'm kinda dying of shame.
We're 2 weeks from production release of the big flashy software I've built the front-end for and I've argued with the back-end guys because it's clear they never ever touched anything back-end related (and turned out true, by their very admission).
So, now we're bug fixing and refining stuff and a couple of things are totally sticking out like sore thumbs, but apparently no one except me gives a shit about them, when we totally have to change a couple of translation strings that don't break anything and can be easily changed in prod without having to rebuild the entire project.
1) Turns out back-end rarely sanitizes and escapes queries.
I've never even thought to test quotes in search fields because I thought they were using some prepared statement function that Hibernate totally has available, exactly like I would do with PHP/PDO without even thinking twice about it.
Apparently, they didn't prepare shit for LIKE comparisons, and now if our dear customers send a single quote, here's what they see:
Code:
java.lang.IllegalArgumentException: org.hibernate.QueryException: expecting ''', found '<EOF>' (select u from someTable u where lower(u.someField) like '%'%' order by someOtherField ASC)2) Passwords. Oh, passwords.
Passwords are stored in plain text, always have been and always will be.
I pointed it out, like, the second they put the database online. No one cared.
We're gonna ship a product for a multinational with plain text passwords. Hurray!
3) The super user.
Now, this is linked to the previous point, but you know, it's also worse.
The software will have a super user with all permissions enabled, it can only be created and modified manually in the database, and it's obvious purpose is to fix eventual customer's screw-ups.
The super user is called "admin".
Its password is "admin".
Today I was reviewing the user manual the project manager's going to give to the customer, and when I read about the super user he told me, all proud of himself like it was the most important IT security breakthrough of this decade: "I didn't write the password in the manual, so we can give it only to important people and any other users won't ever know how to log in as the super user!"
I was, like: "yeah well, of course we're not giving away the key to the entire software to everybody, but I'm sure you're going to change the password before production, aren't you?".
He looked at me puzzled. "No, it's not gonna change. If I had to change it now, I would need to change all the DB population scripts and test them again. And what's the point? I'm not writing it in the user manual, they'll never know about it!"
Goddamit, why not going with "1234", then? At least it's different than the username...
4) The non relational DB.
We have this super-object that contains a tree of sub-objects, all hierarchically ordered and whatnot.
We built a table for the super-objects and a table for the sub-objects, and at that point... did we build a table to relate them in some kind of hierarchy?
Nope!
The great solution they came up with is to create an XML of the sub-objects tree and shoehorn it in a CLOB field of the super-object.
Cons:
- DB population scripts are an absurd chore when you have to populate thousands of super-objects containing XML trees of thousands of sub-objecs each;
- XML this long are inevitably prone to syntax errors, and they all show both in back- and front-end everytime the DB is burned down and rebuilt to insert a new super-object;
- the software is REST, so the back-end has to convert the XML to JSON before sending it to me, just for the fun of adding a completely avoidable layer of complexity to the system;
- of course for each of these sub-objects you also need to send a SELECT to their own table to get additional infos that cannot be put in the XML because they would exceed the CLOB size.
Pros: I honestly don't know, and the back-end guys don't know either.
5) They goodamn hardcoded the localization folder, and called it something like (the original is in Italian btw): "Test_Folder_Translations_for_the_Software". I'm sure the customers' IT guy will have more than a laugh, but I'm kinda dying of shame.
Bots are better than you
Banned
Wow ... ... wow, you sure this isn't some episode of a prank camera show?
I'm sure that even during my studies there wasn't a single one of my study colleagues who made such stupid stuff...
Is this one of your backend dev colleagues? Warning. 9GAG link, so possibly NSFW(?)
PetriP-TNT
Member
Lol wait, now something is turning back against me!
At the beginning of this project, the customer sent to the project manager a link with their company style guide.
It was basically a reskinned Bootstrap, with much less flexibility and depth (ie. no forms guidelines) and like 15 icons top (not that it would matter, but in a big app like this, it's cool to have a million icons set to choose from).
Problem was: my corporate proxy blocked out half the script and all the fonts (mostly every OpenSans variations, but my manager doesn't know that I know ).
So I asked him that if the client wanted us to follow their style guidelines, they just had to send me the actual files because, honestly, I'm not that into reverse engineer a minified CSS file, while a proxy locks me out of something that may or may not be essential to the correct visualization of the page.
The project manager asked them. They didn't answer.
I asked again, but the PM then said: "eh, but the guy there is not a tech guy, I'm sure if he sent us that link, that's the best he can give us".
So I said: "ok, it's up to you. I'm gonna use Bootstrap, because it's pretty much the same framework, but for colors, sizes and fonts, I'll do as I want and if/when they'll give us the actual files, I'm gonna update my work as best as I can."
Three months later, today, the client asks the PM if we followed their guidelines.
I'm totally waiting for their call to end to know my destiny.
At the beginning of this project, the customer sent to the project manager a link with their company style guide.
It was basically a reskinned Bootstrap, with much less flexibility and depth (ie. no forms guidelines) and like 15 icons top (not that it would matter, but in a big app like this, it's cool to have a million icons set to choose from).
Problem was: my corporate proxy blocked out half the script and all the fonts (mostly every OpenSans variations, but my manager doesn't know that I know
).So I asked him that if the client wanted us to follow their style guidelines, they just had to send me the actual files because, honestly, I'm not that into reverse engineer a minified CSS file, while a proxy locks me out of something that may or may not be essential to the correct visualization of the page.
The project manager asked them. They didn't answer.
I asked again, but the PM then said: "eh, but the guy there is not a tech guy, I'm sure if he sent us that link, that's the best he can give us".
So I said: "ok, it's up to you. I'm gonna use Bootstrap, because it's pretty much the same framework, but for colors, sizes and fonts, I'll do as I want and if/when they'll give us the actual files, I'm gonna update my work as best as I can."
Three months later, today, the client asks the PM if we followed their guidelines.
I'm totally waiting for their call to end to know my destiny.
Bots are better than you
Banned
Now, where's that popcorn when you need it?
Next, your PM is most likely the next in line to decide ... if he didn't stop you or was ok with you doing the frontend like you did, it's his responsibility.
Pretty sure this has to be handled between the PM and your customer.
And still, this doesn't cover the unbelievable stuff you "backend" devs did!!!!!
Uhm ... if they have such a corporate styleguide, they have to have the files ... tech guy or not, someone has to be "tech" enough to get this done.
Next, your PM is most likely the next in line to decide ... if he didn't stop you or was ok with you doing the frontend like you did, it's his responsibility.
Pretty sure this has to be handled between the PM and your customer.
And still, this doesn't cover the unbelievable stuff you "backend" devs did!!!!!
Not only I'm sure the client has the files (but of course, why wouldn't it??), but if I look into the minified CSS of the style guide, the first line is a comment saying "please install as a bower package", so I'm kinda sure someone there knows something about it.
Bots are better than you
Banned
Freaking LOL ... yeah i think you should be more than safe. ^^Not only I'm sure the client has the files (but of course, why wouldn't it??), but if I look into the minified CSS of the style guide, the first line is a comment saying "please install as a bower package", so I'm kinda sure someone there knows something about it.
If your PM has any negotiation-skills he should even be able to put the guilt-card back to your client.
WanderingWind
Mecklemore Is My Favorite Wrapper
Geez, makes my headbutting with the guy whose entire design philosophy ended somewhere in 2005 and whose entire visible spectrum is apparently between blue and gray fairly non-eventful.
Oh well, the PM asked me doe-eyed to pretty please at least adapt the colors to the client style, and even though, inspecting the code, I'm pretty sure I'm gonna miss some pseudoclass, it's not all that hard to do.
What is gonna be fun, instead, is the query sanitization. Both back-end guys are currently busy trying to make the integration layer work (and they're totally late on this) so, as the front-end is basically ready and somehow bug free... it fell on me.
Even though I haven't written a line of Java since the first year of university (like 12 years ago), and the only one time I touched the back-end code I screwed up everything comparing strings with == instead of .equals().
Now I'm gonna study Hibernate, find out how to do prepared statements and implement them on roughly a hundred of queries scattered around the project.
At least I can laugh thinking of the immortal Fight Club quote:
"Whichcar IT company do you work for?"
"A major one."
What is gonna be fun, instead, is the query sanitization. Both back-end guys are currently busy trying to make the integration layer work (and they're totally late on this) so, as the front-end is basically ready and somehow bug free... it fell on me.
Even though I haven't written a line of Java since the first year of university (like 12 years ago), and the only one time I touched the back-end code I screwed up everything comparing strings with == instead of .equals().
Now I'm gonna study Hibernate, find out how to do prepared statements and implement them on roughly a hundred of queries scattered around the project.
At least I can laugh thinking of the immortal Fight Club quote:
"Which
"A major one."
Yes, I could do a find and replace with something like this:
Code:
value.replace("'", "BACKSLASH'");Oh well, I guess the code won't win any prize even if I carefully prepare all statements anyway...
EDIT: lol, even GAF escapes the backslashes
OminoMichelin
Member
That's hilarious, but I wouldn't reveal the weaknesses of your software on a forum. People can be really good at guessing who you really are behind your nickname.
Yes, I thought about that, but at the same time, I work as an external consultant for a huge ass multinational, and I think my name cannot be linked to that particular project except for accounting documents that I guess aren't really divulged outside the "chain of command".
Anyway, I've always been super careful to never say the name of the client anywhere (here or, like, FB or Linkedin) - not that I signed an NDA or something, but still - so as far as Internet goes, you can easily find out who I work for, but not what I'm actually doing.
PetriP-TNT
Member
To be honest, that kinds of stuff is so basic that they would be on the short list of first 10 things to try. Revealing them beforehand is like ummm... showing good will by not going for security by obscurity ^_^
Today I have been working on a small Brackets feature which hopefully will be ship sometime in the future if I get it finished.
Starphoenix
Member
Is there a great place to learn how to develop for Wordpress that is a little more newbie friendly than the Wordpress documentation? The website I worked on for my summer internship is beginning to run into some problems and they're going to pay me to work on the website some more -- don't necessarily feel like I should be paid considering how I'm kind of just stumbling through Wordpress support... Mainly the issues are coming from Wordpress; because the theme I cobbled together was an HTML template reconstructed into PHP. >_>
So I might have asked this before, but does anyone have suggestions for a lightweight jQuery image slider/carousel that is responsive and allows for full screen? I found a great slider, but it doesn't have play/pause functionality or full screen. The one I'm using now takes nearly 300ms to load, way too long, and it is only responsive down to like 500px, any smaller and shit hits the fan.
Daffy Duck
Member
I've used this one before:
https://dev7studios.com/products/nivo-slider-wordpress-plugin/
Also heard good things about this:
http://kenwheeler.github.io/slick/
https://dev7studios.com/products/nivo-slider-wordpress-plugin/
Also heard good things about this:
http://kenwheeler.github.io/slick/
Switched from Brackets to Atom exclusively for working JSX highlighting.
Redux hurts my head, but I finally figured it out, I think.
ES6 is pretty cool.
Tried to set up eslint with Atom. Gave up. 2 much configuration 4 me.
Redux hurts my head, but I finally figured it out, I think.
ES6 is pretty cool.
Tried to set up eslint with Atom. Gave up. 2 much configuration 4 me.
WanderingWind
Mecklemore Is My Favorite Wrapper
Does anybody know how to embed a YouTube playlist so that it has the next videos up on the right hand side, like the normal YouTube playlist's appearance?
Bots are better than you
Banned
WanderingWind
Mecklemore Is My Favorite Wrapper
I poked around in that, I'm not seeing it. It seems like this should be an easy fix, like a parameter at the end of the embed URL or something.
PetriP-TNT
Member
Are you using the embed code from the playlist itself?
It should look something like:
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=XXXXXXXXXX_43qlg_SaMErXGlw" frameborder="0" allowfullscreen></iframe>
If you are doing it programatically, see: https://developers.google.com/youtube/v3/guides/implementation/playlists
WanderingWind
Mecklemore Is My Favorite Wrapper
Yeah, so when you embed from YouTube you get something that looks like this
I'm looking to get this though
As near as I can tell, it's not an option in any embed setting in YouTube. Am I just crazy missing something?
I'm looking to get this though
As near as I can tell, it's not an option in any embed setting in YouTube. Am I just crazy missing something?