The Curly Quote Problem

HTML elements have attributes (properties) which provide additional information about the element. Attributes always appear inside the start tag for the HTML element. Not all HTML elements require attributes. However, the majority of self-closing elements, such as the <img> element must have certain attributes set or it will do nothing.

When writing attributes the attribute name appears followed by an equal sign then a pair of quotes. Inside the quotes is is the value for the attribute. The example below shows an image element with attributes set.

[html]

<img src="imgs/my-=logo.png" alt="My Logo" width="540" height="150">

[/html]

The Problem

Okay, so if you’ve ever played around with HTML you are probably familiar with the use of attributes. However, often times I find that students encounter a problem with their attributes. While the code looks right at first glance. The HTML element is closed, the attribute(s) are in the start tag and all values are inside quotes. Yet, for some reason these elements are not passing validation and the browser is not rendering the attributes.

What causes this?

As it turns out it’s the quotes themselves. When writing HTML everything has to be in plain text format, including the quotes. The quotes written as part of the attribute value must be straight quotes (sometimes called dumb quotes).

Most rich text editors, such as MS Word will use curly quotes (sometimes called smart quotes). These quotes are for decorative and while they look pretty they don’t work with HTML attributes.

Here is an example of the problem:

Curly Quote Problem
Curly Quote Problem

Note the difference between the curly quotes and the straight quotes.

What Causes This?

If you are typing your HTML inside an HTML text editor you should never encounter this issue. However, if you are copy and pasting from another source, more than likely you are copying the curly quotes.

Say for example your instructor has provided you an example for the HTML code as a MS Word or PDF file. If you simply copy and paste from that document you mostly likely will be copying curly quotes.

Another reason for curly quotes, is not using a standard HTML editor. If you used a rich text editor (like MS Word) to write your code you will always have curly quotes, even if you copy and paste it into a HTML editor later.

The Solution

Sadly there is no easy solution other than simply typing the quotes inside the HTML editor. If you have lots of curly quotes, this may take a while. In some cases it may even be better just to rewrite the code to ensure that you curly quotes have all been changed.

Some HTML editors include a Find and Replace feature that you might be able to use to find all curly quotes and replace them with straight ones.


Post Citations

HTL Attributes (1999-2015).  Retrieved 07 09, 2015, from W3 Schools: http://www.w3schools.com/html/html_attributes.asp

 

WordCamp KC 2012 – Main Event

Word Camp Kansas City (KC) 2012 main event took place Saturday, June 2. The event started out with muffins, yum. After a few housekeeping announcements it was time to head to our session of interest. The day and a 1/2 conference offered several of speaking sessions on a variety of WordPress topics. The speaking sessions was divided into three main tracks, designer, developer and publisher. Although each track may have been geared towards a specific group, it seemed everyone, inducing myself, would end up attending at least one session in each of the different tracks. And although I would consider myself a designer, turns out the topic I would be speaking on would fall under the publisher track, which makes sense given the topic, but more on that later. Below is a quick outline of the Word Camp KC 2012 schedule.


 

The first session of the day I planed on attending was “PSD to WordPress” presented by Kristin Falkner (@KristinCodesWP). The session was really good, she provided a sort of work flow on where to begin when moving from a mock-up to a custom theme. The question of using child themes or build from scratch came up, Kristin, said to use whatever was most comfortable for you, however she always worked from scratch to avoid confession and bloated code. She also commented how it can be helpful to create a static HTML version of the site, get it working, them break it apart for a WP theme. Interestingly this how I work, starting with a psd mockup then code from scratch, code HTML, them break up for WP theme. Some key tips I picked up from Kristin’s presentation was:

  • a hand custom field plugin called “
  • use page id’s instead of page names for certain theme styling this will prevent error if the client changes the page naming structure
  • Rockablepress is a good resource

Lastly if you want a copy of Kristin’s presentation you can view it at: PSD to WordPress prez

The next presentation I attended was “Sensational CSS: How to Show Off Your Super Sweet Skills!”, presented by Karen Arnold (@karenalma). Karen is a happiness engineer for WordPress. Her presentation was about how to create child themes by editing a custom CSS. The first the you’ll want to do is install the “safecss, this plugin comes at of an upgrade feature from WordPress.com. The “safecss” plugin allows one to override the mater theme’s CSS and creating a custom one. I always find this tricky, Karen explained that the browser extension Firebug allows one to easily find the CSS id or class names of the main theme in order to edit them. Personally, I still think this method can confuse me, because everyone has a different method of naming CSS id and classes, but if your only making simple changes, then a child them is probably quicker an easier. As for the “safecss” plugin, Karen, hinted to some new updates coming soon, including:

  • syntax highlighting
  • indentations

At the end of her presentation, Karen showed off some showcase sites from both WordPress and WordPress.com which took basic themes and customized by creating a custom theme.

