Posts tagged jQuery
One of the biggest problems in web UI is to synchronize page elements one upon each other, but by far the hardest is when dealing with multiple dropdowns. A good, clean User Interface is the key to your customer’s heart! This can be achieved in several ways, such as:
- on the change of the first dropdown, a new page request is issued to the server, with the selected item as current item and the server will figure out which element(s) need to be selected in the subsequent synchronized dropdowns – old style, not so used anymore because it takes time and bandwidth to send and receive the complete page;
- with AJAX - on the change of the first dropdown, a partial page request is issued to the server, with the selected item as current item; the server will figure out which element(s) need to be selected in the subsequent synchronized dropdowns; it returns just the relevant part of the page ( not a complete one like before); just this new part of the page will be overridden in the current page, creating the user the impression of “real time” action.
Today’s choice – jQuery
We’ll explore today the last option, using jQuery. For this we will consider two dropdowns, each one with 3 items. Our target will be simple today, we’ll change the second dropdown to reflect the first one’s selection. Let’s consider that our page contains the following fragment of code with these two dropdown boxes, first one containing the countries and the second their capital. (more…)
Today is a great day – the third version of ASP .Net MVC framework was released! Not alone, but accompanied in the today’s developer toolbelt with an assortment of FREE goodies:
- ASP.NET MVC 3
- IIS Express 7.5
- SQL Server Compact Edition 4
- Web Deploy and Web Farm Framework 2.0
- Orchard 1.0
- WebMatrix 1.0
I like this trend in Microsoft’s approach, providing free tools to quickly and cheaply start development, increasing your productivity and making you think about a quick Return of Investment – only your time is involved! But read thoroughly the licence, it might be the case that for using these tools in production or commercially another type of licencing model might be required!
But back to our focus technology!
ASP .Net MVC 3 – what’s inside the box and interest us?
Razor – new view rendering engine, added as a option to the default ASPX one, allowing developers to use a similar style in adding inline code in HTML templates, while discarding the unnecessary characters, allowing us to type more, faster and with less errors than in the ASPX counterpart. The engine features a special syntax, denoting only the start with a common character – the @ – allowing you to write the code without denoting explicitly the end of the code in your markup. The parser is smart enough to understand it and not interrupting your flow of development, mixing code with markup for creation of recurrent lists or tables. Scott Gu has a very interesting introductory tutorial.
jQuery – better integration through the addition in the MVC templates of jQuery UI and the Validator plugin. The last one allows advanced validation scenarios, like decorating the Model with datatype, size, if it is a required parameter, and this will auto-generate the required validation script on the client side. Neat, isn’t it? No more maintaining validation code in several locations!
Output caching – besides the traditional caching on URL-basis and on action method level, now available is also the partial page output caching, enabling the caching of fragments sent ( for example though an AJAX call).
Improved DI – ASP .Net MVC now allows better integration with IOC containers and support for Dependency injection, removing the previous requirement of creation of custom ControllerFactory to just enable this very important scenario. I find it very useful, while the nowadays website rely quite heavily on DI and creating this custom factory becomes annoying when one has to do it for each and every project at least once. A cool addition is that you just register a DI framework and it will not resolve dependencies for your Controllers but also for the others pieces of the MVC puzzle – Action filters, Views, Model Binders, Value/Validation/Model metadata providers.
As we are used now, these aren’t all improvements but also : improved New Project dialog, scaffolding was reworked, cross-cutting filter attributes for Global filters, ViewBag has now the dynamic support of .Net 4 and others.
I use my blog to record and share my knowledge, but also to present to possible employers my skills. I use it like a marketing tool for my persona. For this, I need to make available not only the RSS and Twitter account, but also resume profiles like Xing, LinkedIn and Facebook.
Since I am using WordPress and I know a little bit of PHP and MySQL I wanted to customize my current theme.But some time ago I’ve read that they don’t encourage you to customize directly the chosen theme, but instead create your own child theme, with the desired customizations. This way, when the theme will be updated, you won’t loose neither time nor brains trying to redo all the modifications.
Almost all good developers that I know have some kind of repository of their code. Mine is my blog, this blog. Stay with me and you’ll find out how to easily be able to create your local version of WordPress, customize and test your plugins.
For´this you’ll need to follow the next steps:
- Go to Webmatrix official website and download the Web Platform Installer which will install for you not only Webmatrix itself, but also a lot of useful tools like an integrated webserver, Internet Information Services Express, PHP interpretor and its connectors just to name a few. But you can also use it to add new features like ASP .Net MVC3! (more…)
Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.
The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.
In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:
- styles.css – required – who’ll mark your folder as a child theme
- functions.php – optional – for our example is required, as we’ll write code inside of it
While working in UniBonn, I have a lot of contact with Ruby on Rails and JQuery; I actually started loving its interactivity and stability. But lately I encountered a small situation with the tabs object that they offer.
This is their default view, with Redmond theme applied. Nice and clean, you might say. But what’s missing? These tabs don’t support images. So you’ll not be able to show an image to specify, let’s say, that this tab has some updated information or a warning that something important is inside that tab.
I wanted to have some kind of control on specifying how the tab should look when I wanted my users to understand that something important is inside and requires their immediate attention.
As I searched through the website, I found the mentions of how to change the tab looks into an “error” style, so that it will attract attention no matter how tired the users are. In the Theming area of JQuery UI website, I found the help for Layout Helpers. Basically, you can specify additional classes who can override the theming of an element. Under Interaction cues, you’ll find all you need to set your elements style to highlighting, error, disable etc.
Position: Assistant Researcher ( WHK or Wissenschaftliche Hilfskraft )
Starting 1. March 2010 I work in Informatik 3 Department of Rheinische Friedrich-Wilhelms-Universität in Bonn.
My master is a joint effort between Uni Bonn and RWTH Aachen. During my master, I had the pleasure to be part in the Agile Lab, where I encountered two Research Associates, Pascal Bihler and Mark von Zeschau. They are true developers, result driven people and fair judges of our activity. During this lab, which was intensive, we had 3 weeks as developers in an almost real company environment. From 9 to 18, if you know what I mean.
The experience that I had we very nice and as soon as I could, I discussed with them about joining their development team. Now I have the pleasure of developing a project that will affect all students that will study in this department.
The project is an upgrade to the existing system and will be developed in Ruby on Rails and have a Postgres database, allowing students to have a better application experience. The basis of it are an interactive and dynamic application who has several workflows, involving both possible future students and professors into finding the best candidates for this fine university.
My responsibilities are:
- development in Ruby code on Rails platform
- database migrations / upgrades
- installing / configuring gems
- CSS / interface design
- testing of the application
This is one more important task who caries with it big responsibilities, but I’m feeling very good about it!
Sharing your article for free advertisement on Facebook is a fact. While using different Social Networks sharing tools I had a problem when sharing my articles on Facebook: sometimes the image that I intended to use to represent the article wouldn’t show in the list of the images who can be chosen. Why is that?
It bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some wandering on the internet, I found here the correct directions. What I learnt: Always search for the API!
In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.
You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:
<meta name=”title” content=”title” /> <meta name=”description” content=”description ” /> <link rel=”image_src” href=”thumbnail_image” / >
Position: Team Leader and Lead Developer in Alensa Online – Software Development department
I was part of Alensa team between January 2007 and August 2008. Only the opportunity to study Media Informatics Master, held by RWTH Aachen University, could gave me enough reasons to leave Alensa Online that I enjoyed so much for almost two years.
I was in charge with our brand new solution for an online Healthcare project – Alensa Online. The Alensa Online Shopping site (www.alensa.ro) consists of an internet healthcare platform in Europe that would simplify research and self education related to health issues, and provides the customers with an interface allowing them to easily get their health questions answered by professionals. It was first developed by a third party company, then I took over the responsibility of developing and maintaining the solution.
My responsibilities were quite complex because I was the first hired person, very similar with Softwise company. This reminded me about the joy and responsibility that comes with this. Another nice surprise was to find in person of Mr. Alex Savic, the CEO of the company, a friend with whom I shared both technical discussions and personal development ones, he was one the most supportive about my decision to study in RWTH Aachen.
Shortly, at Alensa Online I were in charge with:
- Architecting and developing the web based solution using Microsoft ASP.NET / C# and SQL 2005 Server technologies;
- Performing server administration, configuration and maintenance for the Windows 2003 server, for IIS 6 and for SQL 2005 database server;
- Executing architectural modifications in order to make the website user friendly;
- Identifying, designing and developing solutions;
- Periodically testing the site functionalities and thus creating a real test environment, test cases and bug fixes;
- Performing code review, corrections and code optimization;
- Analyzing hardware/software requirements and proposing hardware/software improvements and suggestions (for example, choosing an appropriate hosting partner);
- Implementing real time traffic analysis tool to help the management department;
- Conducting internal training for his colleagues. (more…)
Windows Live Writer (shorter: WLW) is one of the most popular blog authoring tool that I also happen to like and use. And I say this because of its features – I especially enjoy the Preview tab. But what it really lacks is previewing the ENTIRE page – it will get only the html and some css. So no Syntax Highlighting of my code? Let me tell you how I solved this issue.
As a blog writer I searched for something that could allow me to write the articles offline and then upload them in WordPress. I also tried WordPress built-in editor, but the editing box is so small that I couldn’t use it too much.
The most important feature for me is that it retrieves the blog theme and has a preview function that provide you the same look on editor window. So you will be able to write a post with a preview. But when having a more complex theme, using JQuery or Prototype, you will discover that you don’t get any more the same look and feel as in the blog. This is partially ok for editing, but sometimes it is really bad – especially if you’re a programmer and add a lot of code in your page. On blogs there is a solution to show the code with syntax color, but in the Windows Live Writer I couldn’t find one suitable plug-in that does this.