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

[Svenskunganka]

[QUOTE=johnnyaka;47374071]Hey,

Is it bad practice to keep user- and admin-code (javascript) in one .js file?
Of course there are server-side checks for the admin-functions, so it can't be abused.

It just feels wrong putting it into another .js file, since they both need the same helper-functions.[/QUOTE]

Unless you bundle your scripts into one file afterwards you should squeeze it all into a single file. Reduce the amount of requests and you'll get better load times.

I mean you could reduce the amount of blocking requests to 3 by bundling all your CSS and Javascript. If you don't have a shit ton of background-images set in CSS you could bundle all of those as well, forcing the user to download all images in a single request and using CSS to find respective image's position in the bundled image.

Also, always put the HTML5 async attribute on your scripts which makes it non-blocking on browsers that support it.

[Party Boy]

[QUOTE=Kwaq;47373384]here's some i have been working on today, i'll comment them a bit

/* activate on screens below 550 width */
@media screen and (max-width: 550px) {
	.s2,.s3,.s3,.s4,.s5,.s6,.s6,.s7,.s8,.s9,.s10,.s11{
		width:calc(100% - 0.4em);
		height:auto !important;
	}
	.s1{
		width:calc(50% - 0.4em);
	}
}

/* activate on screens below between 551 and 800 width */
@media screen and (min-width: 551px) and (max-width:800px) {
	.s7,.s8,.s9,.s10,.s11{
	}
	.s4,.s5,.s6,.s2,.s3{
	}
	.s1{
	}
}

/* activate on screens below between 801 and 960 width */
@media screen and (min-width: 801px) and (max-width:960px) {
	.s9,.s10,.s11,.s12{
	}
	.s5,.s6,.s7{
	}
	.s4{}
	.s8{}
}

you have to choose the media type (screen, printer page etc) for it to select a media context

it really helps to hop on to chrome and enable dev tools, which shows you the media query breakpoints visually:
[t]http://a.pomf.se/brzbui.png[/t][/QUOTE]

I'm guessing the .s1 etc are meant to be the classes I want to get affected by it?
If I put font-size: 1vh inside .fabrics p{}, it doesn't work

[Kwaq]

[QUOTE=Over-Run;47376622]I'm guessing the .s1 etc are meant to be the classes I want to get affected by it?
If I put font-size: 1vh inside .fabrics p{}, it doesn't work[/QUOTE]

Is your P inline styled or !important styled (could be specifity issue)? Does your browser support vh vw?

s1,s2 are the sections that are in my grid system, which I want to change depending on resolution.

[url]http://codepen.io/anon/pen/jEXjZW[/url] here's a working example of a P using vh in a media query.

[Party Boy]

I haven't styled it really just gave it a different font?
I'm using chrome I think that supports it.
Ah okay they are sections, so should I use my div instead?
Like I have a div called fabrics which is a picture and has a paragraph in it but the text stays the same size and pushs outside when I resize the browser so I really don't know

[Insight]

So trying to make an input that has buttons on it and what not. However can't seem to figure a part of this out.

[img]http://puu.sh/gMj1u/da0ab2ed48.png[/img]
[img]http://puu.sh/gMj3h/416fadd808.png[/img]

The buttons that are on the new line, everything is float left (at the moment). However I want the buttons and input to be on the same line. I had it working with just 1 button however that is set to specifically account for the button.

What I am wanting is that the CSS can be used to add as many buttons as they like, so I can place 2 and it still reacts the same way.

Here is a jsfiddle:
[url]https://jsfiddle.net/ut8Lyen5/[/url]

as you can tell the buttons are fine on the right but I want the input to stretch to always fit the div and not push buttons to new line.

[TrinityX]

[QUOTE=TH3_L33T;47379570]So trying to make an input that has buttons on it and what not. However can't seem to figure a part of this out.

[img]http://puu.sh/gMj1u/da0ab2ed48.png[/img]
[img]http://puu.sh/gMj3h/416fadd808.png[/img]

The buttons that are on the new line, everything is float left (at the moment). However I want the buttons and input to be on the same line. I had it working with just 1 button however that is set to specifically account for the button.

What I am wanting is that the CSS can be used to add as many buttons as they like, so I can place 2 and it still reacts the same way.

