• About
  • Forum
  • Write For Us
  • Contact
  • Top 50 Photography Blogs
  • Resources
  • Archives

IndustryDev

Web Design & Photography Blog

  • Design
    • Lightroom
    • Photoshop
    • Bridge
    • Camera Raw
  • Development
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Dev Tools
    • WordPress
  • Photography
  • Blogging
    • SEO
  • Technology
    • Hosting
  • Inspiration
    • Interviews
    • Learning
You are here: Home / Archives for Development
Have a question? Ask it and help others in our new discussion forums.

Website Development & Coding Tips, Tutorials & Techniques

The development section includes posts and articles that cover tips, tutorials and best practices for various areas of coding and web development. Discussion includes fundamental and moderately advanced topics in the worlds of PHP, JavaScript, CSS, HTML, WordPress and more. Additional topics include development tools as well as coverage of online communities that assist with the development profession.

Customizing Your Sublime Text Editor

April 2, 2015

There are some pretty neat ways you can make your install of Sublime look and act the way you want it to. In this post, I’m going to go over a few of those techniques. And since I’m running Windows, the instructions I give will be geared towards my machine.

Adjusting Your Settings

If you open Sublime Text and click on “Preferences > Settings – Default” from the top menu, you’ll see a file that looks like this:

Sublime Settings Default

This file is where Sublime holds your preferences. Now, if you scroll through all the lines in this file, you’ll most likely see something you’d like to change. There are some enticing options, such as to show or hide the gutter, what you want your margin to be, your font size, whether or not you want spell check. Tons of lines and they’re all begging for you to start editing. Don’t do it!

This isn’t to say that you shouldn’t edit your preferences. You just shouldn’t edit them in this file. Where you want to customize your editor is in your user preferences file. The way to find that is to click “Preferences > Settings – User” from the top menu. If you open that file, you’ll see something that looks like this:

Sublime Settings User

Yes, it’s basically an empty file. It does have a line or two of text up top, though, that says:

// Settings in here override those in "Default/Preferences.sublime-settings", and
// are overridden in turn by file type specific settings.
{
}

If you’re familiar with CSS or how WordPress templates work, this should be easy for you to figure out. These settings files cascade just like they do. To adjust your preferences, what you want to do is to find the line you want to edit in the “Preferences > Settings – Default” file, copy it and then paste it into the “Preferences > Settings – User” file. It’s simple. Here’s an example.

Say I want to edit the font size my editor uses for the code that displayed on the screen. Like I said above, I’d go into the default settings file and find the area where the font settings are held. On my install, it looks like this:

// Note that the font_face and font_size are overridden in the platform
// specific settings file, for example, "Preferences (Linux).sublime-settings".
// Because of this, setting them here will have no effect: you must set them
// in your User File Preferences.
"font_face": "",
"font_size": 10,

All I need to do is to paste that code into the user settings file, in between the curly braces (while updating the font size). In this case, my edit would look like this (in the user settings file):

// Settings in here override those in "Default/Preferences.sublime-settings", and
// are overridden in turn by file type specific settings.
{
"font_size": 12
}

Notice how I left off the comma.

I want to let you know that you can also customize your settings by file type, per syntax, per project, etc…If you want to learn how to do that, check out Sublime’s settings page. They give some excellent instructions. Also, if you’d like to expand on the instructions I just gave you regarding the settings file and your available options, you can check out Scott Granneman’s page on just that.

Adding a Custom Theme to Sublime Text

I’ve heard some grumbling out there regarding the “stock” look of Sublime Text. I’m not sure what these folks are referring to because I kind of like the way this editor looks right out of the box. But, since Kevin Yank is going over how to update the current theme to the “Soda Theme” in his course, I guess I’ll play along. But this isn’t something I would do. If you sense my lack of enthusiasm, this is why.

Okay, these are the instructions that were given to me in order to update to the Soda Theme.

