Web Dev Questions That Don't Need Their Own Thread v4

[scroul]

I am trying to make something that looks like a dropdown with jquery and a ul li list and i need it to push down two buttons that are bellow it when the alternativs slides out and i can not find a solution.
jquery:

    jQuery('#dropdown li ul').hide();
    jQuery('#dropdown li a').click(function () {
        jQuery('#dropdown li ul').slideToggle();
    });

html:

            <ul id="dropdown">
                <li>
                    <a id="selected" href="#">Universitet</a>
                    <ul>
                        <li><a href="#">Skellefteå</a></li>
                        <li><a href="#">Luleå</a></li>
                        <li><a href="#">Örebro</a></li>
                    </ul>
                </li>
            </ul>

css:

#dropdown{
	width:260px;
	padding:0;
	border-bottom:1px solid rgba(255, 255, 255, 0.1);
	text-align:center;
}
#dropdown li{
	height:10px;
	padding: 10px 10px 10px 10px;
	margin-bottom:10px;
}
#dropdown li ul{
	padding:0;
	margin:0;
	margin-top:15px;
	text-align:center;
}

[TheSyntaX]

This is first time I've ever tried recording execution times on functions on server, I am a bit confused if my results are actually legit?

The way I do it:

js function(){
timer start;

timer end;

log(end-start) //In millis
}

For user login, his details are checked using Ajax, the response time is 1 millisecond, is that legit?

While running socket.io on node.js, when doing sql query from node to get users data and print it to page the response time is 9 milliseconds.

I mean am I doing it right or am I 100% wrong?

Server:
DigitalOcean
Location: London
CPU: Intel Xeon E5-2630L v2 @ 2.40 Ghz
RAM: 512Mb
HDD: 20 GB SSD
Speed:
[IMG]https://www.speedtest.net/result/4179126546.png[/IMG]
For some reason it picks US server instead of London for speed test.

So can someone give me brief explanation if that's real or not?

[editline]28th February 2015[/editline]

nvm, I got it connected to London:
[img]https://www.speedtest.net/result/4179136423.png[/img]

[Unknown]

[QUOTE=arleitiss;47233391]This is first time I've ever tried recording execution times on functions on server, I am a bit confused if my results are actually legit?

The way I do it:

js function(){
timer start;

timer end;

log(end-start) //In millis
}

For user login, his details are checked using Ajax, the response time is 1 millisecond, is that legit?

While running socket.io on node.js, when doing sql query from node to get users data and print it to page the response time is 9 milliseconds.

I mean am I doing it right or am I 100% wrong?
[/QUOTE]

Without being able to see all of your code in the js function, my guess would be, if you code is

js function(){
timer start;

ajax_request(callback function() {/* stuff */});

timer end;

log(end-start) //In millis
}

and ajax_request is making an async call, then all you're timing is the time it takes to make the ajax request.

[TheSyntaX]

[QUOTE=DaMastez;47234273]Without being able to see all of your code in the js function, my guess would be, if you code is

js function(){
timer start;

ajax_request(callback function() {/* stuff */});

timer end;

log(end-start) //In millis
}

and ajax_request is making an async call, then all you're timing is the time it takes to make the ajax request.[/QUOTE]

Yeah that's basically the function I do.
So it calculates time before the response is received I assume?

[Svenskunganka]

[QUOTE=arleitiss;47234443]Yeah that's basically the function I do.
So it calculates time before the response is received I assume?[/QUOTE]

When working with asyncronous methods you basically have to add the timer end in the callback (or [URL="https://www.promisejs.org/"]Promise[/URL]([URL="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"]MDN[/URL]) if you use that instead), e.g:

function ajaxRequest (callback) {
  // request...
  callback();
}