At this point it was time for me to present, I could into detail about that, however I plan on making a separate post, which also includes a link to my power point. Overall, I would say the presentation went well and and I got some good feedback. I was a little nervous, since this my first speaking session outside of ones I’ve presented at on campus. I think it went well and hope to continue speaking at other events.

After my presentation, lunch was provided, this is where I began rewriting my notes into this post. The rest of this post I’ll post after the final round of presentations.

Okay, so after lunch, there was a group panel session that allowed attendees to ask questions related to WP and E-commerce, Security and Hosting. The panel included Pippin Williamson (@pippinsplugins) a plugin in developer, Tom Jenkins (@techguytom) a developer and Buddy Press expert, Calvin Robertson (@eveofcreativity) and Austin Gunter (@austingunter) from WP Engine. The MC was Josepha Haden (@JosephaHaden) who was also the one of the main event organizers. Josepha, started the panel session by introducing each of the panel members and there after would prompt questions, since the audience seemed a little sluggish after lunch to ask any of their own. A few prominent questions and answers are listed below:

  1. Favorite E-commerce plugin:
  2. Favorite Mobile Theme:
  3. Favorite Membership plugin:
  4. What to do if you get hacked?
    • Make sure you have been keeping regular updates of your site database (db)
    • Reinstall back db
    • Do a malware check at http://sucuri.net/
    • Change the wp login url with CLAU plugin
    • Lock down admin access using the Lock down WP Admin plugin
    • Don’t be afraid to check your root directory for any suspicious files that are not part of the main WP core, and delete them.
    • Also, note that deactivated plugins can cause vulnerability, don’t detective remove any none used plugins
  5. Helpful Tips:
    • Note that the WP core is more secure than ever before
    • To prevent security risks update WP install with each new update release
    • Some E-commerce plugin can cause errors for Internet Explore (IE), no real way around this, just educate your users to find a better browser (DOWN WITH IE)
    • There are some really good hosting / security management services like WP Engine
    • When looking for good plugins, WP Plugin star ratings are not reliable
    • Get involved in the WP community for help and other things, check out the WP forums

After the panel session, the afternoon speaking sessions began. I choose for my first afternoon session to attend the “Creation of Plug-in’s A-Z” presented by Jonathan Wondrusch (@bybloggers). Jonathon began his presentation by talking about his background, which turns out to be similar to mine. He started building websites in his teens, but would later go to college studying 3D computer Animation. After graduating he worked various jobs in animation, but continued to develop for the web. Currently he develops custom assets such as plugins for bloggers and other web designers. Jonathon’s talk was interesting because it focused on the workflow to creating WP plugins and how it compared to creating animations.