1. Head over to GitHub at this URL (https://github.com/buymeasoda/soda-theme) to find the available download of the theme.

Soda Theme on GitHub

2. Download the theme by clicking the “Download Zip” at the bottom of the right column.

3. Unzip your folder and rename the “soda-theme-master” to “Theme – Soda” (it’s very important to name it exactly as you see here).

4. In Sublime, click “Preferences > Browse Packages” in the top menu and you should see a folder open. Drag or copy your “Theme – Soda” folder in that packages folder.

5. Once that’s done, click “Preferences > Settings – User” and inside that file, type:

{
    "theme": "Soda Light.sublime-theme"
}

6. Lastly, close Sublime Text and then re-open it. Your changes should now take effect.

Updating Your Color Scheme

Color schemes in Sublime are super simple to change. To update to a scheme that already ships with Sublime, simply click “Preferences > Color Scheme” from the top menu. From there, you’ll see a drop-down menu from which you can choose something to your liking.

Customizing Your Sublime Text Editor

If nothing appeals to you there, you can shop around on Google for something else. I just did this and came across a website that offers all sorts of color schemes for Sublime. It’s called, “ColorSublime” and can be found here. To install their schemes, check out their installation page.

If you’d like to download a color scheme from someplace like GitHub, just follow the instructions I gave you above for how to add a custom theme. This time though, after you add the folder to your packages folder, you’ll need to choose your new scheme from the Color Scheme menu I just described.

Customizing Your Key Bindings (Keyboard Shortcuts)

If you’re used to a certain keyboard shortcut doing a certain thing and just can’t get past the fact that Sublime uses that keyboard shortcut differently, you can change the situation. What I’m trying to say here is that you can alter Sublime’s standard settings for shortcuts.

The way to do this is to, first, check out what the default key bindings for Sublime are. Simply click “Preferences > Key Bindings – Default” from the top menu and you should see something like this:

Sublime Default Key Bindings

Do you remember when I told you that you shouldn’t edit your default settings? Well, the same thing goes for this file. Don’t edit it. And if you couldn’t figure this out already, the way you customize a key binding is to grab (copy) the lines you want to change from the default file and paste them into the “Preferences > Key Bindings – User” file. So, if you wanted to switch the copy keyboard shortcut (Ctrl+C) with the paste keyboard shortcut (Ctrl+V), all you would need to do is copy this from the “Preferences > Key Bindings – Default” file:

{ "keys": ["ctrl+c"], "command": "copy" },
{ "keys": ["ctrl+v"], "command": "paste" },

…and paste it into the “Preferences > Key Bindings – User” file. It would look like this:

[
	{ "keys": ["ctrl+v"], "command": "copy" },
	{ "keys": ["ctrl+c"], "command": "paste" }
]

Notice how I switched the “c” and the “v” and how I left off the last comma. You can do this for any key binding you see in the default file.

Well, that’s all for now. If you’re interested in more ways to customize your experience with Sublime Text, check out these great sites I found for you.

– Customize Your Sublime Text 2 Configuration For Awesome Coding

– Getting Started with Sublime Text 3: 25 Tips

– Setting up Sublime Text 2

– Sublime Text for Web Developers

– Customise Sublime Text 2 by Zander Martineau

Filed Under: Development Tagged With: Dev Tools


Working With WordPress Templates

April 1, 2015

Working With WordPress Templates

I’m going to start talking about WordPress a lot on this site and I thought the best place to begin is on the template end of things. I know the whole download and install saga sounds more logical, but I’m not sure if I can coerce myself into writing those instructions. Honestly, you can already find them written out very well on WordPress.com and just about any other site in the universe that covers anything WordPress. We don’t need another copy.

Templates, on the other hand, surely need to be discussed. I understand that there are various versions of template coverage floating around, but that doesn’t make a new and fresh look at things any less valuable. The more the merrier, I say.

What are WordPress Templates?

Basically, WordPress templates are the same as any other type of template for any other website or CMS. The template of a website is what gives it its front-end look. You can apply one specific template file to cover any amount of pages. In the WordPress sphere, if you have a blog section, you can create one template file to define the look, layout and structure for every single page of that blog. Again, in WordPress (which is what I’m going to be discussing for the remainder of this post), you can apply HTML, PHP or WordPress PHP functions to these template.

In this post, I’m going to discuss the template hierarchy for WordPress. I’m also going to touch on a small sampling of code. I’m going to go through the file types of those involved as well as how they relate to each other. As far as the code goes, I’m going to talk about what the most popular code you’ll find in a WordPress template is and offer a few examples.

About those templates…

WordPress template files must follow a very specific naming convention. If you refer to the “WordPress Template Hierarchy” website or the template hierarchy page on the WordPress codex itself, you can see up close what these names need to be.

The benefit of having a naming convention such as the one used by WordPress is that it creates continuity across all themes. If you’re a site owner who needs to make changes, things will be more clear once you understand the convention. If you’re a template designer or WordPress developer, you’ll have a tremendously simpler experience working of projects because of this as well. Any way you look at it, a clear foundation for working in a structure like this is key.

WordPress Template Hierarchy

I think we should dive into the template hierarchy to get a better look at what’s going on. Again, I’ll give you those two links:

– WordPress Template Hierarchy

– Template Hierarchy at WordPress Codex

These two sites are very important because they give an overview of all files that can be used in your WordPress theme. The way the template file system works is this: on the left, you decide what type of page you need and then travel to the right. During your trip, you’ll find a wealth of possibilities to find the actual template file that you need to get things done.

Here is a sample from the WordPress Codex. You may also view the entire image.

WordPress Codex Template Hierarchy

The nice thing about the first link I gave you above (wphierarchy.com) is that if you’re interested in a specific page type, you can click that page and land on the related WordPress Codex page. As a developer, this is quite handy.

I want to go through a scenario here, just to hammer home the idea of how page templates work. Say, for example, that you have an archive page on your website. What you would do, is visit wphierarchy.com and look for the archive page choice on the left hand side of the page. WordPress would figure out if your archive page is an Author Archive, Category Archive, Custom Post Type Archive, Custom Taxonomy Archive Date Archive or Tag Archive. Once it does that (let’s say you have an Author Archive), you can continue on to the right. You’ll need to determine what type of control you would like over your Author Archive page. If you want granular control, you’d create either a specific author page based on name (author-{nicename}.php) or one based on a specific author id (author-{id}.php). If you don’t want to create either of those, WordPress will cascade further to the next available choice. In this case, it would be author.php. If that wasn’t available, WordPress would fall back to archive.php and so on. You can read more about this specific case here, or just read it below. I’ll paste it from the codex.

—–

In the case of authors, the hierarchy is fairly simple. The Template Hierarchy specifies that WordPress uses the first Template file it finds in your current Theme’s directory from the following list:

author-{nicename}.php – If the author’s nice name were rami, WordPress would look for author-rami.php.
author-{id}.php – If the author’s ID were 6, WordPress would look for author-6.php.
author.php
archive.php
index.php
That is, if you do not have an author.php file, WordPress will check for archive.php, and so on.

—–

Examples of Code You’ll Find in a WordPress Template

In this section, I’m going to go over some of the more prevalent code you’ll find in a WordPress template. Some you’ll find more than others, but I’ll go over the most popular.

WordPress Loop

If you’ve ever dabbled in WordPress behind the scenes, you’ve undoubtedly heard of the WordPress Loop. The loop is what WordPress uses to display the post content of a page. As WordPress states:

“Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.”

In general, the WordPress loop begins with an “if” and “while” statement. It says, “If this exists, I should display it.” WordPress also uses an “else” statement frequently in the loop. It says, “If that doesn’t exist, I should do this instead.”

I took some sample code from the “WordPress Loop in Action” page for you to see what a simple loop looks like:

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
         the_content();
   endwhile;
endif;
get_sidebar();
get_footer(); 
?>

WP Query

Another part of the WordPress loop is WP_Query. Using this class, you are able to refine the loop as you see fit. If you take a look at the “Parameters” section of the WP_Query page, you can see what parameters you can refine by. For example, if you wanted to display posts by specific authors, you would include this WP_Query code into your loop:

$query = new WP_Query( 'author=2,6,17,38' );

Or, if you wanted to show posts written by all authors except one, you’d include this into your loop:

$query = new WP_Query( 'author=-12' );

Take a look through the other parameters to get a better feel of what you can filter, or refine by.

Get Template Part

The last of the most popular pieces of code you’ll find in a WordPress template that I’m going to discuss is the get_template_part function. Get template part basically includes a part of code into your template.

In order to use the get template part function, you will need to pass it a parameter. Here’s an example:

<?php get_template_part( $slug ); ?> 

<?php get_template_part( $slug, $name ); ?> 

The “$slug” in the examples is required and is the name of your file, such as loop.php. If you wanted to include that into your template, your code would look like this:

<?php get_template_part( $loop ); ?> 

The “$name” parameter is reserved for a specialized template and is optional. If you used index for your $name parameter, WordPress would look for “loop-index.php” for the second example above.

In the most simple terms, I believe the WordPress “get_template_part” function is a modified version of the PHP include (or require) statement.

—–

I’m going to stop here for today. For future posts regarding to WordPress templates, be sure to check out my WordPress category.

—–

Are you interested in becoming a WordPress developer? If so, take a look at these sites I found that have to do with just that:

– 35+ Resources to Become a Kick Ass WordPress Developer

– 22 Of The Best WordPress Blogs You Don’t Want To Miss

– 7 Top WordPress Development Blogs

– 15 Blogs for WordPress Designers and Developers to Follow

– How To Become A Top WordPress Developer

Filed Under: Development Tagged With: WordPress


What is PHP?

March 31, 2015

What is PHP?

Developing for WordPress requires a working knowledge of PHP. WordPress’ core code is written in PHP and PHP is used extensively in themes and plugins. While developing in Genesis, the use of PHP is minimized, but a developer still needs to understand functions, loops and arrays. With this in mind, I decided to brush up on my PHP skills with Treehouse and Lynda.

I wouldn’t normally do this, but I’m going to show you a function that was written in PHP. It’s part of the Genesis Framework. The reason I wouldn’t normally do this is because, when introducing a topic, I like to ease into some sort or a definition and then a history. After that, simple code that eventually gets more complex. On this occasion though, I think it’ll be helpful to take a look at the syntax. I’m not even going to discuss it – I simply wanted to show what PHP code looks like.

function genesis_do_subnav() {

	//* Do nothing if menu not supported
	if ( ! genesis_nav_menu_supported( 'secondary' ) )
		return;

	$class = 'menu genesis-nav-menu menu-secondary';
	if ( genesis_superfish_enabled() ) {
		$class .= ' js-superfish';
	}

	genesis_nav_menu( array(
		'theme_location' => 'secondary',
		'menu_class'     => $class,
	) );

}

My PHP History

Back when I first began using PHP, things were quite basic. My initial use was to simplify websites I was creating in HTML by “including” parts of a template (header, footer, navigation). I took advantage of PHP’s “Include Statement.” If I created separate files for the header, footer and navigation and included them, I wouldn’t have to go around and update every single page of the website if I wanted to change something in those areas of the template. It was, and still is, a really great feature.

Obviously, PHP has become much more complex throughout the years. In all honesty, I really don’t even know how to read the code anymore. I could most likely figure it out because of the classes I’ve taken in JavaScript, but as far as writing it, I’m not so sure.

PHP’s History

I’ll give you a rundown of what PHP was and what it’s become. Very simple. And if you’d like to read the full history of PHP, you can find it here. I just consolidated the interesting parts.

1994 – Rasmus Lerdorf created PHP and called it Personal Home Page/Forms Interpreter (PHP/FI).

1995 – Personal Home Page Tools (PHP Tools) was released publicly with extended basic functionality.

1997 – PHP/FI 2 was released after an organic development team took hold of the PHP project.

1998 – PHP 3 was released with a rewritten parser and was called PHP: Hypertext Preprocessor.

(It’s funny, because I remember the days of naming the extention of a PHP file, .php3.)

2000 – PHP 4, powered by the Zend Engine was released.

2004 – PHP 5 was released, powered by the new Zend Engine II.

2008 – Support for PHP 4 began to wane as the “GoPHP5 initiative” gained traction.

2014 – Work continues on the next version of PHP and it hasn’t been decided if this version will be called PHP 6 or PHP 7.

Obviously, there is a lot more history above and beyond what I just wrote, so, if interested, you can head off and read that on the many resources online. I merely wanted to offer a fast background. Please be aware though, the PHP of today hardly resembles what PHP once was, but it still remains HTML centric. You can embed PHP snippets and code blocks directly into your HTML code.

So, What is PHP?

PHP, simply put, is a server side scripting language. Unlike JavaScript, where the code is called and processed on the client’s machine (computer), PHP is called from client machine and processed on the server. The results are then returned to the client.

Now, I’m not expert, but in my opinion, this may have some advantages. I’m thinking about processing power here. If someone is running a really hairy bit of code, perhaps it’s better that the server perform those challenging operations as opposed to the client. Who knows what processing power the client has.

How Does PHP Work?

The actual concept of PHP is fairly simple to understand. The same way your browser interprets HTML, your server (running PHP) interprets PHP.

I’ve written the most popular and basic example below:

<!DOCTYPE html>
<html>
    <head>
        <title>A Very Simple PHP Example</title>
    </head>
    <body>
        <p>Hello <?php echo 'World'; ?>!</p>
    </body>
</html>

This outputs, “Hello World!” (without the quotes)

Let’s go through the above code for just a moment. Everything you see above is HTML, except for this section:

<?php echo 'World'; ?>

I’ll explain what’s going on. When you embed PHP code into your HTML document like we did above, your browser knows what to display by itself. It’ll interpret and display the HTML sections. When your browser is confronted by PHP delimiters, it knows it needs to let the server do its thing. The server takes that chunk of code and makes use of the syntax written inside the delimiters. in this case, the syntax is “echo,” two single quotes and a semicolon. The delimiters in use are the most popular for PHP. They are <?php to open and ?> to close PHP.

If I only included the PHP snippet on the page with nothing else, just “World” would be the output, minus the quotes.

Some Simple Rules

When you want to begin using PHP on a web page, you need to follow a few rules. I’m going to go over them now.

First, in order for the PHP interpreter on the server to know that it’s dealing with PHP, you need to name your files using the “.php” extension. This will give the server the heads up. Second, when you want to insert a PHP code block into your web page, you need to use (like I said above) the opening and closing PHP code block code, which is:

<?php ...your code right in here... ?>

If you’d like to “echo” or output some simple text from a PHP block onto your web page, you need to use the “echo” function. Note: there is some debate whether or not “echo” is a function or not. You can read about that here.

Here is an example of echo in use:

<?php echo "Hello World!" ?>

Notice how I used the name “echo” inside the code block and then use some double quotes. I could have just as easily used single quotes, which I did in the other examples. There are some cases, though, where I’d want to take care of which quotes I’d use, but that’s for a later post. I found an excellent tutorial that covers the use of single and double quotes in PHP. You can take a look at that tutorial here. Also, take a look at how I used the semicolon in the first “Hello World” example I gave. I used a semicolon to close the code. Then, in the example just above, I left the semi colon off. Here’s the rule on that:

“As in C or Perl, PHP requires instructions to be terminated with a semicolon at the end of each statement. The closing tag of a block of PHP code automatically implies a semicolon; you do not need to have a semicolon terminating the last line of a PHP block. The closing tag for the block will include the immediately trailing newline if one is present.” (read more)

I hope you enjoyed my short introduction of PHP. If you have questions and comments, please leave them in the comment section below. Thanks!

Filed Under: Development Tagged With: PHP


Using Sublime Text

March 30, 2015

Using Sublime Text

I’m in the middle of taking the “Up and Running with Sublime Text 2” course on Lynda.com with Kevin Yank and thought it would be a good idea to jot down (as a tutorial) the major areas of what I think is important. All too often, I take a course and have trouble retaining what I’ve learned. Of course, I know where to look back when I need a tidbit of knowledge, but perhaps recording things here is a better, more centralized, location.

I want to mention a quick, yet interesting, coincidence here – Kevin Yank was the author of a PHP book I purchased way back somewhere around 2000. Boy, it’s been a long time. Funny how things come full circle. I still have that book.

Sublime Text seems to be the text editor of choice these days for designers, developers and hardcore coders alike. I have sort of an “against the mainstream” type of personality, so I’m continuously on the hunt for alternatives, but in this instance, I can’t help but to get involved with Sublime. Even though there are very qualified editors in the market, when I see instructor after instructor use Sublime, I think it would be in my best interest to understand and use the industry standard. By the way, Kevin Yank has a great post written about what setup he likes for his install of Sublime. Check it out if you want a behind the scenes glimpse of how a pro operates.

Sublime’s Interface

Left Gutter – Line numbers as well as arrows for expanding and collapsing sections of code. Examples of code that can collapse is functions, loops, if statements, commented areas and more. Also on that side are tab columns which offer a much more clear picture of where your code is tabbed. Very nice feature.

Bottom Status Bar – Shows line and column number of current placement of cursor. This status bar also shows your file’s current indent settings. You may edit those settings for future coding by simply clicking the current settings text in the status bar. Lastly, over to the right, Sublime displays the coding language it thinks your open file is written in and will highlight the syntax accordingly. To alter that highlighting, simply (again) click on the current text that’s shown in that status bar and a menu will appear.

Right Column – A mini map of your code is displayed. This map shows your code in its entirety and allows for simplified scrolling through long documents.

Keyboard Shortcuts and Helpful Actions

Windows / Mac

Ctrl+N or Command+N – Create new file. Opens new tab called “untitled.” You may also choose “New File” from the File menu.

Ctrl+O or Command+O – Opens existing file. You may also choose “Open File” from the File menu. You can also drag your file over into the application window (while Sublime is running) or simply drag your file over to your desktop icon (while Sublime is not running). That’s a fun one.

Ctrl+W or Command+W – Closes existing file. You may also choose “Close File” from the File menu.

Ctrl+Shift+T or Shift+Command+T – Re-opens most recently closed file. You can choose to do this via the File menu by clicking on “Open Recent.”

—–

Toggling Between Tabs

Alt+ or Command+(Number On the Keyboard) – Choose the number on your keyboard that corresponds to the placement of the tab you’d like to work on. Toggles between tabs easily if you’ve got fewer than ten tabs open.

Ctrl+Page Up / Page Down or Option+Command+Left/Right Arrow – Toggles between open tabs sequentially.

Ctrl+Tab – Toggles between the most used tabs. Great for saving time focusing only on “working” files.

Ctrl+P or Command+P – Displays list of open files as a drop-down. It’s also searchable.

All of these commands can be found under the “Goto” menu.

—–

Cool Editing Features

Line Endings – You can choose what types of line endings you want your file to include by clicking “View > Line Ending” from the top menu bar.

Spell Check – You can have your document spell checked by Sublime by choosing “View > Spell Check” from the top menu. Misspelled words will appear in your code with a red underline. To be presented with suggestions for the correct spelling, simply right click on the misspelled word.

Indenting – Ctrl+] or Command+] (those are right brackets) to indent blocks of code. To unindent, simply choose the other square bracket. For multiple indents, keep clicking the square bracket. If you’ve unindented too far, click “Edit > Line > Reindent” and Sublime will indent how it sees fit.

