Web Snacks

Ever needed to clean up some HTML content, Grab the text between a tag, or find all the email addresses in a document? Well Regular Expressions are here to the rescue.

You are watching Web Snacks and I’m John Harbison

Regular expressions or sometimes called regex is a sequence of characters used to pattern match. It is commonly used is many programming languages like Perl, PHP, javascript, Ruby and many others – but today we are using them in a text editor – I will be using Sublime Text for my examples

You can find a full list of editors that use Regex on Wikipedia

https://en.wikipedia.org/wiki/List_of_regular_expression_software

Why would you use Regular Expressions?

Simply because it saves time

Sure you could go through a document and click and copy and edit, but it is so much simpler to just have the computer work for you. Instead of manually copying email addresses in the document you could grab all of them at once. Instead of formatting the document to insert line breaks you can grab all of them programatically. Regex lets the computer work for you.

To really understand regex you need to understand the syntax – Today though I want to give you some simple pattern matches that are extremely useful and we are going to use Sublime Text to see them in real time.

For an example I’ve got a simple HTML document that has all of the lines joined. You might see some nasty html like this if you open someone else’s code or a site has been minified to eliminate the white space. You may need to edit it so being able to make it more human readable can be a time saver.

So I’ve opened the document in Sublime Text. I hit Command F on Mac or Cntrl F on Windows to open the Find Dialogue. On the left of the Find bar there are some buttons that I need to select. The first is the first button, the .* button that means we are searching with Regular expressions. The next two buttons I need to select are the “Wrap” button which allows me to search the entire document at once instead of just searching below or above my cursor. The last button I need to turn on is the highlight matches button which is directly to the left of the search box.

Now I’m ready to work

the first thing I want to do is split my paragraphs of content. In the search field I will type

which will select all of the closing paragraph tags.

As I type in

You’ll see that they all become highlighted. I’ll then Hit the “Find all” button which will select all instances of the closing paragraph tag. Hit the forward arrow on the keyboard which will move the cursor to the end of the select tags. Hit “enter” twice to insert line breaks in between the paragraphs. This makes the wall of text much more readable.

We are going to continue making the markup readable by putting all of the list items on separate lines. Command F to pull up the find dialogue. Type in the ending list item tag

Click Find all then hit the forward arrow then enter. Just like we did with the paragraphs, now all of our list items will be easier to read. We can finish up by moving the opening unordered list tags to their own lines as well. Also in Sublime Text you can select multiple lines and hit the tab key to indent lines.

For these two examples all we did was a straight tag match. Regex will pattern match anything you type. There are some scenarios where you might have to add slashes to get them to match, but for the most part if you type it, it will match. For this reason you may have actually used a regular expression matching system in the past and didn’t even know it.

But lets do some other things that might be a little more complicated.

What if we wanted to make a collection of links.

Tools for Measuring Marketing Success

Today I’m going to talk about measuring a marketing campaigns success. The act of marketing is expensive. It can cost a lot of money to run ads and raise awareness and it can cost a lot in time effort and energy. That’s why it is so important to track and measure your campaigns kpis or key performance indicators. These are the goals that you set up to indicate if your campaigns is working. Chances are you’ll be doing multiple things to raise awareness for your campaign. If you track your campaign properly you should know what worked and what didn’t. This way the next campaign will be cheaper and more effective because you’ll know what to do and what to avoid. In the end this will save you both time and money and get you the success you wanted.

Understanding what success is can be hard. Success is really about reaching a well defined goal. The more simple the goal the better. Some simple goals might be “getting users to visit a web page”, “getting users to fill out a survey”, or maybe “getting a user to place an order”.

A goal can have a sliding scale – that’s good because it can help us measure against other goals.

Example:

Write a blog article

Goal: get traffic to that article

We will look at the actions you might take to drive traffic to the article as well as the tools you could use to track its success.

The process for marketing the article will be to:

* setting the goals for the campaign