Animation workflow for animator:

  • Shot assignment
  • Research (consider poses, video self, use models)
  • Planning (sketching, thumbnails)
  • Blocking (key poses)
  • Refinishing (adding animation0
  • Polish (add details, eye blink, hair movement)

Web Developer workflow:

  • Creative Brief
  • Research ( what is already out there? what are others doing)
  • Planing (how will this be developed and used? What is the best method for making this?)
  • Alpha (pilot of site)
  • Beta (live pilot of site)
  • Official Launch

Jonathan points out that even though the workflow is the similar the amount of time for each is different. In animation there is a lot of money on the line, if the project fails so 30-40% of the time is spent in planning and research to make sure everything is just so before costly work is started. However, in the web development work (or I’d even say designer world) only 10% of time is spent on planning and research. Ultimately the little time given to these areas can cause problems down the road, like going over budget or not producing exactly what the client wanted. If more time is put into planning and research then such problems could be avoided and remember to keep your project simple.

Jonathan also provided some helpful tips for getting started with plugin development:

  • It’s really no harder than developing themes
  • Use the WP Codex
  • Take breaks from your projects, so you can look at it with fresh eyes
  • Follow the WP Plugin Best Practices
  • Great artist steel (don’t reinvent the wheel, see what’s been done and then improve upon it)
  • Stay organized
  • Comment Comment Comment in your CODE
  • Handel errors gracefully
  • Consider how it will work with different themes

The next session I attended was ” Responsive Design” presented by Justin Kopepasah (@kopepasah) and was probably the most helpful for me because it offered a lot of simple tips and practices in theme development that solved a lot of problems and makes you want to go “well duh, why didn’t I think of that”. Justin talk was about developing WP themes that respond instead of creating a separate mobile site. Creating a separate mobile site not only doubles a web developer/designers workload, but you are now controlling what type of viewer sees what content on your site, and more than likely a mobile user, will see less. This argument about not showing users content just because they are viewing from a mobile device is a hot and heavy one on the net, and I would agree as a web user, I hate it when I can’t see all the site options from my iPhone. Thus, Justin’s answer was to create a responsive design, that allowed for all users to see all content all time.

The key to developing a well designed responsive site is to use percentages, but at this point I was getting nervous because percentages scare me and how do I know what percent do I need, and what if I want to use a basic grid? Well, here comes the “well duh” moment, Justin explained that you start off by setting up a grid layout, 960 for example. Consider your sizes for your columns and such and then use the this magic formula:


target divided by content equals results
 

This formula makes perfect sense and why didn’t I think of it? Why did I never hear about it online when I searched responsive design? The way it works is say for example you are following a 960 grid and your content area is 540, you take 540/960 and the results is 0.5625, thus the percentage is 56.25%. The question did come up why not round, well it turns out each browser rounds slightly different, so using the entire percentage value (up to 12 decimal places) yields the best results. The same formula is used for type as well, consider your base (content) font size, then divide by your target size the end decimal value should be used in your CSS using EM units.

Justin’s other tips included:

  • Set the main container to use max-width of grid this allows to never go over the size of the original grid layout
  • Develop your media (images, video and etc.) at the maximum size, in the example case no larger than 960 pixels, then set the CSS to use max-width = 100%, this allows the browser to scale the image
  • Note that modern browser do a good job at scaling images
  • Delete any width and height settings in the image tag in the html
  • Discourage the use the !important rule in CSS, if your using this something else is wrong.
  • Use the media queries to override the main style, mainly for viewing on phones, otherwise the basic formula will work for all other devices.

The last session I attended was “Custom Theme Creation” presented by Chip Bennett (@chip_bennett), who happens to be on the WP theme review committee. In his presentation, Chip provided some helpful tips to consider when developing themes, based off what the theme review committee look for. The main key stressed during this session was to keep it simple, and to know what elements go into a theme and what should be a custom plugin. Chip went into a lot of dev talk here about what scripts should go where when developing themes, the main things to keep in mind are:

  • Don’t clutter up the header.php
  • Put all call backs in the functions.php
  • Create a filter in the functions.php for custom classes
  • Comment forms before action hooks
  • Don’t create theme templates, if they are used in your theme
  • Things to put in plugin and not theme:
    • Fave icons (this way it doesn’t change with themes)
    • Google Analytics
    • SEO meta tags
    • Core bundle scripts

And that was pretty much the end of the conference, after the last session the whole event just sort of dissolved. Attendees were asked to turn in their lanyard in return for their commemorative t-shirt. Overall, I learned a lot and met a lot of interesting people, however, I would have to say that the event could have been managed a little more professionally. The details of where the event would be and the schedule weren’t provided until late April. Also, the communication with the speakers about how it was all going to play out was limited. Then at the actual event, there was little guidance on what was where, it seemed everyone just kind of winged it. The opening keynotes, was more less some quick tips and ate into the first speaking sessions time, wasn’t on the schedule, and some didn’t even know it was going to take place. The same for the wrap up for the day, no real end details. Also, the speakers had no introductions and limited guidance on when to present. When it was time to present we simply when to our designated locations plugged in our computers, and waited at least 3-5 minutes after the session was to start to begin, without any introductions to the audience. There was always an event organizer around to help and ask questions, but it seemed kind of causal for a conference, but that may be my opinion, having organized events like this in the past, and having done them much differently. Overall though I think the event was worth going to and hope the organizers will continue to put on quality Word Camps in the future.

WordCamp KC 2012 – Hackthon

This weekend I am not only attending, but also speaking at Word Camp Kansas City (KC). Word Camp is a regionally hosted event for WordPress (WP) users. The event kicked off last night (Friday, June 1) with a kick off party and hackathon.

It was the first time I ever participated in a hackathon, so it was kind of interesting. The hackathon basically is a collaborative group of designers, developers and publishers who work within a few hours to help re-design, develop and publish a website for a non-profit organization, in this case our platform had to be WordPress, given it wasps a Word Camp event. The organization that Word Camp KC would be building a site for was Maison De Naissance , which is a birthing home in Haiti. They wanted a more organized site, which would highlight their three main goals of providing access, quality and resources.

I got to participate at the designer’s table, where developed a list of possible free themes for the site and organized a folder of possible images to use for the site. The images were selected from hundreds of files in which the client had provided. We stuck with a free theme, because the goal was to use as much open source content available and only tweak as needed.Once the designers made our suggestions we passed it on to the developer group to work on, while the publishers would work simultaneously  to place all the content on the site. While working at the designer table it was interesting to hear for the others that most of them, like myself, typically do freelance projects, where they take on all roles of designer, developer and publisher, so it was kind of werid to just pick out pictures and themes and let the other groups take it from there.

The event ran pretty smoothly and left me eager for the next mornings main event. Sadly, I had to leave after this, so I didn’t get to see the end results, but I hear it turned out very well.