Bracket Matching – Sublime identifies opening and closing brackets. Use Ctrl+M to jump between them with your cursor. Works for brackets, parenthesis and curly braces. To take advantage of this option from the top menu, click “Goto > Jump To Matching Bracket.”

Split Windows & Layouts

Sublime Text has some really nice features for splitting up the windows you’re working in. If you have multiple files open, you can click “View > Layout” from the top menu bar and choose what you want your layout to look like. It you want to toggle between your working files, you can use the Ctrl+1, 2, 3 and so on keyboard shortcuts. To get your files in the new panes once you choose your layout, simply drag each tab where you want. If you want to go back to a single window, no need to drag your tabs again. You only need to choose the single window option from the top menu.

If you’d like to work on one file, multiple places simultaneously, you can do that. Go to the top menu and choose “File > New View Into File” and your working file will be duplicated as another tab. Drag that tab to another window and begin editing. You’ll notice that any change from one view will instantly change the other view as well.

Opening Folders & Working in Projects

If you’d like to open a folder in Sublime, simply drag the folder into the workspace. You’ll notice the left bar opens with your folder structure available. Alternatively, you can also click “File > Open Folder” from the top menu.

If you’d like to save the folder as a project, you can click “Project > Save Project As” from the top menu and you’re project will be saved. If you open multiple projects, you can switch between them by clicking “Project > Switch Project in Window” (Ctrl+Alt+P or Ctrl+Command+P). Remember that all changes will remain and files will be saved when switching through projects.

