All posts in Front-end Programming Design

Musician Freelancer WordPress Theme Examples

I have friends. We all have friends. Friends are good. When my musician friends come calling or start complaining about their websites, I like to lend a hand. I find making musician websites to be really fun. Cool photos. New design challenges. Music playlists.

Two such friends in San Francisco, from two very different musical genres, but about the same age, needed website upgrades. It is the usual story in a way. Both had ten year old sites that had these really “cool” beveled buttons and animated gifs flying across the screen. The colors were all “web safe” (dear lord, I am glad we are through with that) and of course you needed a magnify glass to read anything as the type was 11 point throughout. Forget about viewing these old sites on a phone.

Using the exact same theme, Musician Freelancer created by yours truly, I made these two sites with the existing content from the old sites.

http://www.garyflores.com/
http://www.countryroundupsf.com/


garyflores


jeannie and chuck


The theme is the Musician Freelance theme available on github.

Now I can always know where these great musician are playing around town. Do check out these great posters by Mississippi Mike.

Emmet and a Way Better Way to Write HTML

http://emmet.io/

About a year ago I retooled. It was time to get my work environment set up to make writing applications and websites as efficiently as possible. I had a lot of home-brewed solutions to repetitive tasks (most were server-side snippits) but I knew that there was surely some great tools out there. After trying out a few IDEs, Aptana, SublimeText and a few others I chose PhpoStorm by JetBrains. This is a powerful tool for all kinds of open source php development. It pairs very well with Git and WordPress. The only thing I do not like about it so far is the fact that you cannot sort by the modified date in the project window. Maybe someone other knows this one?

PhpStorm has Emmet integrated as a plugin. Emmet makes it so you can write dynamic snippits. It is inspired by CSS selectors. If I type ul>li*8 and hit the tab button I get

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>

Is that cool or what!

So let me do a little bootstrap set up

div.container>div.row>div.col-md-3*4

which makes

<div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </p></div> </div> <p>

And a table for Bootstrap that is 6 rows with 10 columns…

table.table>tr*6>td*10

<br /> <table class="table"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <p>

That would be a big “BAAAAAAAM!” Actually, it looks better than above as the results are properly tabbed. No longer do you type some codea and cut and paste code fragments. Fun stuff!

NODE.JS, EXPRESS, JADE, AND MONGODB Tutorial Part 3

Actually, that’s not a bad exercise: you should try to add updating user info to this page and see if you can get it working. You’ll need to edit /views/index.jade, /routes/users.js, /app.js, and /public/javascripts/global.js just like for adding and deleting.
Christopher Buecheler

http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb/

In the GitHub repo below is this last exercise completed. Of course it is best to figure out how to do this on your own but if you get stuck, this is how I did it. So this is the last step of Christopher Buecheler’s outstanding tutorial. Here I complete the lesson with the last part of the CRUD operation with the UPDATE step. While this tutorial does not program in a very modular, best practices way, it does explain the basics really well.
Ok. Now back to all the legacy stuff and debugging IE8.

node

On my GitHub here
https://github.com/pelicanpaul/nodejs-expressjs-mongodb-tutorial

Just a Great NODE.JS, EXPRESS, JADE, AND MONGODB Tutorial

I have been really enjoying, in between jobs, reading and studying all the new stuff. AngularJS, MongoDB. It can be frustrating at times as the writing in these tutorials is so dry and dull it makes the California drought look like a flood. The tutorial work by Christopher Buecheler is outstanding. Clear and bullet-proof explanations that keep you moving along. I had already gotten pretty far with node but what a great tutorial. There is also a part two which is also very good.

http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/

OK! So now we’ve got our router routing us to our view, which we are viewing. Let’s do some modeling. I’ll give you a moment if you need to fix your hair or makeup.
Christopher Buecheler

Hilarious!

Writing with a sense of humour is often in short supply in tech tutorials. The combination of really great steps with a little wit goes a long way.

New WordPress Theme “Music Freelancer”

Had a great time building this theme for my son Kai. It is a WordPress theme for Musicians. Basic but effective for the playing and teaching musician. Utilizes Bootstrap 3.2 & fontawesome an upgraded audio playlist feature with images. Uses “Featured Images” as the fullscreen background to pages. Ongoing project in my desire to master custom WordPress theme development.

kai-site



See: kailyons.com
GitHub: https://github.com/pelicanpaul/wp-musicfreelancer

This is a free theme.

SEO and Responsive, Mobile-Friendly Designs

I have always been someone who thinks beyond the task at hand and to the larger impact of decisions and the things created. Recently, I did a little project for my buddy Pierre who works at a local electronic repair shop – www.LandMelectronics.net. This little website has been a great test environment for me. This time the job took about a day. This morning, with a fresh browser I observed the effects of the website changes had on SEO.


landmthumb


