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

[Tamschi]

I want to make a static site (probably mostly documentation for my projects, probably Bootstrap unless there's something better I can reasonably compile markup for) and was wondering if there's an editor / IDE where I can see the page update while editing it.
(I'm a bit better with IDEs generally, so if there's a free "heavy" one that also gives me style/accessibility warnings that would be awesome.)

Also are there solutions for generating HTML documentation from C# XML docs besides Doxygen?
I looked at it but it's missing some features I need and I'd rather have something I can easily extend without digging into old-style C++.
(If there are none I can pretty quickly code one myself though, I think.)

[Svenskunganka]

[QUOTE=Tamschi;47529616]I want to make a static site (probably mostly documentation for my projects, probably Bootstrap unless there's something better I can reasonably compile markup for) and was wondering if there's an editor / IDE where I can see the page update while editing it.
(I'm a bit better with IDEs generally, so if there's a free "heavy" one that also gives me style/accessibility warnings that would be awesome.)

Also are there solutions for generating HTML documentation from C# XML docs besides Doxygen?
I looked at it but it's missing some features I need and I'd rather have something I can easily extend without digging into old-style C++.
(If there are none I can pretty quickly code one myself though, I think.)[/QUOTE]

Try [URL="http://brackets.io/"]Brackets[/URL] for live preview. Last time I used it was in really early stages of dev, so no clue if it's gotten better or not.

[Tamschi]

[QUOTE=Svenskunganka;47530684]Try [URL="http://brackets.io/"]Brackets[/URL] for live preview. Last time I used it was in really early stages of dev, so no clue if it's gotten better or not.[/QUOTE]

It seems really good now, it's also surprisingly responsive and not a memory hog for what seems to be a web GUI.
The live preview is still Chrome only, but I don't think I'll have trouble with that. (My Firefox installation is a bit slow when refreshing due to hundreds of open tabs anyway.)

[Tamschi]

I'll probably just use Brackets for sketching, since if I have JQuery anyway I might as well enable loading content inline even if that requires compiling that and a baked version from fragmented code.
It should be perfect for trying out changes though.

Now the only parts I need to research are documentation generation and Bootstrap themes, the latter of which I'm completely out of my expertise at. It's exciting :dance:

[Coment]

[QUOTE=Rocket;47514030]The t variable is the length of the domain name. For example, on Facepunch it would be "facepunch.com".length, or 13. That might be where you're having trouble, since - as far as I can tell - it's measuring the length of your domain name, and not the length of the one you're trying to request.

[url=https://github.com/cpancake/fp-archive-tool/blob/master/index.js#L238]Here's an implementation[/url] using regex to parse HTML (it's bad but quick). That one uses eval to figure out the value of the obfuscated jumble because it's running on Node.js, but you might be able to figure it out from there.[/QUOTE]

I found an alternative way of doing it. Since the server can't handle the problem given by the browser, or the authentication, then let's just [B][I]make the browser authenticate too[/I][/B].
So I made a Google Chrome script that sends all the site's cookies to an internal page and stores them in a cookie file, mimicking the Netscape style that they have by default if cURL generates them.

Now, however, I have both the cf_clearance and __cfduid cookies (which are perfectly valid, since the browser just used them), and some cURL headers equal to the original browser, but it STILL won't give up and display the needed info.

<?php
$cookies = json_decode(file_get_contents('php://input'),true);

$input_line = 
"# Netscape HTTP Cookie File
# http://curl.haxx.se/docs/http-cookies.html
# This file was _not_ generated by libcurl! Edit at your own risk. Damn right I will.

";
foreach($cookies as $cookie){
//var_dump($cookie['name']);
if($cookie['httpOnly']){
$input_line .= "#HttpOnly_";
}
$input_line .= $cookie['domain'].'	';
$input_line .= $cookie['secure'] ? 'TRUE' : 'FALSE';
$input_line .= '	'.$cookie['path'].'	';
$input_line .= $cookie['hostOnly'] ? 'TRUE' : 'FALSE';
$input_line .='	'.$cookie['name'].'	'.$cookie['value']."\n";
}
file_put_contents('cookiejar.txt',$input_line);
	?>

and this is how those two buggers appear:

#HttpOnly_.kissanime.com	FALSE	/	FALSE	__cfduid	dd5deed9b8f5fa7ac54c09c37a8b152a81428850515
kissanime.com	FALSE	/	TRUE	test_enable_cookie	cookie_value
#HttpOnly_.kissanime.com	FALSE	/	FALSE	cf_clearance	d51237fc87d22c3bdbd12b7aa045ac0e8cf09abd-3285859374-486486

Unless php's cURL returns some extra header I don't know of, or they ping each IP every time someone accesses one of those page, I can't imagine more security measures than IP check + useragent check + cookie authentication...

[editline]16th April 2015[/editline]

[IMG]http://waa.ai/vzNr.png[/IMG]
fuck they're onto me :tinfoil:

[Coment]

[QUOTE=Coment;47540003]-blahblahblah-[/QUOTE]

Status update: I finally made it.

Everything was correct, except I forgot to put the expiration date on the cookies.

Woops.

--automerge are you still there?

[ragortue]

Been looking for a work around but nothing's found yet so far. [img]https://imagicon.info/cat/6-4/1.gif[/img]

[Patrick]

this is a bit of a stretch but I'm in dire need of help.

I'm doing a web programming course in uni and we're using c9.io for our workspace. Its been piss easy so far but I'm stuck because I can't install the sqlite drivers I need for my assignment.

In the tutorial video for the last weeks lab he told us to run this command "sudo apt-get install php5-sqlite", which should have worked but I get 404 errors when I run it
[img]http://i.imgur.com/NFPTpNJ.png[/img]

the assignment is due next week and I haven't been able to test it because I get missing error drivers from laravel when I run it.

[editline]23rd April 2015[/editline]

I think I just fixed it, what a fool I am

[editline]23rd April 2015[/editline]

yeah its because I didnt put sudo before apt-get update

[editline]23rd April 2015[/editline]

[QUOTE=ifaux;47397717]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[/QUOTE]

don't know if you still need help with this but I think you can link fonts using css.

[EIREXE]

-snip-

[Patrick]

-snip-
oh man why do I figure out the answer to these directly after emailing my convener and posting here.

also holy shit I finally finished my assignment!

[Cyberuben]

[QUOTE=Pat.Lithium;47601255]-snip-
oh man why do I figure out the answer to these directly after emailing my convener and posting here.

also holy shit I finally finished my assignment![/QUOTE]

Don't snip anything. Might be useful to others.

[Patrick]

[QUOTE=Cyberuben;47602936]Don't snip anything. Might be useful to others.[/QUOTE]

My URLs were not working in my laravel project, they would spit out method errors or mess up the address.

The problem was I was using URLs the wrong way eg:

action="/comment"

you have to use the URL class:

action="{{{ url('comment') }}}"

[editline]26th April 2015[/editline]

as soon as I changed this my website went from being a broken piece of shit where nothing worked quite right to a fully functioning website working 100% as intended.

[SeriousLion]

I have some problems with implementing the steam web api in my website can anyone give some sort of example?
Edit:found out

[Maqtiah]

[QUOTE=Pat.Lithium;47603482]My URLs were not working in my laravel project, they would spit out method errors or mess up the address.

The problem was I was using URLs the wrong way eg:

action="/comment"

you have to use the URL class:

action="{{{ url('comment') }}}"

[editline]26th April 2015[/editline]

as soon as I changed this my website went from being a broken piece of shit where nothing worked quite right to a fully functioning website working 100% as intended.[/QUOTE]

Why are you using Laravel 4?
Or did you just change the Blade templating tags?

If Laravel 4, might as well use the included form builder. I don't use it in Laravel 5 because I see no reason to add it in, but hey Laravel 4 has it out of the box so why not just use it. :v:

[Tamschi]

Is there an [I]easy[/I] way to centre a box inside another box?
It should be allowed to overflow but still stay in the centre.

Currently I'm trying to make this work with a flex layout, but with [URL="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_flexbox_to_lay_out_web_applications"]the example from MDN[/URL] I can barely get it to work in all cases (mostly because I have no idea what I'm actually doing yet) and it fails when the centred element becomes larger than its container.

[Svenskunganka]

[QUOTE=Tamschi;47625234]Is there an [I]easy[/I] way to centre a box inside another box?
It should be allowed to overflow but still stay in the centre.

Currently I'm trying to make this work with a flex layout, but with [URL="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_flexbox_to_lay_out_web_applications"]the example from MDN[/URL] I can barely get it to work in all cases (mostly because I have no idea what I'm actually doing yet) and it fails when the centred element becomes larger than its container.[/QUOTE]

I'm guessing you want to vertical-align a div inside another div?

.element {
  position: relative;
  top:50%;
  transform:translateY(-50%);
}

This can sometimes invoke sub-pixed sizing which makes the div a bit blurry. If that happens, add this to the parent element:

.parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

You'd have to make sure that the parent div is larger than the child div.

[Tamschi]

[QUOTE=Svenskunganka;47625414]I'm guessing you want to vertical-align a div inside another div?

.element {
  position: relative;
  top:50%;
  transform:translateY(-50%);
}

This can sometimes invoke sub-pixed sizing which makes the div a bit blurry. If that happens, add this to the parent element:

.parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

You'd have to make sure that the parent div is larger than the child div.[/QUOTE]

Thanks! I want to also centre it horizontally, so I had to add a few more declarations: [csharp]wr += new Rule(new ClassSelector("center"))
{
Display.InlineBlock,
Position.Relative,
Top.Half,
Left.Half,
Transform.Translate("-50%", "-50%")
};[/csharp]

Something I previously also forgot was to make the [I]<body>[/I] fill the whole screen, but that's fixed now too: [csharp]wr += new Rule(Selectors.OfTag<Body>())
{
Position.Fixed,
Width.Full,
Height.Full,
TransformStyle.Preserve3D
};[/csharp]

I can't see a difference with [I]TransformStyle.Preserve3D[/I], but I left it in anyway since it (hopefully) shouldn't hurt. Fractional pixel alignment is already bad enough in WPF.

Right now the font I use by far outdoes everything else in terms of blurriness though :v:

[Svenskunganka]

Simply add margin-left:auto; margin-right:auto; to center things horizontally.

[jaooe]

Can anyone recommend a web development framework that doesn't involve reading pages upon pages before actually getting used to the development process?

User authentication and database ORM is a plus

[Svenskunganka]

[QUOTE=jaooe;47650508]Can anyone recommend a web development framework that doesn't involve reading pages upon pages before actually getting used to the development process?

User authentication and database ORM is a plus[/QUOTE]

You don't really need to read pages upon pages to learn something. Just learn to understand docs and you should be able to understand most of a framework by simply reading the docs while looking for what you want to do.

Laravel is good if you like PHP, although I never use it. Has built-in ORM and prototyped auth.

If you enjoy Javascript, ExpressJS is simple, lightweight and straightforward. Very modular as you can easily add middlewares and it's hackable. As for an ORM, there's plenty out there for different databases. I usually use Mongoose for MongoDB (lots of useful features and hackable) but I've been writing my own for Redis for the current project I'm working on, which is a 100% real-time, three-way data-bound thingy, so it's needed as Redis works completely in-memory.

And for authentication there's passport, which is very simple and allows you to start auth with a few lines of code. Combine passport with an Express middleware for auth and you can easily restrict certain routes. E.g:

router.put('/:id', auth.isAuthenticated(), controller.update)

[jaooe]

Everything just seems so long-winded and unnecessary...

I need something simple, like plain html, css and php but with added bonuses...

[Party Boy]

I have a button on a form and when I press it, the color changes, and the border color changes, and I don't know where its being set. Its turning like green with a blue border. I've tried changing the CSS for when its active and focus and everything, any ideas how I can target it?

[Svenskunganka]

[QUOTE=Over-Run;47651639]I have a button on a form and when I press it, the color changes, and the border color changes, and I don't know where its being set. Its turning like green with a blue border. I've tried changing the CSS for when its active and focus and everything, any ideas how I can target it?[/QUOTE]

Inspect the element and see where it's coming from?

[knoxed]

Did anyone here try making a terminal like styled website? If so, can you show any examples on how to do it. Thanks.

[Party Boy]

[QUOTE=Svenskunganka;47651734]Inspect the element and see where it's coming from?[/QUOTE]

I know where its coming from. I can change the color of the button normally its just after I click it, it turns into a green colour

[NiandraLades]

With the use of a <div> tag and some css, I have created what I intend to be a sort of panel:

[img]http://i.imgur.com/H6m7C6m.png[/img]

What would be the best method to create multiple versions of this with the least amount of lines?

Basically, the plan is to eventually make a sort of browser based multiplayer game but at the moment, I'm just working on design rather than functionality, to get the hang of everything. Each player would have their own panel essentially. In lua, I would use 'for i=1,10 do...' and I know JavaScript has the same thing albeit written differently but I'm just wondering what sort of way I'd do it here

This is the result I want to end up with:
[img]http://i.imgur.com/iFlBTQ6.png[/img]

Any help is greatly appreciated, thanks!

[Coment]

[QUOTE=NiandraLades;47664707]With the use of a <div> tag and some css, I have created what I intend to be a sort of panel:

[img]http://i.imgur.com/H6m7C6m.png[/img]

What would be the best method to create multiple versions of this with the least amount of lines?

Basically, the plan is to eventually make a sort of browser based multiplayer game but at the moment, I'm just working on design rather than functionality, to get the hang of everything. Each player would have their own panel essentially. In lua, I would use 'for i=1,10 do...' and I know JavaScript has the same thing albeit written differently but I'm just wondering what sort of way I'd do it here

This is the result I want to end up with:
[img]http://i.imgur.com/iFlBTQ6.png[/img]

Any help is greatly appreciated, thanks![/QUOTE]

Depends on which language will be outputting that part.
I'll go with javascript since you suggested it:

for (i=0;i<=NUMBER_OF_BOXES;i++){
var div = document.createElement("div");
div.setAttribute('class', 'CSSClassThatHoldsTheBunnyDesign');
div.innerHTML = "Text inside the box, if any. Otherwise remove this line.";

document.getElementById('Bunny_parent_id').appendChild(div);
}

[Cyberuben]

[QUOTE=NiandraLades;47664707]With the use of a <div> tag and some css, I have created what I intend to be a sort of panel:

-img-

What would be the best method to create multiple versions of this with the least amount of lines?

Basically, the plan is to eventually make a sort of browser based multiplayer game but at the moment, I'm just working on design rather than functionality, to get the hang of everything. Each player would have their own panel essentially. In lua, I would use 'for i=1,10 do...' and I know JavaScript has the same thing albeit written differently but I'm just wondering what sort of way I'd do it here

This is the result I want to end up with:
-img-

Any help is greatly appreciated, thanks![/QUOTE]

If the content is generated by a webserver rather than a clientside application, you could just make the server do it using either a templating engine or just spitting out HTML, without the client having to do it using Javascript.

[confinedUser]

would anyone mind explaining where my syntax issue is? i'm not very good at jquery

var main = function(){
    $('.icon-menu').click(function());
}

$(document).ready(main)

[Coment]

[QUOTE=confinedUser;47666160]would anyone mind explaining where my syntax issue is? i'm not very good at jquery

var main = function(){
    $('.icon-menu').click(function());
}

$(document).ready(main)

[/QUOTE]
$('.icon-menu').click(function());
It's waiting for the function to have code to run between {}, but it gets the ); instead, so it doesn't know what to do.