Finding & Replacing

Sublime’s find and replace features are really good. I’m sure it’s one of their best selling points. Below, I’m going to list out some keyboard shortcuts and after that, I’ll offer up some commentary on a few.

Find – Ctrl+F or Command+F – Searches current file. Utilize the “Enter” key to progress through the search results.

Note: When you perform a search, option buttons appear to the left of the search bar at the bottom. Those option button are: Regular Expression (Alt+R), Case Sensitive (Alt+C), Whole Word (Alt+W), Reverse Direction, Wrap, In Selection and Highlight Matches.

The buttons on the right of the search bar are: Find, Find Prev and Find All.

To close the search box, click “Esc” on your keyboard.

Find Next – F3
Find Previous – Shift+F3
Incremental Find – Ctrl+I or Command+I – Searches and after hitting “Enter” you’re cursor is left at your first result. If you click the “Esc” key while using Incremental Find, your cursor will return to its original location.

Replace – Ctrl+H or Option+Command+F – Replaces text. You also have the ability to keep your text case if you use the “Preserve Case” (Alt-A) button down to the left of the “Replace With” field.

Replace Next – Ctrl+Shift+H

Quick Find – Ctrl+F3
Quick Find All – Alt+F3
Quick Add Next – Ctrl+D
Quick Skip Next – Ctrl+K, Ctrl+D