Their old site was a clunky thing that I did in 2006 so they really needed an upgrade. This time I choose a WordPress, Bootstap 3.0 enabled theme that of course is responsive (meaning mobile-friendly). I implemented Google maps, made sure they where set up with SEO friends urls, description META tags all good, titles just right, etc. I then moved the site to my account on BlueHost which simply ROCKS!

Before the site change, I noticed that L&M Electronics had fallen off the search results of Google. A week after the site launched, they now come up on the first page for all kinds of search terms – ‘san francisco receiver repair’, ‘san Francisco autio repair’, ‘stereo repair sf.’ As well as simply “L and M Electronics.”

While Google states it does not take into account responsive designs into SEO and that it does not hurt.

http://www.webpronews.com/matt-cutts-talks-responsive-design-impact-on-seo-2013-11#disqus_thread

From my anecdotal trial, I have a feeling that Google prefers responsive design. Google is in the business of serving up quality search results. It makes them look good when your website looks good on all devices. Even though the content on this website was exactly the same, it helps to make a new website. Google likes current information and a new website gives them the impression that the site is being maintained.

If you need to upgrade your small business website, just call or email. Here to help out.

Using LESS with WordPress Twenty Fourteen Theme and a Child Theme

I have been diving into CSS preprocessors this last month. Even though WordPress has adopted SASS as the preprocessor for the admin (see: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor), I used LESS in a little project to manage the child theme of my Twenty Fourteen blog website. The concept of child themes – http://codex.wordpress.org/Child_Themes is best practices.

For my project I needed to control the background colors for the menus. By default, these menus  they green. In order to change these you really have to dig through many instances of this green color(s) in the CSS. I found a plugin called Fourteen Colors http://celloexpressions.com/plugins/fourteen-colors/. This plugin overwrites the CSS with an internal style sheet. This style sheet is generated from the Fourteen Colors plugin settings in the admin. If you simply want to change the colors of your Twenty Fourteen theme, this is your best option. This post is really about exploring WordPress development with .less.

Default Theme Colors

 green

LESS Generated Colors

blue

01

The concept was to use .less and have it generate my child theme style.css file which would change the green menu to blue. I already had node.js installed. I was using an IDE called WebStorm which with the feature called File Watcher that can prepossess the css. I chose to put all the .less files in a folder call src with the path being
s\wp-content\themes\twentyfourteen-child\src (see above). This way the dependencies would all be in one place.

02

And presto it works. You have a LESS preprocessor dev environment and everything is production ready as WordPress will always just look at the compiled .css file. This can be extended and have the .less files incorporate other features of the theme.

For the final results see http://www.pelicancafe.net a blog site where I have some fun and write about San Francisco, Music and other topics. The github link  is https://github.com/pelicanpaul/twentyfourteen-childless. Of course, at the pelicancafe.net site you are simply seeing the compled css file.

The Semantics of HTML and Web Sites – Why Markup Matters

Creating websites for 13 years now, I have seen the evolution of websites from clunky table based layouts that were semantically just a bunch of noise to the current HTML5, semantically charged creations. Of course the leaders in Web Standards and semantic HTML have been people like Jeffery Zeldman and his disciples, great CSS exercise sites like Zen Garden and also the blog sites and open source world, probably most importantly WordPress. If you want to make a web site theme that then someone else can take and run with, the semantics of the markup have to be solid.

I am amazed at how understanding semantics in both web design and programming gets overlooked. I still know many web designers who do not understand what a heading tag is. They are often so lost in the fonts and backgrounds and images that they forget what is going on in the hierarchy of information. I have witnessed decent designers never realize that <h1>What a Killer Page</h1> is what is essential. This is not only for SEO but also for making the web site accessible on a variety of platforms. I still know amazing developers who can talk your ear off about Object Oriented Design Patterns who when they get to the HTML will code a heading tag as <div class=”main-header”> What a Killer Page</div>. I am not sure if this is because they just read stuff too quickly and never really read chapter one and think they know everything, or maybe they just don’t get it. Struggling with the margins of a <p> tag does not mean you should then use a few <br /> tags. Strange.

In HTML, if you take away things like the required html, body and title tags, the important semantic markup is pretty simple.

  • Headers h1,h2,h3,h4,h5
  • Paragraphs <p></p>
  • Lists <ul><li></li></ul>
  • Tables <table><tr><th></th></tr><tr><td></td></tr></table> (for tabular data)

That is really it! Markup such as divs and spans are not semantic. They are presentational! Putting things like navigational lists into divs is just wrong. The sooner one learns this basic distinction, the faster you will write cleaner, easier to maintain code.

In HTML5 the list of semantic markup grows longer. I will not enumerate them here but to me one of the main objectives of HTML5 is this semantic markup. <section></section>, <article><article>, <video></video>.

So there you have it. Just think. If you are just starting to write HTML, you got to avoid the 7 year era of table based layouts and nested tables seven layers deep just to keep you debugging for and hour all for the crappy browsers of the day.

originally posted: December 27, 2012