So I’ve been annoyed today. I’m replacing a lot of functionality on a page that used to be pure C#.NET, but because of some redesign, it really needs to be mostly jQuery and Ajax now. (The postbacks reset things that I need to stay the same)
Anyway, it’s not been too bad so far, until I ran into a situation where jQuery needed the values of some hidden fields that are currently populated with .NET. And we all know of the annoying habit .NET has with renaming fields. There is the old standby of including the ClientID property to get the new name…
var strVar = $("#<%= HiddenFieldName.ClientID %>").val();
But that requires the script to be on that page, and I’m working from within my site’s jQuery .js file and…not how I WANTED it to work.
So I did a quick search, and wound up on this StackOverflow page that had just the most head-smacking simple solution, I couldn’t believe I hadn’t thought of it myself…wrap your hidden fields in a div.
<asp:HiddenField ID="HiddenFieldName" runat="server" />
Then, you can find your hidden fields by simply referencing:
So, I just ran across this really handy trick for creating connections strings to use in your programs on stackoverflow. When you are having issues getting your connection string correct, just save a new, blank TXT file to your computer. Then, change the extension to UDL. When you double click your new file, it will open a properties window that will give you all kinds of tools to help you build and test your connection string.
In this instance, I was trying to get an ODBC connection string created, and for some reason, I just wasn’t getting it right. So, when I tried this, I just clicked the “Build…” button and found my ODBC connection in the “Machine Data Source” tab on the next screen, entered the user id and password for that connection and boom. Worked. I was even able to test it using the “Test Connection” button. Surprisingly easy and effective trick…thanks, Internet! =)
Loving Google Auto-Awesome. Whip out your Android camera, take a series of shots that are fairly similar, make sure the photos are backed up to Google+ and hope.
Here is my daughter, Millie, rocking out on my Guitar Hero drums…
I’m doing a project at work that is unfortunately targeted mostly to IE8 browsers, so using HTML5 functionality for it is “iffy” at best.
However, there is one screen where I really wanted to mimic the HTML5 placeholder behavior (which is demonstrated in the iframe below, since stupid WordPress won’t let me write the tag in the HTML editor with the “placeholder” attribute…grrr!)
So anyway, to mimic this behavior, I needed to remove the default placeholder text when anyone clicked into the textbox. I also wanted to have my placeholder text grayed out, but then make it darker when the user starts typing. I also have the added joy of writing this all in ASP.NET, which requires a little extra work around. To the code!
As promised in my last post, here are 4 quick wins that LESS can easily get you, even if you are a n00b such as myself…
- Variables – It’s pretty easy to see how sweet variables in CSS can be. Declare a variable to hold your chosen font stack, or to set your color palette with easily reproduced names, rather than having to remember hex values. Also, if you do all this in one spot at the top of your stylesheet, you can easily locate these values and change them all at once, instead of CTRL-F’ing your way through your code. I’m actually fairly surprised it took an entirely new language to get this working, but LESS has finally given us the variables we’ve always wanted for CSS!
- Colors – While it’s true that colors are greatly helped by the ability to use variables, there is even more you can do with your color palette in LESS. My favorite thing is to use the darken() and lighten() functions to help me create my color palettes. I’ve always been a little helpless when it comes to picking degrees of color. Thank goodness it’s not necessary anymore! (By the way, lighten() and darken() are just the first color functions I’ve discovered…there are even more such as saturate() and fadein(), but these two were certainly the easiest to wrap MY head around.)
- Nested Rules – I wasn’t sure about this one when I first read about it in the LESS documentation, but let me assure you that this is great! It was almost love at first site when I began to use it. Place rules for specific classes or ID’s right within the curly braces of that element, and you can quickly see how easy it is to use. If you refer to the graphic I embedded on this article, you can see the new anchor color rules I added for the sidebar. Dividing things like this is almost second nature right from the start! (At least, for me it was!)
- Importing for organization - While I didn’t include this on the example illustration, the BONES template I use does an excellent job of showing how useful this can be. They’ve broken their screen size styles into separate files…any browser above 768px wide (for tablets and such) will get styles in the 768up.less file, while anything above 1030px wide will get styles in the 1030up.less file…then they just include each of those files in a style.less file, broken out with CSS media queries (which is how responsive design works. If none of this makes sense to you, don’t worry, it didn’t for me either before I discovered This is Responsive Design, which is just an amazing collection of everything you need to know about it. I would especially start with this A List Apart article, which is where I believe it all began)
Liam Lynch, who I could listen to all day, was being interviewed on the Nerdist and had this to say about quitting smoking:
“If I wrote my day in a diary, cigarettes were my punctuation..every comma and period. I got in my car, period. I walked outside, comma…so removing that out of my life was like removing all of the punctuation out of my day.”
It was one of those quotes that expressed something I had always felt but until he said it I would never have been able to express. It kind of blew me away.
In my first post, I outlined my “WordPress First” strategy, which is really nothing more than “let someone else do all the hard work for me so I can then dig into their code and see how they did it” strategy. Which I still say is brilliant.
Anyway, the majority of the code I’m interested in comes from the responsive, HTML5 Boilerplate based theme Bones. Having dug through some of the code, I figured the obvious first place to start was updating the stylesheets to give me a little more customized look before moving on to other things, and that’s what introduced me to LESS.
I recently got an email from an online education site advertising a new course covering LESS. Which immediately caught my attention because the upshot I got from it was “Wait…variables in my CSS?! How do I sign up for this?!!!” So imagine my joy upon discovering Bones ships with LESS already “installed”. It even had links in the documentation on how to set it up on my machine (because there is a little setup to get things working at first.) Seeing as how there are a couple of different ways to do it, I’ll let you decide for yourself which is best for your environment by simply pointing you here for a quick introduction on LESS and it’s similar cousin Sass, which is where I was directed. To be fair, most of the original articles I read comparing the two leaned more towards Sass, because it apparently is a bit more developed as a language and includes some conditional statements and loops that aren’t available in LESS. It also doesn’t have some of the support for inheriting styles. However, SASS requires Ruby to be installed on your machine…and I just stubbornly decided I didn’t want to do that. Especially when LESS has a simple program like WinLess to sit and watch your LESS files and compile them into CSS each time they are saved. So I went with LESS because I’m basically lazy and wanted to get to playing with the code. (really hope I don’t regret that decision down the road)
Now what WinLess does is simple. Once you install it, you point any .less files (or entire folders) that you would like monitored. Then, either you can tell WinLess where you would like the resulting CSS files to be saved, or you can simply have your LESS and CSS folders on the same level, and WinLess will save your CSS files into the CSS folder for you automatically. And then…you write you LESS code. Each time you save a LESS file, the equivalent css file will be written where you have told it to be saved. And…that’s it.
It will even warn you of syntax errors in your .less files. As far as ease of use goes…it’s really hard to complain.
Next post, I’ll discuss the most useful components of LESS that I’ve used so far.
For quite some time now, I have needed to do something with popmatic.com. I’ve had this domain name since mid-2002 (w00t! 10 years!), and I’ve had everything from a fully functioning web site to an empty 404 since then. To be honest, it’s been a long time since I had need of a website, other than just a spot online to try some goofy code or to post an occasional large file. But the time has come. While Facebook and Twitter can fill the void for posting adorable pictures of my kid or dumb videos of guys covering Celine Dion on a recorder, they just can’t give me the longform freedom of a blog. So here we go.
So now that we have the “why?” out of the way, I guess the next question is “how?”. I know a few things about this new and improved popmatic.com:
- I want it to have a blog
- I want it to have other stuff
So, as you can see, I have very high expectations. There are a few other rules that I want to live by, however, outside of the content requirements of the site:
- The site should be responsive
- The site should be written using HTML5
- There should be space on the site for me to practice both PHP and ASP.NET programming
With that in mind, I figured the first step was obvioius…dive right in and make a page using HTML5, from the bottom up. Oh, and create my first site ever using responsive design, can’t forget that. Hmm…but if I do that, should I write it in ASP.NET? What about PHP?
In the end, I realized it would be much, much easier to work BACKWARDS from my usual method of diving into something and flailing around until I figure things out. So, for this site, I’m going to take a “WordPress First” approach.