Use Selection For Find – Ctrl+E
Use Selection For Replace – Ctrl+Shift+E

Find in Files – Ctrl+Shift+F – One of the coolest features of Sublime’s search (in my opinion) is the ability to search across files. If you use the shortcut I listed above, you can search within your entire project. The results are shown in their own tab. As you browse your results, you can double click on your results to land exactly where your search result is within its file. I first saw Carrie Dils performing this type of search during her Genesis class and this feature by itself is part of the reason I decided to take Kevin Yank’s course.

If you don’t like the separate tab option, you can choose to have your results shown in their own box below your files. Same thing there – just click the results in that box and you will land on your desired code. To jump through your search results, simply press F4 on your keyboard.

Personally, I think these search features alone warrant the money paid for the registered version of Sublime Text.

PS – Check out this post by CSS Tricks to learn some great features Sublime Text offers.

Please check out my further posts on how to work with Sublime Text by clicking on the Dev Tools category.

Filed Under: Development Tagged With: Dev Tools


What is JavaScript?

March 27, 2015

What is JavaScript?

Technical people have got to be some of the most challenging types of folks to listen to while trying to learn about technical things. That’s a pretty big statement, but I think I’ve lived long enough to realize that it’s got some merit. I’m sure we can all remember back to high school or college when we had that very, very qualified teacher or professor. While they were teaching, you just couldn’t seem to grasp what they were talking about. And it seems that the smarter they were, the more of a challenge they had at getting their point across.

The Challenge

I think the underlying issue with what I’m discussing here is that really technically oriented types gloss over important parts of what they’re conveying. And since we’re talking about JavaScript in this post, I’ll give you an example.

ME: Hey, I’m playing around and I want to get that annoying little box to pop up in my browser. How do I do that?

HIM: Just alert it from the console.

Do you see what I’m talking about? Let’s take a closer look at what just happened above. Obviously, I have zero experience in JavaScript and this is why I’m asking such a simple question. If I had taken even the most rudimentary of courses or tutorials on the subject, I would know what the “alert” command was. If I knew that much, I would possibly have some experience with the console. Now, since I don’t know what an “alert” is, I most certainly don’t know what the console is. The fact that the person I asked the question to couldn’t pick up on that is a good example of what I’ve alluded to above. It happens all the time and this is why I say that technical people make tough teachers to learn from. It’s either because they don’t have enough time to think about such trivial matters or they just don’t know how to get so basic anymore.