(function() {
  timer.start();
  ajaxRequest(function() {
    timer.end();
    console.log(timer.result);
  }
});

[TheSyntaX]

[QUOTE=Svenskunganka;47234487]When working with asyncronous methods you basically have to add the timer end in the callback, e.g:

function ajaxRequest (callback) {
  // request...
  callback();
}

(function() {
  timer.start();
  ajaxRequest(function() {
    timer.end();
    console.log(timer.result);
  }
});

[/QUOTE]

Oh, and what about mysql queries? I got 9 milliseconds reply, but I probably did it wrong again.
Same thing?

[Svenskunganka]

[QUOTE=arleitiss;47234497]Oh, and what about mysql queries? I got 9 milliseconds reply, but I probably did it wrong again.
Same thing?[/QUOTE]

You could do this:

(Note that the timer object is not existing so you'd have to create that yourself)

timer.start();

mysql.query('SELECT * FROM table', function (err, rows, fields) {
  if(err) throw err;
  timer.end();
  console.log(timer.result);
});

[TheSyntaX]

[QUOTE=Svenskunganka;47234520]You could do this:

(Note that the timer object is not existing so you'd have to create that yourself)

timer.start();

mysql.query('SELECT * FROM table', function (err, rows, fields) {
  if(err) throw err;
  timer.end();
  console.log(timer.result);
});

[/QUOTE]

I had it like this:

timer.start();

mysql.query('SELECT * FROM table', function (err, rows, fields) {
  if(err) throw err;
  console.log(timer.result);
});
  timer.end();

[Cyberuben]

[QUOTE=arleitiss;47234575]I had it like this:

timer.start();

mysql.query('SELECT * FROM table', function (err, rows, fields) {
  if(err) throw err;
  console.log(timer.result);
});
  timer.end();

[/QUOTE]

That's not how async works. Your code will run in sequence, except for the callback defined in the mysql.query call.

[TheSyntaX]

Oh, well thanks for lesson so, I always thought that function complete execution cycle starts at start and finishes at end. + I always thought execution will halt at say ajax call or mysql query and wait for it to come back, only then it would proceed.

Also while I am at it - Is there any way to simulatate 100 users connected?
My situation is: I have Node.js + Socket.io chat application, works fine and runs fine but I would love to test like how it acts when 100 users are connected. I have feeling my thing might go down.

[Svenskunganka]

[QUOTE=arleitiss;47234624]Oh, well thanks for lesson so, I always thought that function complete execution cycle starts at start and finishes at end. + I always thought execution will halt at say ajax call or mysql query and wait for it to come back, only then it would proceed.

Also while I am at it - Is there any way to simulatate 100 users connected?
My situation is: I have Node.js + Socket.io chat application, works fine and runs fine but I would love to test like how it acts when 100 users are connected. I have feeling my thing might go down.[/QUOTE]

That's why Javascript is called non-blocking and asynchronous.

It's not easy to emulate 100 clients chatting each with an open socket connection.

Any reason you're not using a document-driven database over MySQL? For a chat application you could even use [URL="http://redis.io/"]Redis[/URL] and all the chat messages will be stored in-memory, so they're accessed really fast. Of course you should set a limit to how many messages can be stored there and have logs in another database like MongoDB or the TokuMX fork.

[TheSyntaX]

[QUOTE=Svenskunganka;47234720]That's why Javascript is called non-blocking and asynchronous.

It's not easy to emulate 100 clients chatting each with an open socket connection.

Any reason you're not using a document-driven database over MySQL? For a chat application you could even use [URL="http://redis.io/"]Redis[/URL] and all the chat messages will be stored in-memory, so they're accessed really fast. Of course you should set a limit to how many messages can be stored there and have logs in another database like MongoDB or the TokuMX fork.[/QUOTE]

I am still new to Node.js and dynamic websites in general, only used standard PHP + MySQL before for data storing and loading. Was given 9 months to make final year project (Graduating in 2 months now) so I was really diving into this as much as I can using all I know.

I honestly wish I had more time to do this project, once I graduate though, I plan to keep my project and not dismiss of it, I plan to properly re-structure it and optimize just for myself as hobby.

Literally right now I have probably worst possible login system:

Cloud server runs nginx + PHP-FPM. So website has login/registration + user accounts like a mini-social network with avatar builder (drawn parts myself etc..). have javascript avatar builder basically so far with over 2000 variations of unique characters, you can select like shirts, pants, shoes, eyes, mouth, hair, skin etc..

Then once user logs in he's redirected to nginx running on port 3000 where express gets POST variables (I was in hurry so this was fastest and stupidest way probably to implement authorization) and user can chat.
Also if user refreshes chat window, he's disconnected (because POST variables that were given when he was redirected are not there anymore).

I know it's stupid and it's loosely tied together website but I really really wish I could do better, I will continue learning though. Also apparently this is best project in my whole course and I might get medal for it (Best projects get medals) compared to other students websites (most have just PHP +MySQL + HTML + some basic CSS)

So yeah, I am trying to learn from this as much as I can not to make same mistakes in future :(

[Svenskunganka]

[QUOTE=arleitiss;47234796]I am still new to Node.js and dynamic websites in general, only used standard PHP + MySQL before for data storing and loading. Was given 9 months to make final year project (Graduating in 2 months now) so I was really diving into this as much as I can using all I know.

I honestly wish I had more time to do this project, once I graduate though, I plan to keep my project and not dismiss of it, I plan to properly re-structure it and optimize just for myself as hobby.

Literally right now I have probably worst possible login system:

Cloud server runs nginx + PHP-FPM. So website has login/registration + user accounts like a mini-social network with avatar builder (drawn parts myself etc..). have javascript avatar builder basically so far with over 2000 variations of unique characters, you can select like shirts, pants, shoes, eyes, mouth, hair, skin etc..

Then once user logs in he's redirected to nginx running on port 3000 where express gets POST variables (I was in hurry so this was fastest and stupidest way probably to implement authorization) and user can chat.
Also if user refreshes chat window, he's disconnected (because POST variables that were given when he was redirected are not there anymore).

I know it's stupid and it's loosely tied together website but I really really wish I could do better, I will continue learning though. Also apparently this is best project in my whole course and I might get medal for it (Best projects get medals) compared to other students websites (most have just PHP +MySQL + HTML + some basic CSS)

So yeah, I am trying to learn from this as much as I can not to make same mistakes in future :([/QUOTE]

I understand. But this could all be done [B]a lot[/B] faster if you only used Node.js and scaffolded with a Yeoman generator. Along with that you could save a bunch of time by using LESS (CSS pre-processor) and Jade (Node.js's HTML templating engine), although there's much to take in but when you get to the part when you're a hired developer, you're going to find out that there won't be enough time to write everything from scratch each time.

During my employment I've found out that putting a lot of work into setting up a nice Yeoman scaffolding generator, a custom grunt environment really pays off, as it's something I use in every project. Right now I got a Yeoman generator that generates MVC setup with options to enable user handling (login, logout, register, roles, cookies, sessions, etc), enable socket.io and a lot more things. And this alone generates about 40% of each project I make, with a single command - so it really saves time in the long run.

Since you got a foot in Node.js now, I'd really like to see you take the right path as well. If you, and you really should, master AngularJS and Node.js, there's absolutely [B]nothing[/B] you can't do. Those two work really, and I mean really fucking good together. The huge performance and stability they bring is outrageous, and putting something like Redis and MongoDB behind it makes it even faster.
And not to mention MongoDB's GridFS. Storing files inside GridFS is amazing, and here's an article that explains it really well: [URL="http://blog.mongodirector.com/when-to-use-gridfs/"]When to use GridFS?[/URL]
TL;DR of the article: Basically, you can have all your user uploaded images/files in the database, along with the normal database related stuffs such as users, logs, content, etc. So whenever you need to backup your entire website, you only have to backup your MongoDB database and you're done. Also, if you shard the database accross multiple servers you can bring something completely new to the field; file system load balancing and redundancy which is fucking amazing.

Me and a colleague is working on (currently planning structure) a CMS. A CMS so powerful it'll outperform, outsmart and "outsimple" any CMS that's currently out there. It'll all be built with AngularJS, Node.js (preferably ran on io.js), MongoDB and Redis. And the best part about it is that it's going to be completely open source. I am very excited about this project.

[TheSyntaX]

[QUOTE=Svenskunganka;47235041]I understand. But this could all be done [B]a lot[/B] faster if you only used Node.js and scaffolded with a Yeoman generator. Along with that you could save a bunch of time by using LESS (CSS pre-processor) and Jade (Node.js's HTML templating engine), although there's much to take in but when you get to the part when you're a hired developer, you're going to find out that there won't be enough time to write everything from scratch each time.

During my employment I've found out that putting a lot of work into setting up a nice Yeoman scaffolding generator, a custom grunt environment really pays off, as it's something I use in every project. Right now I got a Yeoman generator that generates MVC setup with options to enable user handling (login, logout, register, roles, cookies, sessions, etc), enable socket.io and a lot more things. And this alone generates about 40% of each project I make, with a single command - so it really saves time in the long run.

Since you got a foot in Node.js now, I'd really like to see you take the right path as well. If you, and you really should, master AngularJS and Node.js, there's absolutely [B]nothing[/B] you can't do. Those two work really, and I mean really fucking good together. The huge performance and stability they bring is outrageous, and putting something like Redis and MongoDB behind it makes it even faster.
And not to mention MongoDB's GridFS. Storing files inside GridFS is amazing, and here's an article that explains it really well: [URL="http://blog.mongodirector.com/when-to-use-gridfs/"]When to use GridFS?[/URL]
TL;DR of the article: Basically, you can have all your user uploaded images/files in the database, along with the normal database related stuffs such as users, logs, content, etc. So whenever you need to backup your entire website, you only have to backup your MongoDB database and you're done. Also, if you shard the database accross multiple servers you can bring something completely new to the field; file system load balancing and redundancy which is fucking amazing.

Me and a colleague is working on (currently planning structure) a CMS. A CMS so powerful it'll outperform, outsmart and "outsimple" any CMS that's currently out there. It'll all be built with AngularJS, Node.js (preferably ran on io.js), MongoDB and Redis. And the best part about it is that it's going to be completely open source. I am very excited about this project.[/QUOTE]

Forgot to mention - part of my project is also android app which 100% replicates website but for mobile app (native java).
Project marks go for complexity of project, so I decided not to take risks of making too simple app and said I will do this big website (without knowing how), and app.

[Party Boy]

Any idea why my bootstrap isn't working?
If I go onto the doc and copy their exact project, some things mess up.
For example, the jumbotron gets a background color when it shouldn't, the navbar has no background color etc.
I literally copied another example of a jumbotron and it made it a wrapping jumbtron and everything in it was centered to the left. I don't remember it being like this

[NickNack1234]

Hey guys, How can i become a great GUI designer over night? At work i have made a huge automation suite for a whole bunch of business systems and a few monitoring dashboards. They are now being displayed all over the head office on TVs and huge wall screens. I never expected it would become so widely used and it looks terrible.

Are there any like best practices or quick tip videos on making stuff look pretty?

[buhbang]

[QUOTE=NickNack1234;47260425]Hey guys, How can i become a great GUI designer over night? At work i have made a huge automation suite for a whole bunch of business systems and a few monitoring dashboards. They are now being displayed all over the head office on TVs and huge wall screens. I never expected it would become so widely used and it looks terrible.

Are there any like best practices or quick tip videos on making stuff look pretty?[/QUOTE]

hire a designer or look for inspirations [url]https://dribbble.com/[/url]

[editline]4th March 2015[/editline]

[QUOTE=Over-Run;47258732]Any idea why my bootstrap isn't working?
If I go onto the doc and copy their exact project, some things mess up.
For example, the jumbotron gets a background color when it shouldn't, the navbar has no background color etc.
I literally copied another example of a jumbotron and it made it a wrapping jumbtron and everything in it was centered to the left. I don't remember it being like this[/QUOTE]

it helps to give source code via jsfiddle or gist. you might not be including the files correctly.

[Pugsworth]

If I have images occupying the same space, but I'm masking them using css 'mask', is there a way for :hover to work in the masked areas independently for each image?

Only the top-most image is working, which is logical, but not the desired outcome.

[Party Boy]

Well for example, if I just copy the source code from here: [url]http://getbootstrap.com/examples/justified-nav/[/url]

It doesn't work correctly, the jumbotron has the background color of the navbar, the navbar has no colors, the jumbotron is aligned to the left and is stretched to fit the width instead of being a narrow one.

[Cyberuben]

[QUOTE=Over-Run;47262574]Well for example, if I just copy the source code from here: [url]http://getbootstrap.com/examples/justified-nav/[/url]

It doesn't work correctly, the jumbotron has the background color of the navbar, the navbar has no colors, the jumbotron is aligned to the left and is stretched to fit the width instead of being a narrow one.[/QUOTE]

That's probably because the includes do not link properly. If you look at the source, you see a lot of relative paths.

<link rel="icon" href="../../favicon.ico"> on the page [url]http://getbootstrap.com/examples/justified-nav/[/url] resolves to [url]http://getbootstrap.com/favicon.ico[/url], <link href="justified-nav.css" rel="stylesheet"> on the same pages resolves to [url]http://getbootstrap.com/examples/justified-nav/justified-nav.css[/url]

You must make sure you link the includes correctly, and the reason why your thing doesn't work is because you do not load the theme they use on that page (which is the justified-nav.css)

[Scratch]

Simple help,
I have a text form, is there any way to make it expand width from min-width as text overflows?
Websearch isn't helping, probably using shit keywords
css prefered, I have jquery though

[Silentfood]

So I have a container for my div elements, each second or so a new div will be appended into the container. How do I tell the div to render / append backwards (down to up).

i.e. Like a chat system, a message appends to the bottom of the container and pushes upwards.

[diwako]

You can try setting a max height to your container div and make it scroll down to the last div every time you append.

[buhbang]

[QUOTE=Silentfood;47268835]So I have a container for my div elements, each second or so a new div will be appended into the container. How do I tell the div to render / append backwards (down to up).

i.e. Like a chat system, a message appends to the bottom of the container and pushes upwards.[/QUOTE]

you want something like this? [url]http://jsfiddle.net/jung3o/28tgc0e0/[/url]

[Silentfood]

[QUOTE=jung3o;47270101]you want something like this? [url]http://jsfiddle.net/jung3o/28tgc0e0/[/url][/QUOTE]

Perfect!

[JohnnyCrazy]

For an upcoming project (Some kind of Control Panel), I'm looking for the best way to write it clean and easy to manage.
I came across Less/Sass, would you pick it over pure oldschool CSS?

[Cuel]

yep

[Kwaq]

[QUOTE=johnnyaka;47275058]For an upcoming project (Some kind of Control Panel), I'm looking for the best way to write it clean and easy to manage.
I came across Less/Sass, would you pick it over pure oldschool CSS?[/QUOTE]

I'd say its more important to understand how to write clean markup, since your CSS will only be easy to maintain if the markup is also well maintained.

[Fourier]

Less is quite an upgrade for CSS because you have functions in LESS and variables

[editline]7th March 2015[/editline]

and you can use math like +, -,* ,/

[Richy13]

Are there any services/API's that let you see how many times a keyword/something has been mentioned on the internet in a given period of time? Say the last hour