Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Brenelz Web Solutions is proud to giveaway some NERD apparel as we begin to enter the holiday season. Are you proud of your “NERD” status? Well with the T-Shirts I am giving away you can make sure everyone knows that you love being a gamer, web designer, TV junkie, or anything else NERD related.
I will be giving away “2 SNES Black” Nerd Machine shirts
There are a couple things you must do in order to be eligible to win the T-Shirts.
The 2 winners will be picked on Nov. 30 randomly.
Do you ever notice that your border-radius corners just don’t look as good in Safari as they do with Firefox? I certainly did with one of my latest projects. It is especially bad when it falls onto a dark background.
Courtesy of: Sneak – http://tumble.sneak.co.nzThe fix is actually real simple and only involves adding one extra line of code to your selector.
-webkit-background-clip: padding-box;
See the difference? Make sure to add this line of CSS every time you use border-radius and you will have sharp looking corners every time!
In a project I have been working on for the last week or so I came across a case where I wanted to have placeholder text in an input field.
Placeholder text in an input field is an easy way to tell the user what to input, but also not clutter up the page. For example, this is really handy for a Username / Password login section in your header.
Syntax highlighting can make a huge difference when it comes to showing code snippets. We have all seen it, but how many of us have actually stopped to consider how it works.
There are a handful of good options that I am aware of. Some are easier to use and others offer additional features, such as copy, show code, etc. All projects I will mention are JavaScript based. There should be very few issues with cross-compatibility.
One of the most popular ones, and the one I am going to highlight (no pun intended) is called SyntaxHighlighter.
SyntaxHighlighter includes support for 25 different programming languages (referred to as brushes in this project) with additional brushes available for download. One thing I really like about SyntaxHighlighter is that each brush is an individual JavaScript file.
To use; download the latest version and upload it to a directory on your server. Include the core JavaScript and CSS file as well as only the brush(s) needed. This limits the size of the JavaScript files, which would increase load time. The only downside here is that if multiple languages are needed on a single page, we will have to call each brush file individually. This will increase the number of HTTP requests, but the files’ sizes are all small, so there will be a negligible reduction in load time for the multiple requests.
We then call the script using "SyntaxHighlighter.all()."
<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/> <script type="text/javascript">SyntaxHighlighter.all();</script>
After the core and brush files are called, we simply wrap our code in a <pre /> tag with a class set stating which brush the following code is to use.
<pre class="brush: html;">
<html>
<head>
<title>Example of the Greatest Code Ever</title>
...
</pre>
There are a few variations of Syntax Highlighter as a WordPress plugin. This simplifies installation a lot. Make sure to pay attention to the documentation of the version you install. Some follow the project standard of wrapping your code with the <pre /> tags where others use [sourcecode language=”php”] [/sourcecode].
That is pretty much it. If the target site is using a template, why not just include the files in the header, or, create a separate file and call it only when needed.
<?php
include "header.php";
include "SyntaxHilighter.php"';
....
?>
Here are two other projects that could be worth checking out:
This post is not entirely web-related but this blog is just as much about business, as web development. Any web developer has to go through the stage of applying for jobs.
I have applied for quite a few web developer jobs in my day so here are some tips I have come up with.
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!