Let’s just say, there are a lot of assumptions flying around out there and in order to get good at something, we need to start at the beginning. The real beginning.

Some Credentials

Before I go any further, I’m going to give you my credentials. Since I’m just starting out, you already know I’m no expert. I do have a pretty good idea of how to explain things though, especially to beginners.

So far, I’ve taken a few classes in JavaScript.

Treehouse

Introduction to Programming
JavaScript Basics
JavaScript Loops, Arrays and Objects
Interactive Web Pages with JavaScript
jQuery Basics
AJAX Basics

Lynda

Foundations of Programming: Fundamentals with Simon Allardice
JavaScript Essential Training with Simon Allardice
JavaScript for Web Designers with Joe Chellman

As you can see, I’ve had my fair share of opportunities to listen as someone explained to me exactly what JavaScript is. I must say, the instructors in these videos did a pretty good job. I now do know what JavaScript is. Not in a theoretical sense or anything, but I know what it is, what it does and what it’s capable of (Well, not really. That’s never ending.).

My Explanation

What I’m going to do here is attempt to explain what JavaScript is in the most simple and basic way, then give you the typical explanation of what it is that you’ll read and hear a thousand times. After that, we’ll call it a day.

So, what is it? Well, most simply put, JavaScript is an assistive translational tool. You have a thought in your head and you want that thought to happen on the computer screen. Working from my example above, you want to see the annoying pop-up box – you just don’t know how to make it happen. You can’t wish it were there and you can’t make it appear by wagging your finger at it, but you can command the computer to show it to you while using a language it understands.

ME: Show up you little box!

COMPUTER: I really don’t know what you’re saying. I don’t even have ears. Perhaps if you asked me in a way I understood, we’d both be happier.

ME: Okay, fine. How about:

alert("Hello! I am an alert box!");

COMPUTER: Ah, now you’re speaking my language.

It’s like learning any language. As an English speaker, if I wanted to ask where the bathroom was and eventually go there while visiting France, I’d need to ask a French person in their language. I’d say something like, “Où sont les toilettes?” If I did that, I’d end up in the bathroom. If I simply said, “Where is the bathroom?”, I’d get a funny look. The same look the computer gave me when I begged it to pop up an alert box.

Again, JavaScript is an assistive translational tool. As is any programming language. Once you understand that fact while you’re programming in JavaScript – you’re simply translating your thoughts into computer-speak – you’ll have an easier time. Some of the fight will be gone. You’ll begin to accept what you’re doing. All you need to do is to learn exactly what that computer-speak is – that’s what all those classes out there are for. They teach you what to do.

Some More Formal Definitions

As promised, I’m now going to go over some of the more popular definitions of what JavaScript is. I’ll pull a few definitions and then discuss them.

Wikipedia – JavaScript is a dynamic computer programming language. It is most commonly used as part of Web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.

W3Schools – JavaScript is the programming language of HTML and the Web. Programming makes computers do what you want them to do.

Mozilla Developer Network – JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB.

People out there like to say that “JavaScript is the programming language of the web” and that “JavaScript is object-oriented.” I think I like the second definition above when it says that “…programming makes computers do what you want them to do.” That one is pretty good. If I had to explain it to a third grader, that’s probably what I’d say. To further assist you in understanding the definitions of JavaScript above, I’m going to break down the key terms.

Key Terms

Programming Language – A programming language is a formal constructed language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs to control the behavior of a machine or to express algorithms. (read more)

Dynamic Programming Language – You can read all about what makes a computer programming language dynamic versus what makes is static right here.

Interpreted Programming Language – An interpreted language is a programming language for which most of its implementations execute instructions directly, without previously compiling a program into machine-language instructions. The interpreter executes the program directly, translating each statement into a sequence of one or more subroutines already compiled into machine code. (read more)

Object-Oriented Programming Language (OOP) – Object-oriented programming (OOP) is a programming language model organized around objects rather than “actions” and data rather than logic. Historically, a program has been viewed as a logical procedure that takes input data, processes it, and produces output data. (read more)

Scripting Language – A scripting language or script language is a programming language that supports scripts, programs written for a special run-time environment that can interpret (rather than compile) and automate the execution of tasks that could alternatively be executed one-by-one by a human operator. (read more)

Wrapping It Up

I think I’ve covered most bases here. I think the best thing about writing this type of thing out, for me anyway, is that I have to do research. Every time I look for a definition of something, I have to read it to make sure it fits into what I’m trying to convey. Each time I read it, I learn and that’s what it’s all about.

Do you have your own definition of what JavaScript is? Is it super-simple, sort of like what I described it as or is it much more thorough? If you have something, I’d love to hear what it is via the comment form below. Go ahead – show off what you know!

Filed Under: Development Tagged With: JavaScript


WordPress Theme & Plugins Installed On This Website

March 26, 2015

WordPress Theme & Plugins Installed On This Website

Team Treehouse offers a wonderful and quite in-depth track that covers WordPress Development. I’ve been using WordPress since 2006, but I have to say, I never knew exactly how extensive it is and how expansive it can be. I’m a bit taken aback by all the possibilities that are at my fingertips.

I just finished taking a course by Jesse Petersen that covered the Genesis Framework by StudioPress. I guess Jesse sort of sold me on the whole thing and after using Genesis years ago, I decided it was high time to give it another shot. Honestly, I most likely didn’t know what its reason for being was back when I had it installed, but after learning of its super-powers, like Jesse, I’ve settle into the Genesis space. It answers questions I hadn’t even considered asking.

With this information in mind, I decided to set up a website using WordPress and have it run Genesis.

