Web Development - WAYWO - #8

[buhbang]

I'm having a lot of fun with nodejs :v:

[vid]http://a.pomf.se/evgeqn.mp4[/vid]

btw all of those are placeholders (except for the ubuntu i just put in :v:)

[Tezzanator92]

I've moved away from my ESXi Development/Test server in favor of Vagrant.

Couldn't do this previously because my workstation wasn't up to it (Magento is a resource intensive beast) but with a little extra RAM I can "Vagrant Up" and have exactly what I need to run a Magento installation in seconds. Commited the VagrantFile files to the Git Repos and no matter which project I am working on I have everything I need to get the development environment set up in seconds from nothing. It's great.

So now I have a spare box I can use for something else.

No work on actual projects but I'm streamlining my workflow one bit at a time.

[HarryG321]

Recently started experimenting with Vagrant as well - seems like a huge improvement over my previous method, which involved manually installing new instances of WordPress/whatever on XAMPP

[Eudoxia]

Vagrant is great. Pretty much the first thing I do when starting a new web projectis is create a Vagrantfile and a bunch of Ansible playbooks.

[deadeye536]

Vagrant, from my one minute review, sounds a lot like Docker (and I see that it can use Docker as a provider), is there anything largely different between the two?

[j4NZKUE]

[T]http://cl.ly/image/232Q1s0E3U0B/Stickbird%20-%20Light%20up%20your%20fire%20en.png[/T]

Anyone heard of maya sticks?

[Alternative Acc]

[QUOTE=deadeye536;45108549]Vagrant, from my one minute review, sounds a lot like Docker (and I see that it can use Docker as a provider), is there anything largely different between the two?[/QUOTE]

Vagrant uses VirtualBox by default for virtualization. So unlike Docker, which uses lightweight virtualization through LXC and the AUFS file system, Vagrant uses full VMs. I've only worked with Docker so far, though.

[Lenny.]

So I have never heard of these services before and they don't do a great job of explaining themselves in concrete examples.
Am I right if I think that they allow me to do something like this:
1. Install something like nodejs, and build an app on it in a virtual machine on my for exmaple windows pc
2. Let vargrant or docker or whatever package it up
3. Go to my linux vps and just run a command to install that packaged thing and have it ready to go?

[Tezzanator92]

Vagrant let's you, in loose terms, define a server on a virtual machine with a single configuration file.
For example Magento requires Apache/NGinx, PHP5 and some modules. So in the root of my Git repo I have a "Vagrantfile" with the following, along with a provisioning file "Bootstrap.sh"

VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|

  config.vm.box = "hashicorp/precise32"
  config.vm.provision :shell, path: "bootstrap.sh"
  
  config.vm.network :forwarded_port, host: 80, guest: 80

end

And

#!/usr/bin/env bash
# Apache + PHP
apt-get update
apt-get install -y apache2 php5 libapache2-mod-php5 php5-mysql php5-gd php5-curl php5-mcrypt
a2enmod rewrite
service apache2 restart

# Install Sass
gem install sass
sass -v

# Link the Vagrant share to the Apache Document Root
rm -rf /var/www
ln -fs /vagrant /var/www

