Kriztine Mendoza

Senior .NET Developer & Tech Partner for Scalable Software Solutions

Tools

WebResource.axd File Compression

by

I was working on a custom .Net CMS that needs optimization.  To analyze the performance of a particular page, we were using the PageSpeed Insights and Pingdom tools.

The PageSpeed Insights recommends minifying JavaScript files. After I have bundled and minified all the js files in the system, PageSpeed is still reporting the issue due to the WebResource.axd files.

The application’s WebResource.axd files come from Telerik and ASP.Net page with server-side controls.

The Telerik’s WebResource.axd file is already minified, so I have just added the ScriptMode=”Release” tag.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" ScriptMode="Release"></telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
</telerik:RadAjaxManager>

For the other WebResource.axd file, I had to create an HTTP module.

Implementation

  1. Write an HttpModule class named AxdCompressionModule.cs. After the axd files have been downloaded, it will be cached in the browser. The axd files will not be combined into a single file, though.
  2. Add settings to the web.config
<modules>
      <add name="AxdCompressionModule" type="ProjectName.Http.AxdCompressionModule, ProjectName" preCondition="managedHandler" />
</modules>

What I think of MailStyler

by

MailStyler is an email editor which you can install on your desktop. It is “Blocks”-based. You can select from their pre-defined blocks and change the palettes and styles. You can delete the controls/elements (button, text, image) from a particular block, BUT you CANNOT ADD new control/element to a block. What if you want a layout that is not in their list of blocks? I cannot even achieve a layout that looks like the one below. Notice the two buttons at the bottom.

MailStyler might be easy to use but it has limitations. (It does not even have drag-and-drop features of blocks.) If you want a quick a newsletter or HTML email with simple layouts but without having so much layout customizations, you can use MailStyler. Otherwise, you can use the SendGrid’s built-in Email Template creator. (Because SendGrid is currently what we have.)

I have created a sample email using MailStyler. Notice how I was able to achieve adding the button – it is just a single image from a one-column image block.

As for standardizing all email templates, that is a good practice. The question is what would be the standard layouts of those templates. Because that would determine if we should use MailStyler, use SendGrid built-in Email Template creator or any other app. If we opt to use MailStyler, we would just limit the email designer.

Convert PCX Image to PNG or JPG format

by

PixConverter

I am currently working on a task where I have to migrate data from Paradox Database (or simply, Paradox DB) to SQL Server Database.

The image files that the Paradox DB is using is in PCX format. And the system I am developing is required to read and display these images. Since no browser can display PCX image (you can see the image formats the browsers support in this link) using the <img> tag, the PCX files have to be converted to another image format that popular browsers support. I have chosen the PNG format as the final image format because it can preserve the fine details with the highest resolution with smaller sizes.

I am using the free software Coffee PixConverter to do the conversion. To save time, I am utilizing its bulk conversion feature. I am also saving the converted images to the same folder as the PCX files, so I would not have the update the current physical paths of the images.

A Simple Review of Third Party Controls for ASP.Net MVC

by

A company in the US wants to establish its software development department. They already have 4 to 5 projects lined up. And I will be starting to design the first one. Exciting times, eh?

One of the primary requirements is to use third-party controls that can somewhat emulate Microsoft Office’s feel. The reason for this is that – most users are already accustomed to using Microsoft Office, they do not need to undergo extensive training. Since I am planning to use ASP.Net MVC, the controls should also have support for ASP.Net MVC extensions.

For this, I have checked SyncFusion, DevExpress, Telerik, and Infragistics.

Third Party Vendors That Have Controls That Can Emulate Microsoft Office End-User Experience And Has Razor Support (Asp.Net Mvc Extensions)

Important Controls

SyncFusion

DevExpress

Telerik

Infragistics

No ASP.NET MVC extensions

jQuery Controls

HTML5
+ JS

DevXtreme

Kendo UI

Ignite UI

Ribbon

ü

ü

 ASP.NET
MVC  have simple, lightweight Menu
and Toolbar

Menu

ü

ü

ü

Navigation

ü (Accordion)

ü

ü (PanelBar)
Hierarchical Treeview ü ü ü
Grid ü ü ü
Splitter ü ü ü
File Upload / File Manager Upload box. No file manager ü Very cool

 

 Simple upload. No file manager
Drag and Drop X ü X
Charts ü ü ü
Dock and Modal Popups ü ü Notification & Window controls
Tabs ü ü ü
PDF / PDF Viewer ü X X
Responsive Layout X ü ü
Reports Based on RDL/RDLC, XML based, capable of dynamic
reporting		 Uses own Report Engine Uses own Report Engine
Documentation 3.5/5 4/5 5/5 1/5
Support No experi No experience.  I heard it’s great. Superb support.
Pricing (source code included) Free for Individual
developers or up to five users at companies with annual gross revenue below
$1 million USD.Essential Studio $2,495		 Universal Subscription (includes everything)
$ 2199.99		 DevCraft Ultimate (includes
everything)
$ 1,999.00		 Ultimate
$ 1995.00 –  $2,495 (w/ Priority Support)
Others Can be Free has Outlook-inspired application pre-built template. Microsoft uses Telerik in their UIs.

 

Conclusion:

I think we should base our decision on which set has the most controls that are useful to the projects we are going to work on. Like are we going to use File Upload / File Manager with drag and drop features, hierarchical grid, ribbon control etc?