Let’s talk about the page you’re currently reading. Here, I plan in keeping an ever-growing (I’m sure) list of what this website is running on the front-end as well as the back-end. It’ll sort of be like those “What’s in My Camera Bag” videos you see over on Youtube, except that it’s for a website. I know I’ve been interested in what other sites have got going on under the hood and if you’re reading this page, you might just have the same types of curiosities. So let’s get going.

Blogging Platform

WordPress
WordPress has earned my trust. I’ve been blogging with it since 2006 and it has never let me down. Looking back, I could have used an install of WordPress for ever single website I’ve ever developed. There’s nothing I’ve created that WordPress couldn’t have handled.

Theme Framework

Genesis
It seems like Genesis has been around forever. This is important when dealing with themes and theme developers online. Longevity and professionalism are important like none other.

Theme

News Pro by StudioPress
The same thing (obviously) goes for StudioPress, since they are the ones who make Genesis. Enough said.

Plugins

Akismet
If you run a WordPress blog or website and aren’t using Akismet, you should really ask yourself why you aren’t. Akisment was created and is currently maintained by Automattic – the folks who own WordPress.

WordPress Importer
I used this plugin during the setup of the News Pro child theme I mentioned above. StudioPress offers an XML file with all the demo content their version of the theme uses, so it’s helpful to import that data in an effort to minimize the hassle of getting your install to look as good as theirs.

Simple Social Icons
This is a social plugin created by the fine folks at StudioPress. It works well with the News Pro theme and it was suggested that I install it. I haven’t set it up yet, but you’ll see what it looks and functions like soon.

Genesis Simple Hooks
This is a really great and powerful plugin that allows you to place snippets of text or code in a wide variety of places around your Genesis Framework theme.

Genesis Simple Edits
If you’re looking to remove the StudioPress and Genesis credits from the bottom of your child theme, the easiest way to do this is to use this plugin. No need to dive into the code or database – all you need to do is update one line. And this plugin also allows you to quickly modify some meta information as well.

Genesis eNews Extended & MailPoet Newsletters
These two plugins go hand in hand. I use the Genesis plugin as a container for the MailPoet plugin. I use the MailPoet plugin as an easy and professionally managed way to send post updates to followers via email. By the way, if you’d like to receive my posts in your email box, simply head down to the bottom of the page and type your email address right below the “Posts by Email” label. You’ll receive my content as I write it – directly to your inbox.

MailChimp for WordPress Lite
I’ve been switching back and forth between MailPoet and MailChimp for a few days now. Both plugins are similar in that they send emails to subscribers. From what I’ve seen out in the wild though, MailChimp is hugely popular right now. It has an extensive back-end (MailChimp) where site owners can customize their email campaigns, their email templates and their lists. It’s a somewhat in-depth process, so if you only have one subscriber on a very low traffic site, you may want to opt for something like FeedBurner for the time being. MailChimp really is a force to be reckoned with though.

Ninja Forms
Highly recommended Ninja Forms. I set this plugin up in less than 5 minutes. It almost works out of the box. Adjust a few settings and choose what page you want your form to reside on and you’re all set. Of course, I’m only using this for a contact form, so if you’re building something more complex, it’ll take more time and effort.

WordPress SEO by Yoast
This plugin is a must if you want granular control over almost every aspect of your site’s SEO. It’s simple to use and simple to install. And it’s leaps and bounds better than any other SEO plugin that’s available. You can find more information on the author’s website.

Broken Link Checker
If you write a fair number of posts or pages, you’ll undoubtedly include links to websites that disappear over time. There’s nothing worse than someone browsing one of your pages, only to click on a link that goes nowhere. It makes you look bad. Period. The “Broken Link Checker” plugin continually scans your WordPress site, looking for broken links. If it finds any, you’ll receive an email and the link will be placed on a list for you to edit.

SyntaxHighlighter Evolved
Have you ever tried to place code in one of your posts on WordPress? If so, I bet you’ve had a terrible time trying to do what you wanted. Some people say that the “pre” tag or the “code” tag will help, but I haven’t found that to be true. This plugin does exactly what it’s supposed to do – it’s displays your example code the way you want it to look.

Genesis Visual Hook Guide
If you’re a Genesis developer, there are a few plugins that you absolutely need. One of them is the Genesis Visual Hook Guide. This is an “admin” plugin, in that the general public doesn’t see its operation. What it does is, when activated, it highlights all the sections of your Genesis child theme’s action hooks, filter hooks and hook area markup, on the front-end of your website (when logged in as admin). This is extremely helpful during the development process. It gives you something to look at graphically as opposed to digging through code, using valuable time.

Filed Under: Development Tagged With: WordPress


What’s Your Favorite Coding Text Editor?

March 10, 2015

What's Your Favorite Coding Text Editor?

There are a lot of text editors out there. Since I began looking for something to use in earnest, I’ve been sort of overwhelmed. I guess the days of Notepad are over. People have figured out better ways of doing things.

If you ask any serious developer today what their favorite text editor is, three out of four of them would most likely tell you, “Sublime.” With good reason too – Sublime is awesome. If you’ve never used a real editor for writing code, head over and download a copy for free to see what you’ve been missing. I downloaded it and played around for a few days. I actually fell in love with it until a little box popped up and asked me to register my copy (for a fee). Of course, I could keep using it for free, but I’d have to continuously close the little box that popped up every so often. Not a big deal. I did decide to continue my search because, obviously, unless I paid up, this text editor wouldn’t be the solution I was looking for. The cross platform compatibility, folder and file structure on the left hand side and that little mini code view over to the right will be missed though. Just having those features almost makes the $70 worth it.