Here is a jsfiddle:
[url]https://jsfiddle.net/ut8Lyen5/[/url]

as you can tell the buttons are fine on the right but I want the input to stretch to always fit the div and not push buttons to new line.[/QUOTE]

You need to set the input width, or mess with "display: table-cell;" and "display: table;".

[Svenskunganka]

Bootstrap uses the table layout as TrinityX pointed out, but you could also use flexboxes to achieve this, although IE9 and below does not support flexboxes so if you need backward compatibility you should prolly stick to the table layout. With flexbox: [url]https://jsfiddle.net/ut8Lyen5/1/[/url]

[editline]edited:[/editline]

You should also reduce the amount of floats you use, they tend to break shit unless you clearfix 'em.

[Insight]

[QUOTE=Svenskunganka;47379835]
[editline]edited:[/editline]

You should also reduce the amount of floats you use, they tend to break shit unless you clearfix 'em.[/QUOTE]

I do clearfix them.

Thanks for the help though, looks like I got it working. Thanks a ton!

[ifaux]

why is backend web dev so damn disgusting
edit: actually almost every single web development related thing with the exception of html and css (which barely make the cut as "barely sensible") so just ????

[Kwaq]

[QUOTE=ifaux;47394666]why is backend web dev so damn disgusting
edit: actually almost every single web development related thing with the exception of html and css (which barely make the cut as "barely sensible") so just ????[/QUOTE]

do your back end in c

[TCWilliamson]

Does anyone have any good suggestions for a web-hosting service? I've been thinking of making a website for some time.

Thanks!

[TCWilliamson]

[QUOTE=Rocket;47395112]What language?[/QUOTE]

Just PHP + HTML, the standard ones. ASP.NET could be interesting to have but I'm not that bothered about it.

[ifaux]

is there a way to fallback to an image if a font isn't available

i.e. i have this logo in lucida grande but windows and iOS (lol) don't have it and i really would rather not fall back to arial or helvetica or some shit for obvious reasons

[Kwaq]

its only possible to tell after the website has been rendered client side

so javascript if anything

[url]http://download.remysharp.com/font.js[/url]

this script checks width of the element (a change in width means a font change happens) therefore font is installed

[Party Boy]

Is anybody able to get this working?
[url]http://codepen.io/brenden/pen/Kwbpyj[/url]

I made a html, css and jquery files, but for some reason it just isn't styling the page what so ever, it just looks like a list.

[Scratch]

[QUOTE=Over-Run;47398199]Is anybody able to get this working?
[url]http://codepen.io/brenden/pen/Kwbpyj[/url]

I made a html, css and jquery files, but for some reason it just isn't styling the page what so ever, it just looks like a list.[/QUOTE]

Did you fix it?
looks fine to me

[Party Boy]

[QUOTE=Scratch.;47398266]Did you fix it?
looks fine to me[/QUOTE]

Nope. Yeha it looks fine on the site but when I copy the code into files and try it, it doesn't work. Just looks like a list of unstyled text with no js functionality.

[Richy13]

Does anyone know of any nice looking but less used bootstrap themes? I dont want to stop using bootstrap but Im fed up of all sites looking fairly similar..

[Svenskunganka]

[QUOTE=Over-Run;47398729]Nope. Yeha it looks fine on the site but when I copy the code into files and try it, it doesn't work. Just looks like a list of unstyled text with no js functionality.[/QUOTE]

You did add the js and css files with

<link rel="stylesheet" href="css/style.css"/>

<script src="js/script.js"></script>

in the HTML afterwards, right?

[Party Boy]

Yeah I did.
I managed to get the css working, it wasn't previously because the code copied from that site was using CSS LESS and I wasn't so I just converted it. However now it displays right, the jquery code isn't executing when i click on things.
I have included the jquery CDN and the functions.js file I added the code into.

EDIT

I got it working, had to make the js thing a function and call it in the html

[TCWilliamson]

[QUOTE=nuttyboffin;47395148]Looking for a web host, Just PHP + HTML, the standard ones. ASP.NET could be interesting to have but I'm not that bothered about it.[/QUOTE]

No suggestions?

[J Wall]

