Grow your CSS skills. Land your dream job.

The Abstraction Point

Published by Chris Coyier

Reader Joe Bob sent me a link to IxEdit to ask what I thought. I hadn't heard of it, so I checked it out. They have a six minute video you can watch which explains it pretty well. In a nutshell, it's a GUI editor for creating interactive stuff on websites. Click an element, tell it how you want it to behave. Think of it like CSS Edit for jQuery (it uses jQuery and jQuery UI to do it's thing).

My thoughts: Wow, that's extremely cool. But I'd probably never use it.

The fact that I'd never use it has nothing to do with the quality of the product. It has to do with the fact that it is beyond my Abstraction Point. If I'm going to write some page interactions, like a tabbed area or a click-this-slide-down, I'd rather write it myself in jQuery. But that's kind of absurd isn't it? jQuery in itself is an abstraction of JavaScript. When I write $("#thingy").slideDown(); there is lots of stuff going on that I barely understand. I'm far from "writing it from scratch".

Taking it further, that code is ultimately served up from a web server. I certainly didn't write that code. That web server runs on an operating system. The operating system runs on lower level code. There is a lot of steps between that circuit board and my slideDown animation. Everybody stops along the chain somewhere.

"That's for newbies, not real developers."

"I write my code from scratch!"

"I like to know what my code is doing."

I think these are flawed statements. When we say or think these things, we are really saying "This is above my abstraction point."

Your abstraction point is the level of abstraction you feel most comfortable in getting stuff done from day to day. It might be using design view in Dreamweaver and adding interactions with IxEdit. It might be writing in assembly language. Neither one is "better" than the other. It's just where your current comfort level is, and more importantly, using the tools you need to to get the task done with reasonable speed.

Comments

  1. WC
    Permalink to comment#

    And when working in a team, there’s a more important point:

    The abstraction point that the entire team is good with.

    Sometimes this is dictated to the team, and sometimes it’s just chosen by the members of the team… And sometimes it’s not even explicitly chosen.

  2. Permalink to comment#

    I feel the same way about a lot of things. I’s also about giving away control. Using Dreamweavers design view I always have the feeling it’s deciding a lot of things on it’s own. Things a don’t like, so back to code view.

    But I love things like jQuery which seem to give you more control in a controllable way. Even though I can’t specify the exact motion of the slideDown() method, I can control a lot of other things. Things which would be a pain to create if you did in in normal javascript.

    But back to Dreamweaver: Typing html and CSS yourself is not a pain, and sometimes it’s faster to type it then toggle 30 radiobutton, dropdowns and color pickers.

  3. I agree with Paul. It’s usually a lot easier to write the code yourself than use a GUI for most things. And using a GUI app for jQuery effects is a bit too much abstraction in my opinion. But the app does sound rather impressive.

  4. sage
    Permalink to comment#

    I feel the same about that tool, and I don’t like those three sentences. But I don’t analyse this in term of “Abstraction point”.

    I think IxEdit is easier when you don’t know how to use jQuery. Indeed, if you don’t know jQuery API, it’s pretty not “intuitive” to “guess” that you should wirte “$(“#thingy”).slideDown();” (your example).

    While on the other hand when you know how to use jQuery, “$(“#thingy”).slideDown();” is just quicker because you have much less things to do.

    So there is NOT an easy one and an hard one solution, it just depend on the context. I would recommand for someone that will spend his next 5 years to make javascript to learn jQuery, while I would recommend someone would just want to write occasionnally some quick javascript code to use IxEdit.

    Note that it’s the SAME question than “command line or GUI”. When you KNOW the command line set, command is usually faster, but when you don’t know, GUI is usually easier because it is (at least should be) intuitive.

    Ho, that’s not even a computer only problem !

    Imagine a friend of a friend that live in Poland and only speak polish will spend an afternoon with you. You’ll probably not learn polish just for that. It will probably be easier to just draw things on a piece of paper or with your hand in the air, to communicate with him. But if you intend to spend the next 10 years in Poland, learning Polish will probably be a better solution.

    • sage
      Permalink to comment#

      Ho, and I forgot to mention that THE BIG MISTAKE with that kind of questions was to consider that the “command line” of DOS or the “GUI” of early MAC/OS were concurrent paradigm you need to choose ! Having both is the right solution, you can do “what you don’t know” with GUI and do “what you know” with command line.

  5. Finally a term to explain for this sort of, well abstraction. I see many people using tools to get stuff done, which I have nothing wrong with but I’d never use them myself. When something goes to the point of you not writing a single line of code, I simply cannot let that control steer away from me.

    I do use jQuery but that’s because learning complex JavaScript would take way too long. Now I don’t use CSS frameworks though, because I’d consider myself pretty pro at writing my own css and have my own personal framework.

    Thanks for the article Chris.

  6. That point will get higher and higher as time passes by.

    At some point in future all someone will have to do is type inside of a text box what kind of a website and what features he wants, hit the the submit button and in few miliseconds voila, it made the pefect design instead of a designer, wrote an up to date code instead of a coder, and put it on the UNIVERSE wide web.

    • I don’t think it will move forever higher. As much as it may become possible to write a program that gives you perfect code every time, there will still be people who will set their “abstraction point” lower.

      Some people just like writing their own code.

  7. Yeah, the “real programmers use” and “real developers use” arguments get brought up a lot, but you’re right in that they’re using pre-built code (for OSes, servers, even the languages they use are built through source code they didn’t write). There’s just a certain level of control people like to have with what they’re doing, and there’s probably also a feeling of pride in knowing that they can do it without too much assistance.

    The IxEdit tool looks pretty useful, but my concern would be with code efficiency. With most WYSIWYG editors, the code they create is hardly efficient, and sometimes just not reliable or maintainable.

    I understand that WYSIWYG tools exist because there are a lot of people who make websites, but not a lot of people who understand how to right clean, maintainable code on their own. I think the WYSIWYG tools are a poor solution to the real problem of people not knowing how to build web sites and web applications using good coding techniques. They’re often a crutch that ultimately inhibits learning, and that’s not good for anyone.

  8. IxEdit is pretty impressive but is a little complex to get going. Something like http://css3please.com/ would be cooler, where you can just edit in the browswer and cut and paste.

  9. Permalink to comment#

    I like your style, Chris. Very good points.

  10. aki
    Permalink to comment#

    certainly a good point Chris.

  11. Permalink to comment#

    The best use for this tool is to simplify it, then give it to clients.

  12. I actually saw this about a half a year ago…strange that it is still in Public Beta mode. I would have thought they would be charging for this by now.

    When I first saw it, I didn’t know jQuery or javascript at all, and I thought “Wow, I can do stuff without coding it myself!” But then I went and picked up a bunch of books, watched a ton of tutorials, and now can write my own jQuery crap. I will now never use it because of your “level of abstraction point”.

    I’m torn between seeing this as cool for people who don’t know, and terrible at the same time for keeping people from actually learning how to do it themselves.

    It appears I can admire AND dislike something at the same time.

    On a side note, cause someone above mentioned Dreamweaver…I don’t use it anymore (Go NetBeans!), but I am curious if people even use the design view anymore?

  13. Excellent point Chris. I’m not much of a jQuery guy myself, so this will be great to try out.

    I think often times, because we do something a certain way and we have our own process, that we tend to try to push it to others and we want others to do things the way we do it. It’s like that old saying, “It’s my way or the highway.”

    In the end, it all boils down to what really works for each individual. Great thought for the day, something that I’ll be thinking about.

  14. I beg to differ (if I’m differing at all), but I’m so tired of stupid terms people throw around trying to look contemporary, like: Web 2.0, open web, creatives, etc. Now this new one ‘Abstraction Point’ just falls directly into this sack.

    WTF is that, just name things by their simple, normal names and KISS. Instead of saying ‘Abstraction Point’, just leave as “…where your current comfort level is.”

    That shouldn’t be difficult, and clearly, doesn’t need any embellishment to be understood.

    That IxEdit looks very cool, not sure if I’ll use it either. The voice sounds like a speak program, not a person, lol.

    Adios pues.

  15. Permalink to comment#

    I also checked out the IxEdit when I saw it on Script & Style. But I was hesitant as well.

    Back when I was just learning HTML, I used to use imageready to make the html as well as the graphic slices of my templates.

    When something went wrong, I was totally helpless because I had no understanding of what it was I was messing with in the first place.

    I feel the same way about IxEdit. If something doesn’t work, or goes haywire, or needs to be custom, and the IxEdit can’t fix or produce it for me, I become completely dependent on it because I don’t have a fundamental understanding of how or why it works.

  16. When I first started learning html and css I relied a lot on dreamweaver and the design view. I remember learning the hard way all the browser inconsistencies and the feeling of helplessness when something went wrong. However this was a great way to learn. I would have a code base, try to fix it, experiment, and in the process I learned how to code it myself. So I don’t regret using Dreamweaver, it was a great jumping off point, but I am much more comfortable hand coding at this point, and it’s much faster, especially with css.

    I am currently just learning jQuery and I think this little app could help me jumpstart my learning. I can create something, have a codebase, look to see how it was done and in the process learn how to code, then worry about best practices and all that later. The hardest part is basically learning the logic and syntax. Once I have a grasp of that its all expanding that knowledge.

  17. I agree that people who write jQuery code shouldn’t look down on people using IxEdit, just as pure javascript’ers shouldn’t look down on jQuery users.

    But I slightly disagree that “neither one is better than the other”. To me, it not about knowing what your code is doing, but rather getting your code to do exactly what you want. With each level of abstraction you give up a little of that control; in that sense pure javascript is “better” than IxEdit.

    Basically what I’m saying is that aspiring developers should not feel bad about using abstraction layers, but they should strive to move their “abstraction point” forward to a place where it benefits them the most (in terms of flexibility, efficiency, and time efficiency).

  18. Ryan T.
    Permalink to comment#

    Guys and Gals, it is all great to take pride in your code, but when HR sends you a privacy policy or something similar, it is a lot easier to paste it into dreamweaver. The code dreamweaver (cs3 and up) produces from a word doc is clean and I don’t have to spend time typing p, ul, li, or any other basic html tags.

  19. Hm i think that IxEdit (and all the other “GUIs”) are excellent for beginners in the jQuery World. I mean.. I’m also a newbie in jQuery so its really helpful when i dont have to search every time at google or somewhere else to find the 10 lines code snippets to show/hide something..

    But i think it should be used ONLY by beginners and who uses jQuery all day long, its just inconvenient. So when you learn the basics of jQuery (and so one) you are 100x faster.

    But thanks Chris for this little “Review” and your thoughts about this topic!

  20. Anil
    Permalink to comment#

    Ahhh this is awesome i haven’t seen this type of tool.
    Its cool to create DOM integration in our code.
    Thanks to share with us.

  21. @Chris – IxEdit it’s a perfect solution for me. Big thanks!

  22. Louie
    Permalink to comment#

    Abstraction point! I loved the conceptual discussion. I enjoy “thinking.” It looks like people are getting distracted. The article is not about the tool its about the concept Abstraction point.

    It was a great change of pace to write an article like this! Keep up the good work!

  23. I’m not sure I completely agree with the conclusion you’ve come to. There’s a difference between not reinventing the wheel (using jQuery versus JavaScript) and using a tool which writes your code for you.

    It’s difficult to say what the difference is here, but I think it lies in the way we progress. A novice coder might start of with IxEdit, and then move onto jQuery when they understand the key concepts. OTOH, I would expect another type of novice coder to start off with pure JavaScript, and once they’ve understood they key concepts to move onto jQuery, in the interests of not reinventing the wheel.

    Either way, jQuery is the destination. Maybe it’s the sweet spot between no abstraction and over-abstraction. What do you think?

  24. Chris…another great article. Thanks for sharing!

  25. Matt
    Permalink to comment#

    I think there’s a big difference between being comfortable with just abstraction or an abstraction implementation gives the same grain of control that the previous abstraction gave.

    For instance, I program in Python or Java over C. I’m comfortable with that because I always know that I can fall back onto C if Python or Java can’t provide me everything I need. Besides that, I use Django over pure Python because Django isn’t anything special in the first place. It’s a simple framework that makes common jobs easier.

    I am in the “I want to know what my code is doing” crowd, but I usually heavily review the abstraction of choice in detail before I dive into it. For instance, I wouldn’t use Delphi, and won’t use RunRev, REALbasic, or Visual Basic. What all of these have in common is that they are proprietary abstractions over machine language (in a very loose sense). Even though they could all be better than anything out there, you’re reliant on the sole proprietor to constantly update and fix their language. If I had a thriving business running on these implementations, and the proprietors were gone tomorrow, I would be left transcribing n-applications into another suitable implementation.

    So even though this application could make pie, I’d still worry that it may not be supported tomorrow. Even though this application does write down to jQuery, think about wading through generated code. It’s very difficult to generate code without the user being incredibly explicit. That can result in very messy code, and many times, it is very messy. So, again, I am in the “know what’s going on” crowd, because I don’t want more work in the future than what I’m projected to put in.

  26. Jane
    Permalink to comment#

    Thats much like how people miss use the term “professional” when they really mean “sophisticated”.

  27. Here are my two cents. I think one can be better than the other on certain aspects. For instance in terms of potential income if your comfort level is at a “high abstraction level” then you are less likely to micro manage. This means you can efficiently delegate jobs to your subordinates. Get more work done in shorter time. If you, however, cannot easily delegate and need to check every tiny bit of work. Then you will get less job out the door in a given period of time. Hence you will earn less.
    This is only from a monetary perspective of course.

    • One could say that one’s “need to check every tiny bit of work” would command a higher pay rate thus allowing that person to earn just as much, if not more than the person that delegates.

  28. This is really interesting, in two ways (neither of which I’ve got my head around).

    1.
    A person performs best with the tool they’re comfortable with. Every tool has an abstraction point, and where that point lies is partly what determines why it feels comfortable to someone.

    All else being equal, do you think that two people who like to work at different abstraction points will produce work of equal quality? And will the solutions be different because the different levels of abstraction determine the style and character of the work?

    So, is a particular abstraction point only suitable for a project because the person doing it is comfortable with it? Or does the type of project determine the abstraction point.

    2.
    The other question is probably an old one: are developers, as a whole, working to make themselves obsolete by increasing automation? (I guess that applies more to programmers than designers)

    But the answer has to be no. Just because big house-building companies can throw up identical houses all over the place, doesn’t mean there’s no place in construction for structural engineers (who work at a low level of abstraction), because in other areas of construction architects are always pushing the boundaries.

  29. Chuck
    Permalink to comment#

    Abstraction point hit me hard! This is a great concept/term – and is not just “comfort zone” – although that is clearly the net effect. It sumps up the essence of how we experience technology. Issac Newton started this when proclaming he “stood on the shoulders of giants”. I submit that we are riding this same concept everyday, with ever increasing levels of abstraction from underlying laws of physics, electrons, bits, code, html, jQuery. There is more to come, and the need to write code will be reduced as standards expand and desired ends are realized through simpler means.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".