From any of my workstations I can Clone the Git repo for that magento installation, run "Vagrant Up" and it will automatically create an Ubuntu Precise Installation with everything needed to run the thing... All on my windows machine (I love linux but I can't stand to develop on it personally)
With this I can fire up Netbeans on my windows host, pull up any browser to localhost and develop away knowing full well it will work once I push it to the staging and production servers (Which have near enough the same configuration)

Think about it this way, no matter what computer I am on, to get developing I just need to install netbeans, vagrant, git and virtualbox and run a single command (Vagrant Up) to have a test server up.

At least this is how I am using it.

[KmartSqrl]

[QUOTE=deadeye536;45108549]Vagrant, from my one minute review, sounds a lot like Docker (and I see that it can use Docker as a provider), is there anything largely different between the two?[/QUOTE]

They are built to serve completely different purposes. Vagrant is mainly for spinning up VMs for local development. Docker is for building application containers that can easily be moved around and deployed to a production environment. Docker containers are also intended to house a single application, so you'd have a docker container for postgres, one for nginx, one for rails, etc. Vagrant is just for VMs, so a one to one mapping to your applications isn't one of the core ideas for vagrant.

Vagrant and Docker are pretty different.

[editline]15th June 2014[/editline]

[QUOTE=Tezzanator92;45110773]Vagrant let's you, in loose terms, define a server on a virtual machine with a single configuration file.
For example Magento requires Apache/NGinx, PHP5 and some modules. So in the root of my Git repo I have a "Vagrantfile" with the following, along with a provisioning file "Bootstrap.sh"

VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|

  config.vm.box = "hashicorp/precise32"
  config.vm.provision :shell, path: "bootstrap.sh"
  
  config.vm.network :forwarded_port, host: 80, guest: 80

end

And

#!/usr/bin/env bash
# Apache + PHP
apt-get update
apt-get install -y apache2 php5 libapache2-mod-php5 php5-mysql php5-gd php5-curl php5-mcrypt
a2enmod rewrite
service apache2 restart

# Install Sass
gem install sass
sass -v

# Link the Vagrant share to the Apache Document Root
rm -rf /var/www
ln -fs /vagrant /var/www

From any of my workstations I can Clone the Git repo for that magento installation, run "Vagrant Up" and it will automatically create an Ubuntu Precise Installation with everything needed to run the thing... All on my windows machine (I love linux but I can't stand to develop on it personally)
With this I can fire up Netbeans on my windows host, pull up any browser to localhost and develop away knowing full well it will work once I push it to the staging and production servers (Which have near enough the same configuration)

Think about it this way, no matter what computer I am on, to get developing I just need to install netbeans, vagrant, git and virtualbox and run a single command (Vagrant Up) to have a test server up.

At least this is how I am using it.[/QUOTE]

The real power in vagrant comes when you use puppet or chef to provision your vagrant boxes in the same way that you provision your production servers so that you have really tight dev/production parity.

It's also great for setting up/testing distributed systems since you can boot up a bunch of VMs with one "vagrant up".

[_RJ_]

I've made a "web app" for organizing and managing clients. Recently I started overhauling it with better design and functionality, let me know what you think and feel free to give me suggestions/complaints on the new one of it.

[b]OLD[/b]
[img]http://i.gyazo.com/bd4299be8221c97233f970f21049c78c.png[/img]

[b]NEW[/b]
[img]http://i.gyazo.com/4f6db704f4c1aeedcce00accf38f1559.png[/img]

[Shadow801]

[QUOTE=_RJ_;45133076]I've made a "web app" for organizing and managing clients. Recently I started overhauling it with better design and functionality, let me know what you think and feel free to give me suggestions/complaints on the new one of it.

[b]OLD[/b]
images

[b]NEW[/b]
images[/QUOTE]

Isn't the top bar just the bootstrap default with an icon font?

Not that's a bad thing, I use the bootstrap components in a couple of apps simply because they work so well.

One thing that would be good is to make the text in all the large buttons align to the same point, rather than being centered.

[Maqtiah]

[QUOTE=Shadow801;45141079]Isn't the top bar just the bootstrap default with an icon font?[/QUOTE]

It is, but it looks well with the white-like design if you ask me

[_RJ_]

[QUOTE=Shadow801;45141079]Isn't the top bar just the bootstrap default with an icon font?

Not that's a bad thing, I use the bootstrap components in a couple of apps simply because they work so well.

One thing that would be good is to make the text in all the large buttons align to the same point, rather than being centered.[/QUOTE]
Yes and no. I use a bit of a complicated method of loading pages. Instead of loading an entire HTML page when clicking on one of the buttons, I've centralized the index and just include a .php file on the go. I only use one file for the navigation and the needed contents of other pages are stored in other files.

So each button will look similar to this:

<li"; getClass('home'); echo "><a href='?page=home'>Home</a></li>

And here's the function it calls to check if the button should appear active or not:

// A function to check if a button should be active or not.
function getClass($currentClass)
{
	$currentPage = $_GET['page'];
	
	if (!isset($currentPage) && $currentClass == 'home') // Checks if no page is selected and selects 'home' by default.
	{
		echo " class='active' ";
		return;
	}
	
	if (is_array($currentClass) != true) // Checks if 'currentClass' isn't an array.
	{
		if ($currentClass == $currentPage) // Checks if 'currentClass' equals 'currentPage' and make the button active if it is.
		{
			echo " class='active' ";
			return;
		}
	}
	else
	{
		// Loop for making buttons with children active if selected (e.g. dropdown buttons).
		for ($i = 0; $i < count($currentClass); $i++) // Loops through 'currentClass' as an array.
		{
			if ($currentClass[$i] == $currentPage) // Checks if any index in the array equals 'currentPage' and makes the dropdown button active if it is.
			{
				echo " class='dropdown active' ";
				return;
			}
		}
	}
}

And then further on in the page when it goes to load content, this is what it looks like:

if (isset($_GET['page']))
{
	include $_GET['page'] . '.php';
}
else
{
	include 'home.php';
}

And is this any better?
[img]http://i.gyazo.com/5142a9ba3b31aabfcb31eaabb6c1fca4.png[/img]

[KmartSqrl]

This is slightly pedantic, but "getClass" is a really really vague function name for what you're using it for.

[Poo Monst3r]

getButtonState ? Or even getState ?

[KmartSqrl]

I would probably call it getNavCSSClass or navCSSClass. getState is really vague too and doesn't tell you anything about what it's actually doing if you don't have any context. You'd still have to actually go look at the function to know that it's echoing css classes.

[_RJ_]

What about btnIsSelected or something similar? I've always been one for short function names, I never really like long descriptive ones.

[KmartSqrl]

[QUOTE=_RJ_;45144922]What about btnIsSelected or something similar? I've always been one for short function names, I never really like long descriptive ones.[/QUOTE]

It's not only dealing with selected state though, it's also adding the dropdown class sometimes. navCSSClass is also shorter than btnIsSelected haha.

I think having a variable/method name be a little longer to make it more descriptive is REALLY worth it though. Especially if you step away from the project for a while and come back to edit. Your editor should have autocomplete anyways unless you're a masochist, so you're not really having to type more in the long run.

[_RJ_]

[QUOTE=KmartSqrl;45145039]It's not only dealing with selected state though, it's also adding the dropdown class sometimes. navCSSClass is also shorter than btnIsSelected haha.

I think having a variable/method name be a little longer to make it more descriptive is REALLY worth it though. Especially if you step away from the project for a while and come back to edit. Your editor should have autocomplete anyways unless you're a masochist, so you're not really having to type more in the long run.[/QUOTE]
Oh yeah, here's how the dropdown works as well:

<li"; getClass(array('configuration', 'database', 'statistics')); echo ">
	<a href='#' class='dropdown-toggle' data-toggle='dropdown'>Advanced <b class='caret'></b></a>
	<ul class='dropdown-menu'>
		<li><a href='?page=configuration'>Configuration</a></li>
		<li><a href='?page=database'>Database</a></li>
		<li><a href='?page=statistics'>Statistics</a></li>
	</ul>
</li>

And uh... I don't use an autocomplete, woops. But anyways, I like your suggestion so I'll try using more descriptive functions.

[Goz3rr]

From the creators of [url=http://brtspin.kuubstudios.com/]brtspin[/url], we bring you the [url=http://dev.kuubstudios.com/annaquest/]latest creation[/url]

Alternative title: why i shouldn't stay awake for 36 hours and still have access to the internet

[buhbang]

I tried making one of those file tree
[vid]http://a.pomf.se/vwjrru.mp4[/vid]

pretty satisfied with it

[wizard`]

I [I]need[/I] that

[Shadow801]

[QUOTE=_RJ_;45143340]

if (isset($_GET['page']))
{
	include $_GET['page'] . '.php';
}
else
{
	include 'home.php';
}

[/QUOTE]

Correct me if I am wrong, but isn't there a whole bunch of security concerns with this?

[mastersrp]

[QUOTE=Shadow801;45153564]Correct me if I am wrong, but isn't there a whole bunch of security concerns with this?[/QUOTE] There easily could be, yes.

[Shadow801]

There's far better ways of doing it as well.

For example, you could have a render function or method which would use output buffer along with include to output the content. Using output buffer so you can basically store the output of include into a variable, whereas in your example, include will try to output the content where it is called.

Here's a good Stack Overflow page:

[url]http://stackoverflow.com/questions/2832010/what-is-output-buffering[/url]

[Aksami0]

I always thought that the firefox is my friend, now many years together with the firefox he decided to betray me :suicide:

in firefox
[IMG]http://puu.sh/9ACSR/397cfb99e2.png[/IMG]

in chrome
[IMG]http://puu.sh/9ACRv/3065ee3a78.png[/IMG]

[Alternative Acc]

[QUOTE=Shadow801;45153564]Correct me if I am wrong, but isn't there a whole bunch of security concerns with this?[/QUOTE]

Yuppers:

[url]https://www.owasp.org/index.php/Testing_for_Local_File_Inclusion[/url]
[url]http://en.wikipedia.org/wiki/File_inclusion_vulnerability[/url]

Better fix that, _RJ_.

[shodan]

I did a thing
[url]http://gaben.sexy/[/url]

Vagax made the photoshopped gaben

[_RJ_]

[QUOTE=Alternative Account;45156560]Yuppers:

[url]https://www.owasp.org/index.php/Testing_for_Local_File_Inclusion[/url]
[url]http://en.wikipedia.org/wiki/File_inclusion_vulnerability[/url]

Better fix that, _RJ_.[/QUOTE]
Yes, I looked into it and saw the issues. Currently cManager is only used on a local computer and not on the internet so unless someone sneaks on my computer, not much can be done. But regardless, I'll work out a better and more secure way of doing it all.