[QUOTE=nuttyboffin;47402173]No suggestions?[/QUOTE]

[url=http://facepunch.com/showthread.php?t=1216736]DoRoyal[/url].

[a7y]

[QUOTE=ifaux;47394666]why is backend web dev so damn disgusting
edit: actually almost every single web development related thing with the exception of html and css (which barely make the cut as "barely sensible") so just ????[/QUOTE]

if it's disgusting you're doing it wrong

[Gufu]

I am trying to get FB feed working for a client - I want to be able to access their public feed through Javascript (this is important due to reasons), get appropriate info in JSON form, and then properly format it in dynamic way. Problem is - it seems that access token is required (causing either Error 104 or 2500), which is not really possible with JS, because it's client-side.

If it wasn't for the fact that the feed must appear on html pages, I'd just do this in php, but it's not an option. Any help?

[dexon]

(php)
When I do:

$fhandle = fopen($fname,"r+");
$content = fread($fhandle,filesize($fname));
$int = intval($content)+1;
$content = str_replace($content, $int, $content);
fwrite($fhandle,$content);
fclose($fhandle);

where $content is 0,
why 01 is written instead of 1 ? :O

Also, if $content is 23, then 2324 is written.

[b]Edit:[/b] Oh, well, "r+" is useless then.
Fixed.

[JohnnyCrazy]

[QUOTE=Svenskunganka;47374155]Unless you bundle your scripts into one file afterwards you should squeeze it all into a single file. Reduce the amount of requests and you'll get better load times.

I mean you could reduce the amount of blocking requests to 3 by bundling all your CSS and Javascript. If you don't have a shit ton of background-images set in CSS you could bundle all of those as well, forcing the user to download all images in a single request and using CSS to find respective image's position in the bundled image.

Also, always put the HTML5 async attribute on your scripts which makes it non-blocking on browsers that support it.[/QUOTE]

Thanks, I ended up installing an extension which squashes all files into one request :)

Some other problem I'm currently thinking about:
We got some kind of support system, where people can submit tickets. Since sometimes one ticket was processed by two people at the same time, we implemented some kind of rubbish MySQL solution.
Now I'm thinking about a new solution and came to following possible solution:

