After months of procrastination and delays, I’m proud to officially release Kenny Login – a fully responsive HTML5 theme for your WordPress Login page. Version 1.0.0 is available now as a free WordPress plugin. Simply install the plugin and activate it through your admin panel. Blam! Kenny Loggins all up in your login page! Click here to get the lowdown.
Log in to the Danger Zone!
I use IntelliJ IDEA for all of my web development work – it’s simply the best web IDE on the market, but I ran into a weird problem with the built-in LESS compiler recently. I cloned a project from the Github repo and set it up in IntelliJ. Everything was going well until I tried to compile the LESS files. I was getting weird errors whenever I tried to compile any LESS files in the project. Errors like this:
LESS CSS Compiler Error
mobile.less: Name Error: variable @screen-sm-max is undefined (line 2, column 20) near @media (max-width: @screen-sm-max) {
(This is weird because this variable is defined correctly)
or this:
LESS CSS Compiler Error
styles.less: org.mozilla.javascript.UniqueTag@15923b2d: NOT_FOUND Error: java.io.IOException: No such file file:/Users/admin/Desktop/_CLIENTS/Website%20build/BUILD/GIT/_WEB/styles/bootstrap/bootstrap.less (line -1, column -1)
(This is weird because it’s failing to compile Bootstrap, which I know is fine)
There was obviously something wrong with my setup because it worked fine for other developers. I was getting these errors when I used the “Compile to CSS” function or when I set up a LESS file watcher. I upgraded my LESS version. I spent a lot of time trying a lot of different things until I stumbled across this obscure thread.
That’s right. You can’t have any whitespace in the file path. My mistake was that the project was located in this folder:
Desktop/_CLIENTS/Website build/BUILD/GIT
Notice the space in “Website build.” I changed to folder name to “Website_build” and it worked. Note that manually adding “%20” into the file watcher path doesn’t work – you absolutely can NOT have any spaces in the path. I was kind of shocked at this problem. I thought we had gotten over this issue 20 years ago. Anyway, I’ve learned my lesson. No more folders with whitespace in the names. If this saves someone else a little time, then my wasted time will be worth something.
If you are doing front-end web development, you likely use Firebug. It’s a Firefox browser extension that provides all the basic tools you need to debug a website. Development tools in all of the modern browsers are based on the gold standard set by Firebug.
One of the most common uses of Firebug is to make changes to your CSS in real time. You can experiment with different styles until your layout looks right, then simply cut and paste everything into your stylesheet.
This works great for desktop browsers, but mobile browsers don’t have development tools. If you want to debug your mobile layout, you need another browser extension that allows you to switch the user agent. There are a number of good ones out there. I’m currently using User Agent RG for Firefox. Once this extension is installed, you can change the user agent string by going to the “Tools” menu and choosing “User Agent.” Simply choose a mobile device and you can get an idea of what your site looks like on a mobile device.
It’s important to understand what the user agent switcher does (and doesn’t do). What it does is tell the browser the type of device that you are using to browse the web. The Firefox plugin basically lies and says “I am using an iPhone” (or whatever). If you have a mobile version of the website, that version will be displayed.
What it does NOT do is make Firefox act like Mobile Safari, or any other browser. If there are browser-specific layout issues, you will not be able to see them with the user agent switcher. Luckily, mobile device browsers are fairly standards-compliant, so very few CSS issues are browser-related. Browser-specific issues like HTML5 video issues (*cough* Mobile Safari *cough*) still need to be debugged with that browser.
The other thing that user agent switching doesn’t do is resize your site to mobile browser dimensions. To get an accurate sense of how your site looks on a phone or tablet, you will probably need set a body width in your CSS:
body {
width: 320px; /*older iphone width*/
}
This way, you can lock it to the dimensions of the device you want to test and tweak the CSS with Firebug to fix any layout problems.
This has been the quickest and easiest way I have found to fix mobile-specific layout issues. Good luck!
I had an interesting problem today at work – I needed to get the src attribute of an <img> tag that was not in the DOM. I had a string containing HTML that was not actually part of the page, but I needed to parse it for information. I was not able to change the data, but I had access to an object with a property called “innerHTML” which contained the following string:
<img src="img/myimage.png" width="1700" height="500" /> <p>this is some text</p>
The easy (but ugly) way to solve this problem is to simply write the string into a hidden <div> on your HTML page, then extract what you need with jQuery. I really didn’t want to do this because I was going to be writing several large images into the page, and it just seems like a really lame way to handle the problem.
With a bit of help from this Stack Overflow thread, I found a better way to handle it. Simply cast your string into a jQuery object and you can use regular jQuery methods on it. here’s an example of how it works:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script type="text/javascript">
//create a sample object with a property containing HTML text:
var obj = {
mystring: '<img src="img/myimage.png" width="1700" height="500"/>' +
'<p>this is some text</p>'
}
$(document).ready(function() {
//cast the string into jquery...
//then use jquery's filter() function to isolate the image tag:
var img_tag = $(obj.mystring).filter('img')[0];
//to get the src attribute, we cast the above result into jquery again:
var img_src = $(img_tag).attr('src');
console.log(img_src); //ta da!!
});
</script>
This doesn’t come up very often, but it’s a good trick to have up your sleeve.
Powered by WordPress & Theme by Anders Norén