* Setting actions and deliverables

* Define the metrics for success on the Campaign as well as each Action executing those actions

* Monitoring results of actions

* Analysing results of the actions against the metrics

* Knowledge Share – figure out what was worth it and find ways to capitalize on what worked and remove resources from what doesn’t

Goals

Our Metric for success might be 2000 pageviews to the article’s URL. We may have additional metrics to judge each action’s success too. At this point though let’s talk about the marketing actions and deliverables we are going to execute in order to reach our goal of 2000 pageviews

Campaign Goal: 2000 pageviews of the article

Example: All actions should result in getting traffic to a blog article

Actions:

* Make an appealing graphic

* Create a short description for Article with enticing text

* Use Goo.gl to setup your link

* Post link to article on Twitter

* Post link to article on Facebook

* Post link to article on Pinterest

* Post link to Google Plus Communities

* Post link on Reddit

* Set up ad words campaign for article

* Monitor Each Channel’s Results

* Use Goo.gl shortener to see your link clicks in action (high level)

* Use google analytics to see traffic results to your article

After you have mapped out all of your actions and deliverables for the campaign you can assign your subset of metrics for measuring success. If the overall campaign goal was 2000 total pageviews it might be good to take that total and divide it by each traffic driving channel – for example if you post links on Twitter, Facebook, Pinterest and Google plus you could make a goal of 500 clicks for each channel. If you get more then it is a success, but more importantly if the channel underperforms you will have a way of identifying problem areas – and hopefully avoid the same pitfalls in the future.

The tools to measure our campaign

Google Analytics, Goo.gl Url Shortener, and Google Webmaster tools

Goo.gl URL Shortener (The first 24 hrs)

* goo.gl for shorting URLs and seeing clicks in realtime

* Other URL Shorteners

* bitly.com

* bit.

Tools and workflow for PHP Development.

One of the reasons I started this my blog and this podcast was because I’m always interested in how people do their job.  There are a few podcast I listen to and follow, and people talk about things they are using or excited about but, it is always just a piece of what they are using – they might talk about a framework or an ide or this or that, but everything is piece meal and I sometimes wish they would talk about how it all fits together.  Well that’s the whole point of this podcast today – to share what tools I use and the work flow that I employ.

So I’m a Web Developer – I started developing in PHP  because my partner – who was the primary developer for our company decided to use PHP – this was 2003 – the dynamic web was still very young – PHP was the hotness and that’s what we went with.  I’ve never run into any issues with it – I know everyone has an opinion when it comes to languages – but I’ve not run into a specific instance where PHP wouldn’t work for us. So I’ve stuck with it all of these years.

What types of Projects do I work on? 

I mostly work by myself although I have worked with teams in the past.  I primarily have 4 different types of jobs I work on – Simple Websites (simple meaning – a website for a client), WordPress Websites (used for Microsites or for clients that want or need WordPress), Marketing Campaign websites or systems (usually thousands of pages, and need advance analytics and realtime results tracking), and Custom Web Applications (systems and apps that need a web interface – has users / reports / exports / all kinds of custom created madness).  I’ll walk you through my work flow and process for each of these.

Custom Website Development

– Using Custom PHP CMS system (Utilizes PHP, Mysql, Nginx, HTML, CSS, Javascript)

– Sites for Clients small and medium sized businesses (Lawyers, hotels, lawn care, spas, neighborhood associations – primarily small locally own businesses)

My typical workflow for these type of jobs

DESIGN

-start out with a static flat designed graphic in Photoshop.  I usually do around 3 designs based on graphical elements they provide me as well as content / color / general direction they give me.  I usually talk with the client, get some ideas, see what they like and I base my designs off of those discussions.

FRONT END DEVELOPMENT

*  Slice up my graphics in Photoshop

*  That process usually requires me saving my graphical files in different formats depending on the graphic usage (gif or PNG 8 for text / JPG for photos / PNG 24 for logos or graphics that need antialiasing)