A WebSocket-Server (cron-job'ed so it should be always up) in PHP/NodeJS with Socket.io on the client-side. It will send the current number/names of people to all connected clients. Is this good for production-mode? I just don't like the fact I have to run an extern script, but I think it's not possible inside a Web-Server, is it?

[Meller Yeller]

So I've almost entirely built my static website, but I want to transfer it to Wordpress for a CMS. I've looked into doing this and feel super overwhelmed by most tutorials I've found since I'm fairly new to it in general. Are there some good, comprehensive tutorials on how to do this for idiots?

[Coment]

Ngh. I'm crushing my head over here.

I have a page protected with cloudflare that I want to access via PHP on a server.
The way Cloudflare's javascript challenge works, as I think, is that the page makes a form with an identification for the challenge, a password, and a challenge answer, which is generated after an obfuscared algorithm. It also generates a [URL="https://support.cloudflare.com/hc/en-us/articles/200170156-What-does-the-CloudFlare-cfduid-cookie-do-"]cookie [/URL] that I don't know if it uses or not, but I guess it does.
After the time has passed, the form with those details is sent to an 'authentication url', which if everything is valid, returns a cf_challenge cookie that allows you to avoid the whole ordeal.

Of course, the challenge being in javascript makes it hard to get its answer, so I instead make 'my' server itself do a man-in-the-middle and get the url's challenge, modify the verification link to go to my server, and then execute that window on a popup with javascript.

This works as expected, and I soon have jschl_vc, pass and jschl_answer as variables in my script. I make it get the actual 'authentication url' with those parameters(to the protected url, the real one) in order to get and store the cf_challenge cookie and cfduid, which allow me to 'bypass' the challenge stuff on future requests with those cookies.
However, I don't know how many checks they're applying, because I can't get the second call to the authentication url work. Even if it has the same parameters as any normal browser would.

<?php 
$timeout = 8;
$protection_page = 'http://kissanime.com';
if(!file_exists('kacookiejar.txt')){touch('kacookiejar.txt');}
if(isset($_GET) && isset($_GET['hjKA']) && $_GET['hjKA'] == 1){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $protection_page);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_VERBOSE, 1);
	curl_setopt($ch, CURLOPT_HEADER, 1); 
	curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
	curl_setopt($ch, CURLOPT_REFERER, $protection_page);
	curl_setopt($ch, CURLOPT_COOKIEFILE, realpath('kacookiejar.txt'));
	curl_setopt($ch, CURLOPT_COOKIEJAR, realpath('kacookiejar.txt'));
	curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.65 Safari/537.36");
	$uri_contents = curl_exec($ch);
	curl_close($ch);
	$special1 = str_replace('/cdn-cgi/l/chk_jschl','GrabbingOwnCookies.php',$uri_contents);
	print $special1;
	$cookie_jar = file_get_contents('kacookiejar.txt');
	$cookie_jar_honey = str_replace('#HttpOnly_','',$cookie_jar); // Just in case, doesn't work with this either, so I don't know...
	file_put_contents('kacookiejar.txt',$cookie_jar_honey);
} elseif(isset($_GET['jschl_vc'])){

        $ch = curl_init();
        curl_setopt($ch,CURLOPT_URL, $protection_page.'/cdn-cgi/l/chk_jschl?'.$_SERVER['QUERY_STRING']);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_VERBOSE, 1);
        curl_setopt($ch, CURLOPT_HEADER, 1); // Set to 1 to see the headers.
        curl_setopt($ch, CURLOPT_NOBODY, 1);
        curl_setopt($ch, CURLOPT_REFERER, $protection_page);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
        curl_setopt($ch, CURLOPT_COOKIEFILE, realpath('kacookiejar.txt'));
        curl_setopt($ch, CURLOPT_COOKIEJAR, realpath('kacookiejar.txt'));
        curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.65 Safari/537.36");
        $uri_contents = curl_exec($ch);
        curl_close($ch);
        print $uri_contents;
} else { ?>
<input type="button" onclick="clearInterval(masterKA);" value="Turn off interval" /><br /><br />
<div id="output" style="height:80vh;width:90%;background-color:gray;border:1px solid black;margin: 0 auto"></div>
<script>
window.onload = function(){
masterKA = setInterval(function(){
	newKA = window.open('GrabbingOwnCookies.php?hjKA=1','NewKA','height=400,width=350');
	setTimeout(function(){
		newKA.close();
	},40000);
},1000*15);
};
</script>
<?php }; ?>

The only cookie that gets set is cfduid, and it tries to redirect to the protected url, which of course doesn't have the cf_challenge cookie and repeats the verification. I don't understand why, as in its eyes, it should look like a normal browser.

Anyone that understands about cloudflare and can lend a little help?

[Coment]

[QUOTE=Rocket;47512600]I wrote a way to solve the obfuscated Javascript jumble on the server:

function solveJumble(jumble)
{---}

It's in Javascript but you should be able to figure it out and translate it. Here's an example challenge page if you need one to test on:

<![CDATA[
(function(){
var a = function() {try{return !!window.addEventListener} catch(e) {return !1} },
b = function(b, c) {a() ? document.addEventListener("DOMContentLoaded", b, c) : document.attachEvent("onreadystatechange", b)};
b(function(){
---}, 5850);
}, false);
})();
//]]>

[/QUOTE]

Mmhh, after giving it a quick try, you'd have to adapt your function and find the name-changing variable (JcCxAYg), its other one(nlR), then find out what the hell they do with varible t, then add or substract that from the total of the (![]) operations.
Getting the answer isn't the problem (I can make a popup appear and a real browser to calculate it), as I already get it (along with the other important variables). The problem is at identifying with them on the real page, which doesn't seem to work.

[benbb]

[QUOTE=Meller Yeller;47437352]So I've almost entirely built my static website, but I want to transfer it to Wordpress for a CMS. I've looked into doing this and feel super overwhelmed by most tutorials I've found since I'm fairly new to it in general. Are there some good, comprehensive tutorials on how to do this for idiots?[/QUOTE]

You'd be best finding a boilerplate theme and using that as a 'template' to port your static site over.

[url]http://html5blank.com/[/url]