Paprika to get organized, Microdata, and ranting

July 15th, 2010

Get organized

Paprika logo Let’s start with Paprika. I know in my post “Creating your own web dev tool kit – Part III: Apps that help” I told you about todotweet.com. It is still a great little twitter app, but I have found that Paprika suits me better. It is just another little note taker type thing that lets me create projects with to do lists in them.

Paprika screenshot

As you can see from this little screen I have a project name of The Web Machine, an h1 tag that is the Things to do…, 3 tags (Design, Coding, and Articles), and something to do under each. Paprika is so easy to use, and along with the base amount of features that I want, I’ve made it my new to do list app. You do have to create an account, which is also stupid easy (like 4 fields to enter), after which they give you your own url. Login, and you are off.

Read the rest of this entry »

Tags: ,
Posted in Cool Links, Web Development | 1 Comment »

Real example of jQuery’s replaceWith()…and Ext’s method

July 14th, 2010

What the hell is Ext?

That is what you are asking yourself, right? It’s another javacsript library, which I have gotten into many an argument over why one would use it over another library. Personally, I find it to be more like writing straight javacsript (which I suck at). My point isn’t to get you to use it, because I don’t care. I love jQuery, and that is that. I’ll show you the difference in this post/article between how jQuery would do something versus how Ext would do it, because I HAD to do it in Ext. On to what I had to accomplish.

The Problem

Here is the set up: I have a hard-coded div with two links in it, I am not allowed to touch the actual HTML page itself (meaning the myPage.html), but I do have to change the href of the first link, and the text that displays in it.

For you jQuery newbies, I’m going to be using first() and replaceWith() to do this, and you will be amazed by the simplicity of it. Because I am not all that familiar with Ext Core javascript library, I actually had to write this in jQuery first and then translate it over. This though is much easier than when I tried doing that with my slider.

Read the rest of this entry »

Tags: ,
Posted in Javascript | No Comments »

How to control CSS3 Radial Gradients

July 9th, 2010

Finally, something not so outrageous using CSS3 that we can all understand

I got a link through twitter about a raindrop done using CSS (don’t bother looking at this in Safari or Chrome, because he write the additional CSS for that). Normally this is the kind of thing that I will look at and say cool, but waste of time. This one caught my eye though because it is actually pretty simple. I’m not going to recreate the damn thing, but all it is, is a bunch of divs and a surprisingly small amount of CSS. I was actually impressed with this one, and I think it could have been done with just an ul and list items. Now, I would still use an image in a real life situation, but I picked this piece because I did not really know how to use the new gradients. This guy obviously does.

Learnin’

That led me to do some small bit of research and tests, and found it is not all that hard, just slightly confusing to get a grasp of what the numbers do. On top of that, the CSS Safari uses to do radial gradients is pretty different.

Some things to note about Safari while doing my demo. I could not get it to recognize percentages for the values in the border radius, so I had to do pixels. I’m not sure it can or not, and I didn’t find anything about it. Safari 5 does not need -webkit- in front of border-radius – it will still use it, so I would include it anyway to support the older versions.

If you look at the demo, you can see a div with a basic radial gradient, with rounded corners set to 100% in FF, and 300px in Safari. This should appear as a circle with red in the middle, then orange fading out to yellow. The second, is just to show you something easy to do with it. It is a png with the word GRADIENT cut out of it, and a drop shadow layer style put on. It then has a div behind it with a radial gradient, which if you ever wanted to change the colors, you wouldn’t have to use photoshop to do it. Just change the CSS!

Click here for demo.

Read the rest of this entry »

Tags:
Posted in CSS | 1 Comment »

My journey so far in writing a web development blog – tips for newbies

July 8th, 2010

What is your reason for starting one?

I started this blog, at least seriously, back in January of this year. Yes, I wrote posts before that, but I was in the middle of redesigning my site, then designing this one, and who knows what else came up. Really though, it all began at the beginning of this year. If you are thinking of starting one of your own, let me tell you first hand, it is hard as hell. The best piece of advice I can give you is, you better have a reason that is important to you, because if you don’t, you will lose interest and the amount of posts you are doing dwindles to nothing.

So what is mine? Glad you asked, or this post would go nowhere. I am a senior web developer where I am employed, and I usually have to do a lot of helping with others that are not as advanced in web development yet. A while back we decided to have a sort of CSS class, where the the senior web devs showed the others how to do basic things, why things acted the way they did in certain browsers, and just basically build a page from scratch. One of the guys I was teaching, was at a lower level than normal, but he was extremely willing to learn, which made me want to show him more. He seemed truly interested in what I had to show. It was then that I realized I really like teaching people things and helping them through the problems they are having in development. What is even more awesome, is I am not the only one who noticed that this particular person got a lot better at what he was doing. I feel a certain kind of pride in that.

That was when I really started writing seriously here at what I call The Web Machine. I started out in print design, and made my way into development because I was getting burned out in print. Everything I have learned is because I read a LOT, have done and still do an insane amount of tutorials, and push my self to learn as much as I can. Every freakin’ day. Why is that little bit important? Because I didn’t have anyone telling me or pointing out how to do things. I had to learn it alone, and by doing it this way, I found out how to do things the right way…the very hard way. It is all of the crap that I had to do, that I want others to see and learn from quickly. A passing along knowledge that was gained through a lot of hard work and sweat. To me, that is the fun in it. The bonus is, I have learned so much more because I blog about it, which adds a second piece to my motivation in doing so.

What is YOUR reason?

Read the rest of this entry »

Tags:
Posted in Blogging, Web Development | No Comments »

Taking LESS.js for a spin, and how does it compare to Sass 3

July 7th, 2010

What the hell is LESS?

LESS logoIf you have kept up with me, then hopefully you read my post on Sass 3. If not, well hopefully you are not out of the loop and have at least heard of it. This post is about LESS and LESS.js (which you can read about here). LESS used to be a Ruby Gem install, not sure what that means exactly other than it is a pain the ass to install if you are not familiar with the command line.

There is a brilliant new way to actually use LESS, and that is to simply use javascript. Nothing to install, just include this line:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

You will also need a link to a LESS file, which will look something like this:

<link rel="stylesheet/less" href="css/test.less" type="text/css" />

A simple text file with a .less extension.

So what exactly is LESS? I would define it as a simplified and easier to use version of Sass. It incorporates the cool parts of Sass, such as variables, mixins and nested rules. Operations are also included, but I haven’t delved too deep into it yet. But a small test was all it took to see what I liked and disliked. First, lets take a look at the VERY basic page I did.

Click here to see the demo.

Read the rest of this entry »

Tags: , ,
Posted in CSS, Javascript, Web Development | 2 Comments »

  1. Pages:
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. 6
  9. 7
  10. 8
  11. 9
  12. ...
  13. 25