Find CSS Classes in HTML Using Regular Expressions
Cleaning up old CSS can be a messy chore. I’ve decided to finally make it just a little simpler. The editor I’m using is Visual Studio 2010. The primary issue I faced was finding where a given CSS class was being applied in the html.
Usually it’s as simple as doing a search for the class name. Let’s look at a couple of examples. Let’s say that the class name is “button” or “text”; not easy. “button” will find <button ..> and “text” will find <textarea …>, etc. Next I tried using “Match whole word” option in the “Find and Replace” dialog. This helped narrow down some results, but not enough and not for all search terms. Is there anything that’s bulletproof?
Regular expressions, I thought. VS has a Regular expression search option.
Press Ctrl-F to bring up the “Find and Replace” dialog. Click the “Use” checkbox and select “Regular expressions”
What might that look like? I’m not a regex expert by any means, but I read enough of a regex book to figure this out. If you’d like to better understand the regex code, I may later write that explanation. I don’t yet understand the usage of < and >.
Before I get into my process, let’s take a look at the final result so we know where we’re headed. The class we are looking for is “className”.
(class=['|"][a-zA-Z ^"']*<className>)|(\.className *[{|,])|(addClass\(['|"]className['|"]\))
Ok, how did I get to this? I started out with this…
class="className and class="[a-zA-Z ^"]*<className>"
The first is to catch the class name at the beginning of the class list; the second is for the end.
Next I wanted to combine these into a single statement and allow single quotes ( ‘ ) as well as double quotes ( “ ).
class=['|"][a-zA-Z ^"']*<className>
That’s better. It finds class names anywhere in the class list. What about in the CSS itself?
\.className *[{|,]
Combined looks like
(class=['|"][a-zA-Z ^"']*<className>)|(\.className *[{|,])
This may be enough for most people doing HTML and CSS. Next is adding references to jQuery dynamically adding the class. Again, allowing for usage of single or double quotes.
addClass\(['|"]className['|"]\)
All together it looks like this
(class=['|"][a-zA-Z ^"']*<className>)|(\.className *[{|,])|(addClass\(['|"]className['|"]\))
I will continue to update this until I get it just right and understand all of the code. As always, feel free to comment, add to what I wrote, or critique the code.
– Ryan D Kyle
Useful jQuery Websites
Here is a simple list of websites helpful for doing web development in jQuery. This list should grow over time.
- jQuery Homepage – Download jQuery
- jQuery API – Look up jQuery functions
- jQuery Documentation – Awesome
- Google hosted jQuery codebase – for fast client downloads and caching
- Featured jQuery questions on StackOverflow
Ryan D. Kyle | Digital Lifeboat
Use of Delegates in Unit Tests to Simplify Code in C# .NET
I’ve been writing a program in .NET that analyzes number sequences. I’ve been doing my best to follow TDD practices. In doing so, I’ve spend hours writing tests and little actual code yet.
In the process I ran into an issue of duplicate code in my tests. I found myself copy/pasting test code just to change the method that was called during that particular test. Hmm… that’s not good practice.All the methods had one of two method signatures. I thought to myself: “I’m sure there’s a better way of doing this”. And sure enough, after writing a quick example program of delegates, I discovered my solution. This post takes the form of a refactor rather than writing tests from scratch.
None of these steps should take long to perform since very little new code is being written. This process took me 15 minutes total. I will write example code for all this soon and post it.
Steps: Test, Identify, Declare, Rewrite one, Test, Rewrite, Test.
Step 1: Run all the existing tests you plan to modify and note their result.
Step 2: Identity the method signatures that are commonly being used.
Step 3: Declare delegates using the method signatures from step 1. I made them private fields in the test class.
Step 4: Factor out the test code into a separate method that takes arguments including the delegate.
Step 5: Rewrite the first test using the delegate, above the existing code. Comment out the old code instead of deleting it!
Step 6: Run the test! It’s very important to run that test to make sure that your new test code came to the same conclusion as your old test code. It doesn’t hurt to step through the test code briefly to make sure everything flows smoothly.
Step 7: Rewrite the rest of the tests that are very similar.
Step 8: Run all your rewritten tests. See step 5 for more detail.
Alright! You’ve greatly simplified your unit tests by using delegates. This is likely a niche technique, but quite useful if you have a need. If you have more innovative uses for delegates, write a blog post and then post a link to it in the comments.
Ryan D. Kyle | Concord Mfg LLC
Spoke at Portland Code Camp 2010
This post will be really short at first.
I recently spoke at Portland Code Camp 2010 on May 22nd.
I also spoke at Seattle Code Camp 2010 on April 18th.
Here is the link to my slide deck.
Thanks everyone for attending!
Startup Weekend Seattle 4 at Adobe – Day Three
I strolled in to the Adobe Conference Center around 11am Sunday morning. The edot team had already started on version two of the graphics for the website and were nearly complete when I arrived. A thank you to Donald for your tireless effort to deliver on your promise.
Most of my time on Sunday was spent setting up edot’s secondary websites, namely the blog, store, and feedback. The rest of my time was spent networking with the wonderful people at the event.
Presentations were amazing! I enjoyed every one of them. Some were exceptional. Many great applications came out of this weekend and I look forward to using a number of them.
edot’s presentation seemed to go well. We started our presentation at eighty something fans on our Facebook fan page. After the edot presentation we had 106 fans! Because we broke the 100 mark in one day, we gave away a free “I did a thing!” edot t-shirt to one lucky Facebook fan.
The big winner of the night was Digri.
Every Day One Thing won the Socially Responsible Award!
Overall, it was a great weekend. A BIG thanks to Clint and Mark for their work to setup such a wonderful event.
Every Day One Thing Launches!
Sunday night, two hours before Every Day One Thing presented at SWSEA, Every Day One Thing went live with the official launch of the website.
Check it out at www.EveryDayOneThing.com
While you’re there, take a look at the about us page, blog, and store, and please give generous amounts of feedback about everything on the feedback site. We love to hear what you think.
Ryan’s New Nickname
I am now called Tigger. Ask me.
Startup Weekend Seattle 4 at Adobe – Day Two
Today is all about work. I arrived at 8:30am after sleeping only 3 hours, if that. We got right to work on logo design, app design, feature discussions, etc. It was at about 9am that the masses showed up. Most people were fairly quiet early on in the day. Remember, most of us are geeks/programmers and are not morning people. My story is that I’m not a morning person except at a Startup Weekend!
My role on the team changed as the day went on, from a primary developer, to jack-of-all-trades for whatever needed to be done. I did everything from logo design to secondary website building (blog, store, feedback, etc) to product and team evangelism.
By about 6pm on Saturday our team had a functional prototype that we declared to be beta. At that point I started recruiting our first non-team users. By the end of the day we had somewhere between 15 and 20 users from other teams at the event.
Jesse stayed a bit later than everyone else and reworked the iPhone mobile css for the website. Great job Jesse!
The Every Day One Thing group:
Startup Weekend Seattle 4 at Adobe – Day One
Today, Friday, is the first day of Startup Weekend Seattle at Adobe. My approximation is that 120 people showed up on day one of this event here at Adobe in Fremont (Seattle WA).
The purpose of Startup Weekend is to foster entrepreneurship and new ideas. How it works is people pitch ideas on Friday night and the entire attendance votes on the ideas. After the top ideas are chosen, people choose the team the wish to join. Work starts at 9am on Saturday and ends around 6pm on Sunday (with or without sleep) when presentations are made.
This weekend there are plenty of great ideas. For a full list, check out the homepage for SW Seattle I will share a few of them that got me excited and want to be a part of. The name in (parentheses) is the person who pitched the idea.
- Everyday One Thing (Leah) – Track your impact on the environment when you make positive environmental choices. The idea is that small things add up and through this site/app you can see how.
- Lake Tagger (Cole) – Foursquare for boating. Information about gatherings, events, locations for the boating community.
- FourFriends (Ayush) – Foursquare app.
- SpeakUp (Kumaresh) – students ask anon Qs in classroom. More cool uses.
- Best thing to do (Jeff) – Real-time ratings for events to choose the best event/ happening / place /speaker to attend / visit / listen to. Could be used for conferences / bars / clubs / local events.
There were 40 total pitches tonight and I believe that it was narrowed down to about 12 ideas/teams. I will confirm this info in the morning. The Adobe Conference Center is so far a great space for this event. Apparently the first SW Seattle (this is the 4th) took place in the same location.
Looking forward to tomorrow.
Ryan D. Kyle | Concord Mfg LLC
My First Windows Phone 7 Application
If you’re reading this, you probably know that I’ve been silent for a while on this blog. But I’ve been busy designing applications and networking. I will write about those applications next week.
Windows Phone 7 (WP7) was announced at MIX10 on Monday. The keynote is roughly an hour and a half and most of it is worth watching. I watched the entire keynote on Monday night on my 46 inch LCD TV through my laptop. Quite an enjoyable night.
Monday night I downloaded the free development tools and installed the tools Tuesday morning. By 6pm I had written my first Windows Phone 7 application. BTW, on a 46 inch TV, the phone emulator is 16” x 8”.
Here’s what’s special about Windows Phone 7: The applications you write are Silverlight applications. My barrier to writing Windows Mobile 5 and 6 applications was the need to learn the SDK. With my existing Silverlight, Blend, and Design experience, I’m able to start writing WP7 applications immediately.
If you’re interested in jumping in and learning how to write a WP7 application, check out this blog post with links to Developer Training Kits.
If you’re wondering about my application, I used the first Presidents of the USA as sample data. Apparently all of the presidents had cell phones in the Seattle area… I also designed the buttons in the lower part of the detail page (on the right).
Find me on Twitter
RSS Feed
-
What are you saying?