*  Once sliced I usually start a blank html / css file on my local machine

* Preview in Firefox

*  For layout like this I use lightweight editor / probably Sublime Text

*  Start with placing elements first to match my design (HTML and CSS)

*  As it gets more complicated I might move my css from inside my html document and put it in a separate linked file

*  If this is a responsive site I may begin working with my CSS media queries at this point

*  I just want to match my layouts as close as possible

*  I might do some cross browser testing (although I don’t do much)

*  After the layout is finished I will start integrating Javascript and advanced CSS (sprites / rollovers / gradients / web fonts)

*  Flexslider / lightbox /

(still primarily focused on layout and making sure it looks close to my initial design)

*  once it looks good it’s time to move on to backend and functionality

BACK END DEVELOPMENT

The tools I use primarily for setting up my backend isTerminal on a Mac or PUTTY on a Windows machine

A brief podcast on how to get started with this extremely popular source code manager.

What is Git?

Git is an open source distributed version control system. It is fast, and small making it an extremely popular subversioning software SCM (Source Code Manager). Some of its competitors are Subversion (SVN), CVS, Perforce, and Clear Case.

you use it for tracking updates and versions of files and text documents. You can track all types of files, but it is most useful for Software source code, weapplications.

Lets get started

– Git can be a little tough

– Understand it best through the command line

– A good resource is Git Essential Training with Kevin Skoglund

– installing git tutorials from git-scm.com or github.com

Preview of Git Essential Training on Lynda.com

Get 10 days of free unlimited access to lynda.com.

Git on Mac

– install apples command line tools.

– access it with Terminal

Git on Windows

– In the main Git web site, it’s going to be at http://git-scm.com.

– download the exe. walk you through the steps. stick with the defaults

