Home » Posts tagged "html"

Responsive Web Design Conversion

Several weeks ago, I started the process of converting this blog to a responsive design.  At this point it is mostly done.  But it is done enough that I can tell you the process that I went through to get the site converted.

I was surprised by how easy the process was.  But I guess I was lucky because the theme I started out with already was following a number of best practices.

So, to start out with, if you want to move your site toward responsive web design, there are some prerequisites that you’ll need to pay attention to.

Continue reading “Responsive Web Design Conversion”

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

jQuery Expand/Collapse Using Head Tags

animal-010

I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from.

The task started when my client came to me with an existing script that was being used in a DotNetNuke system to expand and collapse content under head tags that was produced by an article editing system similar to the Text/HTML module.

Continue reading “jQuery Expand/Collapse Using Head Tags”

Dynamically Change class Attribute From ASP.NET

B03B0015 I recently received a question from another programmer I know who’s been using PHP prior to ASP.NET that made me think harder about a problem we’ve all had in ASP.NET.  The basic problem is this:

How do you dynamically change the class of a hyperlink based on the page name so that the hyperlink that represents the current page is styled differently than all of the other hyperlinks on our screen?  If you want you can substitute any other HTML element you want, but the problem remains the same.

Continue reading “Dynamically Change class Attribute From ASP.NET”