Web Development
The other night, I made my browser draw a circle. To be honest, there was more to it than just that, but that’s what my fiancee saw, and she–being an “end user” of web technology– was nowhere near as impressed as I was.
I’m talking, of course, about HTML5 Canvas, the ability to essentially “draw” on an area of the browser. This has the potential for a bunch of cool things, including games or web applications. In fact, HTML5 and CSS3, which are still technically “in development” have the potential to allow for a lot of innovation to the web.
Which brings me to my point–users, whether they are clients or family members, will probably not understand the significance of HTML5 Canvas or geolocation, but there are certain times when they should be made aware of the benefits of newer technology. This could be explaining to a client the benefits of HTML5’s markup (particularly on a static site they update) or sharing an HTML5 based game with someone in your family. While they may not fully appreciate all the features of newer technology, they may be able to see how it benefits them and appreciate the smaller bits–especially if you make it relevant to their situation and keep the explanation short and simple.
The fact is that technology will always be changing and evolving. The web isn’t any different. Being able to understand and share these changes is one of the great parts of being a web developer.
I drew a circle. Want to see?
Web Development
Even if you aren’t using a content management system, you can still add some of the benefits of PHP to your site today. This will take you through some tips and tricks to make your site cooler and easier to use and manage just by adding a few simple lines of code.
Today we’ll be taking a look at the headers and footers. In these, content is the same throughout the site and having consistency, especially in the navigation bar, can be critical for the user to fully experience the site. When you are adding or changing pages, it can be a hassle to go through and change all the separate HTML files. PHP can help.
To start, you will need to change all of your .html files to .php. This can be done simply by opening them in a text editor and saving as the new file extension.
Next, you will have to locate where the duplication occurs. For SEO purposes, you may not want to have the <title> </title> the same throughout the site, so for the purpose of this how-to, I’d recommend locating your <body> tag and copying from right below to the end of your navigation bar–depending on your site’s design. Open a new file in your text editor and paste the code there. Save as header.php.
Do the same thing for your footer. Generally you can copy from the beginning of the footer code to the </html> tag. Copy into a new file and save as footer.php.
For the rest of your site files, you will need to go through and replace the areas you copied with php code. The PHP function ‘include’ will add the file’s content prior to hitting the browser, so it will appear just like your normal HTML file. Just make sure that you remember to upload the header and footer files, or else the page will appear without these areas.
For the header area:
<?php include ‘header.php’;?>
For the footer area:
<?php include ‘footer.php’;?>
Now if you need to change your header or footer content, you will only need to modify one file, rather than going through each individual .html file, which can be time consuming to say the least.
This is just one way PHP can make your site better. Stay tuned for more!
Web Development
The Problem: If you are using the standard Twitter widget on your website (available here), you may want to use only one set of code because the styling is included inline. The issue here comes in when you need different widths or number of tweets, depending on the widget’s location (home page versus sidebar, for example).
The Tools:
The Solution:
1. Initial formatting:Go to the Twitter site and style your widget as close to what you’d like to end up with. Copy and paste this code into your preferred text editor and save the file as twitter.php into your site/theme directory. If you are using a PHP-based Content Management Systems like WordPress, skip to step 2 now. Otherwise, locate the files where you would like to add your Twitter widget. Open them in your text editor and save them as .php files. Make sure you update any links to the page to the new extension.
What does this do? PHP is a server-side script and the basis for many CMS. We will be using it to incorporate the Twitter widget, as well as to apply conditional formatting.
2. Include your widget.Open your theme or file location in your text editor and navigate to where you’d like to include your widget. Insert the following line:<?php include 'twitter.php';?>
What does this do? Include is a PHP function that does literally what it says, includes the called file within the other, so they blend together seamlessly before heading to the user’s browser so they end up as one page. This is different than include_once –which, as it states, only calls the code once–or require –which stops the script if there is an error, as opposed to just displaying a warning.
3. Add the PHP script. This is where there’s some deviation, depending on what CMS you’re using or not. I will be addressing WordPress and static sites in this post. In both cases, we will be formatting the width and the number of Tweets to display depending on whether it’s on the homepage or not.
Open twitter.php in your text editor. Locate the lines defining rpp and width and modify them thus:
rpp: <?php echo $rpp; ?>
width: <?php echo $width; ?>
Echoing PHP prints it out as text browser. Because PHP runs server-side, these variables will be output as text before the javascript starts. If you try to test the page now, it will not work because the we have not set the variables yet. We will be setting it so the homepage displays 5 Tweets in a width of 313px and the other instances display 3 Tweets with a width of 330px.
WordPress: WordPress provides conditional formatting already, so we will be utilizing that. This is the code that works for WordPress. Place it at the top of your twitter.php file. (This has been tested in 3.3.1, but should be backward compatible for a ways as well.)
<?php
if (is_front_page()){ $width=”313″; $rpp=”5″; }
else{$width=”330″; $rpp=”3″;}
?>
Non-CMS based: Because we are outside a CMS, we will need to use a different method. What we will be doing here is seeing if the file name is index.php or not. (Obviously, if you have your home page set to another page, you will need to use that page instead.)
<?php
if (basename($_SERVER[‘REQUEST_URI’])==”index.php”){ $width=”313″; $rpp=”5″; }
else{$width=”330″; $rpp=”3″;}
?>
If you have any questions, please leave them in the comments. If you are interested in learning more, I am offering tutoring services especially in PHP and WordPress.
Web Development
No, this isn’t a blatantly obvious attempt to generate reader feedback. This is a look at why developers should use well-commented code throughout their projects and how this seemingly simple addition can change the world–or at least, make people’s lives easier.
What are comments?
//this function does x
or
#this line does y
These lines of text are comments. They may have slightly different syntax, depending on the language used, but their purpose is the same–to quickly inform those reading the code exactly those particular lines do.
Why you should comment:
1. It helps other people understand it. This seems like a no-brainer, but you never know when someone else might need to understand your code. If you release the code under certain licenses–GPL, GNU–or another open source, it is important for those who will obtain the source code to be able to modify and add to the overall functionality of your code. Even if you aren’t releasing it under an open source license, consider the fact that someone else may eventually have to fix/add to it. I’ve personally have come across some intense code (spread across several dozen files) without any documentation and unraveling how all the pieces fit together took longer than the actual repair.
2. It helps you understand it.Comments can help you quickly troubleshoot an error. You exude a certain confidence when you are able to tell someone “I think I know exactly what’s causing that.” In addition, you never know when you might have to put down the code and come back to it later. If you’re looking to extend your code, you can easily remember what everything does and can better integrate any additional functionality.
3. It helps you write better code. After seeing a need for several occurrences of a similar command, you may be able to condense your code as a result of comments. You also have a chance to logically address and document each step as it occurs, so you may consider errors or other situations that you might not have otherwise.
Well-Commented
The key word here is well-commented. You don’t need to comment every line. In fact, it’s often better if you don’t since comments, as a general rule, shouldn’t match exceed the amount of actual code. Comments should describe the overall functionality of several lines, or help to define variables or cases that otherwise may not be readily apparent to someone reading your code for the first time. You must assume that the reader does have some general knowledge of the language in order to avoid overloading with comments.
//This is a blatantly obvious attempt to generate reader feedback. Please use the following form to share your experience with commented code–or, if you aren’t a developer, a similar experience.
Peter Burgin is a web developer and instructor who’s not afraid of debugging, large textbooks, or speaking in front of huge crowds.
Web Development
I’ll be the first to admit that I have always been a perfectionist. In second grade, I would spend a minimum of 2 hours writing 10 spelling word sentences–they had to be “good”! I’m sure many web developers, web designers, or graphic artists are the same way–working hours and hours to get it “just so” and, even then, finding a million other things we’d like to perfect before letting our creation see sunlight.
For better or worse, perfection isn’t a realistic expectation to set on yourself. Here’s a few ways perfectionism can do more harm than good.
Deadlines- Time is a precious resource, and, unfortunately, we only get so much of it. Deadlines may be something that other people set for you, or they may be time limitations you put upon yourself. However they are set, having only so much time to devote to a project means that you will have to find a point of good enough to deliver on time.
Being “First”- There are certain instances where it is important to get your idea out into the market first. This might be an app or other product/service where your continued success is dependent on being established as an industry leader. In this case, like with deadlines, it is important to find a proper balance between meeting the Critical to Quality points and your own perfectionist tendencies. Like Reid Hofffman, the founder of LinkedIn once said:
“If you are not embarrassed by the first version of your product, you’ve launched too late.”
Being at all- This is especially true for personal projects. We seem to have a tendency to be incredibly critical of things we do “for ourselves.” We see these especially as an extension of ourselves and don’t want to put up a flawed version. When this happens, it is important to remember others who started doing things “for themselves” and ended up changing the world as a result. What about Leonardo daVinci’s sketches of helicopters, or Tolkien’s bedtime stories for his children? Just saying.
For your own health and well-being- Ever heard “don’t sweat the small stuff”? Stress can cause or compound all sorts of nasty health conditions that your life would be a lot better without. Being in a constantly stressed-out state also can put a strain on those around you, making everything that much more difficult.
Be Agile- We developers are lucky. We’ve got agile development on our side. Agile development means realizing that not everything can be achieved in a single release, and so we can release one version, then add updates or changes and release another. Agile development doesn’t allow room for defeat–“Oh I didn’t include…”–because it will be added in the next version coming shortly afterwards. It also gives allowance for feedback from the users, so that the program/script/plugin can be tailored to be more useful without crippling its development cycle.
Agile development allowed me recently to share a plugin I’d created, then write down a page and a half of things I’d like to fix, and not stress so much about what I hadn’t yet completed. Instead, I got a chance to reflect on how much I’d actually gotten done. It was actually incredibly satisfying, list of improvements aside.
How do you cope with any perfectionist tendencies? If you are a developer, what do you think of agile development? If not, do you have anything similar that you use?
Peter Burgin is a web developer and instructor who’s not afraid of debugging, large textbooks, or speaking in front of huge crowds.
Web Development
When developing with PHP, for WordPress or other uses, it is important to test your code prior to uploading them to your site. This is to make sure that everything functions like you want it. Viewing .php files require slightly more setup than simply opening them your browser like static web pages. This is because PHP runs server-side, meaning that the code is processed by the server, and the web page hits the browser fully generated.
Setting up a local server with WordPress can be made easier with pre-packaged options. Of course, you always have the option to install and set up Apache, PHP, MySQL, and WordPress individually, but this process can be made easier with pre-packaged solutions. Depending on your operating system–you can choose XAMPP (mulit-platform) or WAMP (Windows only). I will be demonstrating both here, though for my daily development needs, I use WAMP.
Whichever package you end up choosing, the first step will be to download and install the packages as you would for any other program. Please note that neither of them come prepackaged with WordPress, so you may want to download WordPress at this time, just to have it on hand. Start the localserver, if you have not already done so. On XAMPP’s control panel, you need to start the Apache and MySQL services separately.
Installing WordPress on a local server is nearly identical to installing it on a normal hosting server. It does require a MySQL database to run, so the next step will be creating this database.
The following screen shots are from WAMP though the same method can be applied to XAMPP.
Navigate to http://localhost/phpmyadmin. This should display a page like this:
Clicking the “Database” option will lead you to this screen:
Enter in whatever you plan on calling your WordPress database and hit “Create”. There isn’t any need to manually add any tables–those will be created upon installing WordPress.
You should also create a user to manage the database. You can create a user by clicking on your WordPress database on the bar on the left, and then selecting “Privileges” in the menu across the top.
Choose to “Add a new user”
On WAMP: Locate the download location of your WordPress files and unzip the files into WAMP’s www folder. (If you used the default install Windows is C:WAMPwww)
On XAMPP: Locate the download location of your WordPress files and unzip the files into XAMPP’s htdocs folder. (If you used the default install on Windows is C:xampphtdocs)
Find the file named wp-config-sample.php. This should be found in your main WordPress folder. Open the file with a text editor– I use Notepad ++, but you can use whatever you like. Edit the following lines to reflect your database setup. You shouldn’t need to alter the localhost setting–in theory.
Save the file as wp-config.php
Once this is in place, you should be able to install your WordPress normally. Navigate to http://localhost/wordpress/wp-admin/install.php and follow the on-screen instructions for the 5 minute WordPress installation.
Congratulations! You should now have a localhost WordPress setup for you to test your WordPress plugins and themes. If you have any questions, please let me know in the comment section below. I welcome your feedback!