During my text editor search journey, I bumped into a few more that are worth mentioning here (and a bunch others that aren’t). One editor is called “Notepad++” and the other is called “Atom.” Notepad++ is great. I downloaded and went through a few sections of one of my classes with it. It worked well and offered many themes to make your coding area easier to read. The only issue, though, is that this particular editor is only available for Windows. While that’s fine for today, if I ever decide to purchase a Mac for development purposes, this won’t help. And I wouldn’t want to invest time into something I’m just going to have to abandon later.

Atom really caught my attention. It’s created by the folks at GitHub (if you don’t know what GitHub is, click here) and is getting some very positive reviews. It’s also available for many different operating systems, such as OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux. I didn’t get around to downloading and using Atom, but someone else did and loved it. Check out the video:

GitHub ATOM – Why Atom.io will be your favorite Text Editor

If you like the fella who’s doing the talking, you can subscribe to his channel to learn some web design. He’s got some nice tutorials.

Now, the reason I didn’t download and use Atom was because just as I discovered it, I also discovered a fairly new text editor called, “Brackets.” It’s developed by the folks at Adobe and is totally open-source and is written in HTML, CSS and JavaScript. If you are proficient at writing code and have some good ideas, you can even contribute to Brackets. Just head over to their GitHub repo to begin your collaborative effort.

So, what’s so great about Brackets? Well, right off the bat, their live preview is what sold me. Check out this video to see what I’m talking about:

Brackets: A Free Open Source Code Editor for the Web

Brackets’ inline editor, cross-platform capabilities and open-source community really sealed the deal. And now that I’ve been using this editor for a few days, I have to tell you, I couldn’t be happier. Oh yeah, I forgot to tell you, the fact that it’s free didn’t hurt with this decision.

If you’re a coder or are looking into coding, check out the editors I discussed above. They really are the biggest names and are the most popular. You’ll most likely make a choice from one of these four. Also, if you do pick one, let me know about it in the comment section below.

Filed Under: Development Tagged With: Dev Tools

  • « Previous Page
  • 1
  • …
  • 3
  • 4
  • 5

Connect With Me

  • Facebook
  • Google+
  • Instagram
  • Pinterest
  • RSS
  • Twitter

RECEIVE MY POSTS BY EMAIL!

Interested in receiving my posts by email? This is your chance! Simply place your email address in the box below and I'll deliver each and every post I write directly to your inbox.

Follow Us on Facebook!

IndustryDev

Check Us Out on Instagram!

Load More…Follow on Instagram

Recent Posts

  • Using the Dust & Scratches Filter to Clean Up a Photograph February 15, 2019
  • Use a Focus Rail For Better Macro Photography February 11, 2019
  • How Do Lens Aperture Sizes Affect ISO Values? February 9, 2019
  • How to Change the Auto-Rotate Settings on your Canon Rebel DSLR Camera February 6, 2019
  • How to Change the Image Review Settings on Your Canon Rebel DSLR Camera February 5, 2019

Most Popular Posts

  • How to Export Video From Adobe Photoshop How to Export Video From Adobe Photoshop
  • How to Set the Photo Quality in your Canon Rebel DSLR Camera How to Set the Photo Quality in your Canon Rebel DSLR Camera
  • How to Resize & Save Files From Adobe Bridge Using Image Processor How to Resize & Save Files From Adobe Bridge Using Image Processor
  • How To Stop the Flash From Popping Up On Your Canon Rebel DSLR Camera How To Stop the Flash From Popping Up On Your Canon Rebel DSLR Camera
  • How to Speed Up & Slow Down Video in Adobe Photoshop How to Speed Up & Slow Down Video in Adobe Photoshop

About IndustryDev

IndustryDev is an online publication that focuses primarily on lovers of the digital world. We write articles that cast a wide net, including those that discuss website development, design and WordPress. We also post, daily, about the image related aspects of the web, including photography and illustration, along with other topics like blogging and SEO.

Read More

RSS IndustryDev Discussion Forum

  • Why Grammar is Important When Writing Blog Posts February 15, 2019
  • Tips & True Costs For Selling Greeting Cards on Etsy February 15, 2019
  • Quick Tips For Proofreading Your Blog Posts February 15, 2019
  • Write With Genuine Integrity For Your Blogging Audience February 14, 2019
  • What Are the Two Icons Inside the Thumbnails in Adobe Bridge? February 12, 2019

Tags

Bridge Camera Lenses Camera Raw Camera Settings Channels CSS Dev Tools Graphic Design Hosting HTML Interviews JavaScript Learning Lightroom Macro Photography Masking Night Photography Photoshop Photo Tips PHP Post Processing Selections SEO Shapes Smart Objects Video WordPress

Recent Comments

  • Jay Gaulard on How to Reset Edit Settings Back to Default in Adobe Camera Raw: “Hi Charleen, I'm assuming you are talking about the small circle identifier that appears in Adobe Bridge after…” Feb 11, 15:57
  • charleen smith on How to Reset Edit Settings Back to Default in Adobe Camera Raw: “Hi Jay, Your instructions for returning a dng to its original settings were very clear. I…” Feb 11, 15:20
  • Jay Gaulard on How to Export Video From Adobe Photoshop: “Hi Mayur, I've actually had this happen. I just need to remember what was causing it. I'll reply…” Feb 5, 08:13
  • luis on How to Change & Limit ISO Settings on a Canon Rebel T6i DSLR Camera: “Thanks!” Feb 5, 00:31
  • Mayur Jobanputra on How to Export Video From Adobe Photoshop: “I just discovered this gem in PS today.. after nearly 10 years of using it!…” Feb 4, 16:02

ARCHIVES

  • 2019: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2018: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2017: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2016: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 2015: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Copyright © 2019 · IndustryDev.com Web Design & Photography Blog · About · Write For Us · Contact · Privacy / Terms · Archives