Home » Posts tagged "css" (Page 2)

CSS Animation Resources

loading…

This week I discovered CSS Animations.  Well, I shouldn’t say I discovered it so much as I finally spent some time figuring out what it is and why I would care about it.  This could make so much of what we normally do in JavaScript entirely unnecessary.  So, more for my own benefit than anything else, I thought today I would just create a list of resources that are available.

But first, why would you want to use CSS for animation when JavaScript could do it just as well?

CSS and HTML live in the same world

As I mentioned a few weeks ago when I discussed JavaScript performance, anytime you manipulate the DOM from JavaScript, you have to cross the HTML/JavaScript boundary.  And to do it right, you have to make sure you work in sync with the key frames that the DOM is living in.  If you don’t, at best you will be animating more than you need to if you use JavaScript to do the animation.  On a phone, this can eat up precious battery life.  For me, this is the biggest reason.

Declarative Code Is Easier To Read

I realize that some may disagree with this.  But my feeling is, if I can express in one line what would  take a loop in JavaScript to do, I’ll take the one line of code.  This one of the things that makes Angular attractive.  I can create my own HTML tags.  Why not get the same benefit from my CSS?

Reasons Why You Might Not

There are a few reasons why you might not use CSS Animations.  First, it is relatively new.  It may not do everything you want it to do.  So, you may have to resort to using JavaScript for at least some of the things you want to do.

Second, it may not support all of the browsers you need to support.

Resources

Here are a brief list of resources that I found

CSS Generators

CSS Animated Accordion

Menus

Slide Show

When I first suggested “CSS Animations” to a designer friend of mine, he reacted as though I was suggesting putting a flash animation on a web site.  Obviously, we wouldn’t want to do that. But we use animation is some pretty creative ways.  So the next time you reach for JavaScript to add some sort of animation to your web application, do a search for a CSS Animation instead.

WebForms vs MVC–The War Is Over

loading…

I just finished listening to a DotNetRocks podcast today with Paul Sheriff which largely talked about creating mobile web sites using ASP.NET WebForms.

During the show they discuss when you might use WebForms vs MVC and pointed out that WebForms still have their place, particularly in the corporate world, since they are just as testable as MVC and yet much easier to get something up and running quickly.  This is in contrast to a public facing site that might need to be as light weight as possible and therefore need the extra control that MVC can give you.

And then there is the issue of legacy code.  As they mentioned in the podcast, just because Microsoft has introduced a new technology, doesn’t mean we all have to go re-implement our websites in that technology the next day.  It doesn’t even mean we have to ever implement that technology.  It is just another option in our toolbox.  It is our job as developers and architects to know when the right time to use what technology is based on the requirements of the application and the skill set of our development team.

These are Points I’ve made in the past.

The War Is Over

The point I want to make today is this.  The war is over already.  I am surprised that this is still a conversation that the community is having.  Both sides have “lost” to a sneak attack by SPAs.  If this is still a conversation you think is worth having, I would suggest that you may be behind the learning curve.  The .NET world has moved on.

That is, client side models and frameworks have taken over.  What you use to produce the HTML that all lives in, is of very minor concern at best.

I suppose if you are interested in creating applications that are old style forms that post content to the server and refresh the page content or move on to another page, you might be interested in continuing to fight this war.  But in my world, most of the applications I work on could be created using HTML, CSS, and JavaScript calling back to a server that consumes and produces JSON.  In .NET, that would mean using WebAPI, which, while based on MVC, isn’t MVC.

Examples

For some examples of this, check out the LabelsForEducation site which is a DotNetNuke site.  DotNetNuke is a CMS based on WebForms technology.  By using jQuery and knockout, I was able to create the interactive portions of the site without using any webforms technology directly.  Instead, I just produced enough HTML and JavaScript in the ASCX file that is the modules I developed to launch the main JavaScript application. You can check out how this looks on the following pages:

You would be surprised at how very little code is in the codebehind files of my ASCX files that each of my modules live in.

In my current project, I’m using EXTjs and ExtDirect, which is based on WebAPI, to create SPAs.  Nothing that I am currently doing requires that I do the work in either WebForms or MVC.

The beauty of an SPA is that it never officially post back so it doesn’t matter what you are using to hold the main application.

Drawbacks to SPAs

Having said all of that, there is a major drawback to SPAs.  You have to really know JavaScript, and I’m guessing even though it is the most used language, the number of people who really know JavaScript relative to the number of people it would take to implement a good SPA in a way that can be tested and maintained is relatively few.

Now, I’m sure someone will argue that we still need something.  In fact, as I was discussing this article with some of my peers, we recognized that WebForms and MVC at least allow us to provide page level security.  But even that could be handled using a regular HTML page either by applying the security at the IIS level or by implementing security in the WebAPI and JavaScript.

And what if your page has no interactive components?  Or just a part of the page has some interactive components?  Maybe the bulk of the content comes from a database.  In that case, you can use either and neither  would necessarily be “bad.”

What About Database Driven Static Sites?

The part that is posting back can be implemented using JavaScript and WebAPI.  The rest can be implemented by turning off state management on WebForms and using databinding and Model View Presenter(MVP) or Model View ViewModel (MVVM).  I prefer MVP. Or you can go for MVC and Razor.  Either will essentially get you where you need to go and be relatively light weight.  Although one could make the argument that MVC will give you more control.  The question you have to ask though is, if you had the control, would you really use it.  Does the performance gain relative to the traffic you expect to get and the level of experience your developers have make the switch to MVC worth it?  Would it make more sense to concentrate training efforts on improving JavaScript and WebAPI skills?  Just some things to think about.

So, stop arguing about WebForms vs MVC and put all of that energy into REALLY learning JavaScript, CSS, and HTML because that is where you will be spending a huge hunk of your time in the future as a web application programmer.

The Internet has moved on.  HTML, CSS and JavaScript aren’t just designer eye candy toys anymore.  They are first class development tools that you need to learn now if you plan on being marketable 5 to 10 years from now.

Other Places Talking About WebForms vs MVC

ASP.NET Web Design Software

Artisteer - Web Design GeneratorWhat if there was a product that would allow you to create your web site themes as easy as you could create a PowerPoint presentation theme?  Wouldn’t that be cool?

This past weekend I discovered just such a product.  At first, I was pretty skeptical.  I mean, I normally pay $50.00 or so per theme when I put up a DotNetNuke site and here is a product that will let me create very nice themes that I can use in BOTH my ASP.NET based sites AND my WordPress based sites for just over 3 times that price.

Continue reading “ASP.NET Web Design Software”

Why CSS ID selectors are Evil in ASP.NET Web Forms

Anyone familiar with CSS knows that class selectors are generally reserved for controlling how an element looks (font, color, size, etc) and id selectors are generally reserved for where the element is positioned on the screen.  The reason for this is that id selectors correspond to the id attribute of the elements on the screen and if you are using well formed html, you can only have one element on the page with any specific ID.  That is, IDs are unique.

However, ASP.NET uses that exact same feature of IDs… that they are unique.. to ensure that an ASP.NET control or an HTML control with the runat=”server” attribute set also have unique IDs, and this is where all the problems start.

Continue reading “Why CSS ID selectors are Evil in ASP.NET Web Forms”