Here are some comments about DevExpress vs Telerik vs Infragistics vs jQuery UI that I have found on LinkedIn:

* First 3 is heavy. For lightweight option, use jQuery and jQuery UI. Can be easily customized.
* If going to use charts, 3rd party would be nice too.
* Ok to use for a quick project
* Angular JS is the future, jQuery is great (jqGrid for the grid) – problem would be if you need reporting
* Telerik is open source
* Telerik won on //www.techwars.io/fight/telerik/devexpress/
* Telerik has a very polished UI with a solid api. Infragistics had a lot of functionality but was a bit buggy. UI wasn’t quite as polished as Telerik. I’ve heard they’re stronger on the winforms side.
* Infragistics is buggy. We use it but spent a lot of time working around issues with browser support. The controls also have issues with ajax interaction
* If its something specific like Chart, then I would say DevExpress is leading the way. If its something to do with grids and grid customization, the you would be better off going for Infragistics. Telerik fits in when you need a diagramming type of component. So all in all each one is good in a specific area IMO.
* I’ve used Infragistics and Devexpress… Devexpress is superior hands down. Their support and samples are great… 90% of the time I can find a working sample that’s helps me find a solution to issues I am trying to solve.
* I’ve used Telerik & DevExpress but when it comes to WinForms and reporting I have to say DevExpress all the way. Telerik is great for web development.
* For new WEB application I’d recommend you Sencha Ext JS. It will bring you MVC pattern on client side, supplying you rich set of controls, good contacts with ASP.NET MVC, CSS and HTML5. Other modern candidates are Wijmo or Kendo from Telerik.
* I’ve used telerik, devexpress, ,infragistics and syncfusion. In my opinion telerik is really flexible tools. In devexpress i experience some troubles about customizing. infragistics is quite good but telerik is really good for me.
* I have used both Telerik and Devexpress. Devexpress is good for Winforms and Telerik is awesome for web apps. Both are comparatively good.
* Infragistic : – I have used it for asp.net web application. They provide rich user experince but heavy. lot of java script code.
Devexpress : I have used it for mvc project and lot of features and rich user experience. But very heavy. Even single text box it add lot of html and rendering takes time. Learning curve is bit high. But it works.
Jquery UI and other jquery plugins : Best opton for me. Very light. Free. Customizable if you good in jquery and java script easy to use.

Looking for Rapid Prototyping Tools for ASP.Net Applications

by

I have not seen any other prototyping tool [yet] that can do what Indigo Studio can do.  Mostly, the tools that I’ve seen are using images that can be linked together, so we know what is going to happen if we click a link, a button, and other clickable controls.

I am a fan of Indigo Studio when it comes to “prototyping” capabilities. But, I would not use it if I do not have a plan on using Infragistics controls. Because that is where you can fully maximize its use. And I am not a big fan of Infragistics controls. They do not have ASP.NET MVC extensions. When you want to use ASP.NET MVC and Infragistics, your option is to use their IgniteUI or their set of jQuery controls. I would like to avoid using jQuery now as it is more on DOM manipulation. Also, I am having a hard time finding the information I need on their website. They do not have many positive reviews, either.

Now, if there is any other tool out there that is much like Indigo Studio, I would love to try it out. I am still looking…

For Rapid Prototyping, I think these would do as alternatives (for now):

  1. Using NET WebForms.  Hey, we can also drag and drop the controls. Making it interactive may need some coding but not that much. Just one line per each mouse click.
  2. UI images, making the links work by using InVision. I see it as the social media of UI/UX design, wherein the user can point to a particular area in the image, add comments, and keep adding comments. Also, there is a button where we set the image as “In Progress” or” Approved”. Cool, right?

InVision vs Indigo Studio

by

I have personally tried using InVision and Indigo Studio tools for the purpose of quick review.

InVision

InVision is an online tool that makes it easy for you to create, link together, preview, and share mockups of website or application. This is how it works:

  • You design the UI first via Photoshop or any other photo editing software
  • Link all the images together
  • Send the prototype to anyone. Then you can click on a particular area, a Comment section will appear (just like in Facebook) then leave feedback on the page.
  • The Comments or feedback is delivered instantly to the inbox. Notifications will appear on InVision app. Again, just like Facebook.
  • By default, comments will be delivered to other collaborators via email in an instant as well.
  • You can collaborate inside/outside the company because there is a feature where you can conduct live web meeting to talk and walk through designs, whiteboard together, and have group instant messaging.

So, InVision is really cool not only for the presentation of the pages but for collaboration purposes. And since, we are uploading image files, the user can already see what the pages are going to look like. The color, font sizes etc.

 

Indigo Studio

Indigo Studio ($495), on the other hand, is more on the rapid prototyping side. You don’t work on ready-made images. There are available common controls you can just drag here and there. And then, with just some clicks of the mouse, you can make the pages interactive. You can also get the HTML code generated by the prototype. Its collaboration feature is not as cool as InVision, though. All you can do is add an annotation to specific areas. I could not make it work though if I am the “user”. Just when I am in the role of a designer.

 

Conclusion:

If you want to easily present your designs and require constant collaboration with clients or other team members, you should use InVision. For rapid prototyping of individual screens without giving importance to the ease of collaboration, use Indigo Studio.

SERVICES
  • Responsive Web Design
  • Custom Web/Software Development
  • Content Management System
  • API Development and Integration
  • Database Design and Management
  • System Configuration and Administration
QUICK LINKS
GET IN TOUCH