– Git Bash (Bash is unix environment – very similar to environment that unix users look at. Git Bash has the same commands that Unix users are used to. This is how you can control Git in a command line environment

Now that we have looked at how to get Git and install it let’s get up and running with it. I would like to point out that you can set configurations and settings for your installation, but I’m not going to go into that. At this point you can use Git and This tutorial is more about getting your feet wet and using it. I feel that if you can get used to using it, it will make learning the intricacies of a program much easier. For this tutorial I’ll focus primarily on the basics and let you know where you can go to dig deeper.

The basic work flow of using Git is to navigate to the folder you want track with git, initialize it, add files to your staging area, then commit those changes. As you make changes to files you’ll commit those changes to your project. You can comment on those commits making it easy to keep track your updates. If you work as part of a team – members can check out files, then commit them back to the master repository. As you are developing you can revert back to any previous version of the project. To do this you would check out a previous version, make your changes, then merge them or keep them separated as a branch of that project. Branches allow you to maintain completely independent versions of the project; this way you can test or work on potential ideas for the project without affecting the main branch of project – this encourages experiementation; create a branch, experienment and if it isn’t going to work, just abondin it – it isn’t going to hurt your master, but if it does, just merge the changes into your master and delete the master.

Git is great because it allows you develop in one folder. All your ideas, experiments, testing and team involvement can all be done in one folder. Git is part of your working directory. As you check out and develop different versions of your project, Git will add or remove files that are associated with that version in real time – when you first get started it might seem like magic. I know when I started working with branches it seems crazy to see files drop in or out of my working directory – one second they were there and the...

What is Google Mobile Friendly, #mobilegeddon, Responsive Design and more.

Earlier this year Google announced that it would be making a preference for mobile sites when searching from a mobile device. On 4/20/15 Google’s update went live – meaning sites that weren’t mobile friendly would disappear from mobile search results. This is kind of a big deal since most people search from mobile devices throughout the day. As a web developer and designer this means making sites that work on multiple devices. It really isn’t that hard to make a site mobile friendly. Here are some steps which will help you get your site in to Google’s Mobile Friendly Good graces.

1. Test your site

Goto https://www.google.com/webmasters/tools/mobile-friendly/ . Check your site. If Google says that it is mobile friendly then “HOORAY” You can stop! Nothing to worry about!

Remember: Just because your root domain url (http://www.domain.com) is mobile friendly doesn’t mean the rest of your site is. If you have multiple templates or page designs you will need to test each page url. The mobile friendly tool doesn’t check the whole site – only the url you submit.

2. Meta Name Viewport

The first step to making your site mobile friendly is setting the viewport meta tag. This tag lets your device know what size your devices screen is. This tag will go in the HTML at the top of the page near the tag. This is example will work<br />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/><br />

3. Analyze your Layout<br />

Hopefully you have designed your website with CSS and not statically laid out in tables. If your site is not laid out with <div>s then you may just need to call a designer / developer and get a new site constructed.<br />

4. Percentages are your friend<br />

The way we are going to make your site Mobile friendly is by making it responsive. The easiest way to make something responsive is to use percentages to set widths instead of setting a static widths using pixels. You will need to plug in percentages anywhere you have a static pixel width. This means any CSS or HTML. You’ll need to check styles you have or parameters on things like <img> tags, <div> <table> – anything that has a width defined. Google will look at the site and if there is anything popping over 350 pixels it will think the site isn’t mobile friendly.<br />

For example: <div style=”width: 500px;”> should be changed to <div style=”width: 100%;”>. or as a parameter <img width=”500″> to <img width=”100%”><br />

This works fine if you want things to take up 100% of your screen. You can also have multiple columns or <div> float next to each other and use widths like 50% (<div style=”width: 50%; float: left;”>) which will allow two divs to collectively take up 100% by floating next to one another.<br />

You can also use percentages to describe things like margin and padding. I’ve found 2% to 5% is a good amount of margin for things like images and divs.<br />

Using percentages is a necessity with responsive design. But what if you want to have things statically designed?<br />

5. Fix static widths with Media Queries in CSS<br />

So Media Queries in the CSS are what gives your browser the intelligence to change how it displays the page depending on the device. The media queries will look at how big the browser window is and change the way it displays the content. This is how we will change how the screen displays content if it is on a wide screen like a monitor,

What is a Podcast?

They’ve been around for a long long time and really I don’t know why I haven’t made one, but now that I have I’ll make a podcast about making a podcast – soooo deep.

So a brief definition – Podcast / really it’s an audio show – presented in audio format – your listening to one now.

What makes it a podcast?  They first showed up on iPods many moons ago – so that is where the POD comes from The Cast is actually based on the word broadcast, but more accurately they should be called PodFeeds,because a podcast is syndicated by RSS or XML or some other Feed that uses serialized data to link to the audio files.

So what do we need to in order to create a Podcast?

Here are the steps. and I’ll go more in depth with each one in just a moment.

1. Name it

– able to spell it

– probably should be related to what you are talking about (literal)

– Probably find it via search engine

2. Get the domain

– even if you set up a blog it is good to have the domain

– godaddy.com / networksolutions / cheap-domainregistration

3. Set up a website

– don’t have to but ??

– You definitely need to host your audio files

– Libsyn – made for podcast (5$)

– Podbean.com ($8 – unlimited audio)

– directory listing / stats / podcast page or website / RSS feeds

– Hostgator

– wordpress

-blubrry powerpress podcasting plugin

– seriously simple podcasting plugin

4. Record it

– There are apps for iphone

-bossjock studio

hokusai audio

mobile podcaster

irig recorder

raur

– hand held recorders

Zoom h4n ( $50 or so used / audio interface / good mic)

– Adobe Audition

premiere

garage band

audacity

sony vegas

5. Save and upload it

-mp3 / mp4

6. Get it syndicated

– itunes

– stitcher app

7. Share it

– twitter / facebook / google +

– Publish text along with it

8. Monetize it

– affiliates

– ads on website pages