Logo

Who is talking?

Archive

Agility and Component Driven Development

almost 5 years ago | Amit Kumar: toamitkumar's Code Blog

Agile development has become the backbone of modern software development process. In a nutshell, it can be defined as - iterative, self-evolving incremental development that demands high collaboration and flexibility to change . Component driven development on the other hand augments to building reusable and testable components that be plugged together to form application foundation for delivering business functionality. In our current engagement with Firm Account, they have started providing IT tools/solutions to their clients supplementing the strategic solutions they have been providing so far. They wanted to deliver the solution with rapid-prototyping and Challenges The challenge was to deliver the solution in quick 2-3 months iterative cycles. The working software was to be delivered and handed over to IT department of the client. This meant the software has to be of high quality and maintainable with least amount of support Approach Each application we were building had certain common components. For eg: - Authentication - Work flow process - Data upload process - Data crunching and cleansing - Data export - User Management with corporate level security - Background processing for data manipulation - etc. This problem can be easily solved with Service Oriented Design Pattern. But since most of the deliverables were ‘leave behind’, we started to observe an evolving pattern of Component Driven Development. There was two approach to establish a pool of commonly required components. 1. Staff a team that is responsible for building common components 2. 'Tax' teams to contribute 'components', if they use any from the components library. The first seems more common but does not align with the paradigm of Agile Software Development. One team should not be responsible for building and maintaining the software. Over time this leads to quality compromises and delays in deliverables. Extracting common components from existing applications and taxing teams (who want to use from pool) to contribute to common pool did the magic. Initially leap was a little difficult. It took sometime for us to institutionalize the mind-set of building component -based software that can be contributed back to pool. Once the team was adept with this working process, the pool expanded and became rich. Impact and Benefits Redundant work, development time: Developing every system from scratch means redundant development of many of these re-usable components. These can be shared shared across multiple applications reducing development time. Time to market: Each application goes through rigorous process of QA and Security Assurance. This meant a lot of time was wasted testing the components that can be built and tested once. Using re-usable components reduced the time to market by ~40%. Expertise sharing: Software reuse supports the sharing of knowledge naturally. This helps in learning from peers and improves the quality of deliverables Focus on solving the actual business problem: Teams can focus on solving the business problem rather than spending time building the components that are common Rapid prototyping support: Reusable components can provide an effective basis for quickly building a prototype of a software system. This provides the opportunity to get customer feedback early in the life cycle, thus supporting the conception of requirements. Maintenance costs: Fewer defects can occur when proven components have been used, and less of the software system must be maintained. High quality: Error fixes occur from reuse to reuse. This yields higher quality for a reused component that would be the case for a component that is developed and used only once. What do you think ?

Wrap the data in Gridview

almost 5 years ago | Sumit Bajaj: Sumit Bajaj's Blogs

Sometime the data in Gridview column is large and it makes the scrollbar to appear on the page. Due to which User Interface of page get effected.Here are two solutions for achieving the required wrapping.Why two solution are provided?The reason is that sometime solution 1 doesn't work for all browser. It vary with the way how you are pulling the data in Gridview.Solution 1:Putting <ItemStyle> tag and setting the width of column.Wrapping the data using <ItemStyle> tagWrapping the data using <ItemStyle> tagSolution 2:Putting <div> tag and styling on bounded column (Works on all browsers)Wrapping the data using <div> tag and stylingWrapping the data using <div> tag and stylingOutput: Here is the output how data displayed in Gridview is wrapped.Gridview WrappingGridview wrappingKeep posting your queries to get optimum solution.

Combining D3 and Ember to Build Interactive Maps

almost 5 years ago | Alex Rothenberg: Alex Rothenberg

The Javascript world is exploding with new libraries that let us build really interactive applications. The image on the left is a static image showing how each US State voted in the 2008 Presidential Election - I suspect we’ll be seeing a lot more of this map in the coming months! Let’s look at how we can draw that map ourselves and make it interactive using: * SVG - a vector graphics format. That will let us draw an good looking map using publicly available data about the geography of each state. * D3.js - a JavaScript library for manipulating documents based on data. Its super fast and will help us interact with the SVG map. * Ember.js - a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. Its going to keep us disciplined and our code organized. An outline map of the States in the USA We’ll get stated building an Ember app to draw a map of the USA with each state outlined. First, we’ll need to know what each State looks like. This information is available to download from http://data.jquerygeo.com/usastates.json. var MapApp.usaStatesGeoData = { "type":"FeatureCollection", "features":[ {"type":"Feature", "properties":{"fips":8,"name":"Colorado","abbr":"CO"}, "geometry":/*...one polygon defining a rectangular shape...*/}, {"type":"Feature", "properties":{"fips":22,"name":"Louisiana","abbr":"LA"}, "geometry":/*...many polygons defining a very complicated coastline */}, // all the other States are here too ... ] }; This is a GeoJSON format which Thomas Newton points out in his post Positioning and Scaling maps in D3 is a format that works really well with D3 since it is data that can be rendered into SVG by our code. Each State’s boundaries are defined in complete detail with polygons that a cartographer has drawn out for us. This works for rectangular States like Colorodo or Wyoming and amazingly also works for those with lots of coastline like Louisiana or Alaska (although the polygons are much more complicated). Now, to create an Ember app we need to create our application and we’ll assign the GeoJSON data into a bindable property. window.MapApp = Ember.Application.create({ ready: function() { this.set('usaStatesGeoData', usaStatesGeoData); } }); Next we’ll add some handlebars expressions to our html page telling it to display the map as an Ember View (we’ll create that in a minute). <script type='text/x-handlebars'> { {view MapApp.Map geoDataBinding="MapApp.usaStatesGeoData"} } </script> Finally we write the view MapApp.Map = Ember.View.extend({ didInsertElement: function() { var elementId = this.get('elementId'); var regions = d3.select("#" + elementId).append("svg").append("g").attr("id", "regions"); var features = this.get('geoData').features; var path = this.get('path'); regions.selectAll("#regions path").data(features).enter().insert("path") .attr("d", path) .attr('stroke', '#ccc' ) .attr('fill', 'white' ); } path: function() { var mapW = this.$().height(); var mapH = this.$().width(); var mapXY = d3.geo.albersUsa().scale(1000).translate([mapH/2,mapW/2]); return d3.geo.path().projection(mapXY); }.property(), }); Whew that is a bit of code so let’s dig in. This is where we use d3 to create the svg that looks like a map of the USA. d3 (Data-Driven Documents) works by binding data to your DOM then applying tranformations to that data. In this case our data is the GeoJSON file and our tranformations turn it into an SVG map. didInsertElement is called by Ember when the view is inserted into the page’s DOM. The first two lines use d3.select to add the <svg><g id="regions"> elements to the page on this view’s portion of the page. The remaining use d3.selectAll.data.enter to loop through the features (each State) and add a <path> element. Looping through each feature (ie. State), we make use of the rest of the code and set the d attribute to the value of the path property. The path logic scales the map and uses the albersUsa projection which moves Alaska and Hawaii to the bottom left where we usually see them on maps. Looking at code is fun but what does it look like? Below is the page we just built and the you can see that it does, in fact, look like a map of the USA with each State outlined. http://www.alexrothenberg.com/examples/ember-d3maps/map_outline.html Coloring the States red or blue A red/blue map isn’t much use when all the States are white so let’s color them in. First we’ll need some data with the election results so we know what color each State should be. There’s a source from Google at http://code.google.com/p/general-election-2008-data/source/browse/trunk/json/votes/2008. I found the format to be a little hard to work with so I processed it into a simpler json file with just the information we’ll need. It looks like: [ {"name": "Alabama", "electoral": 9, "winner": "McCain"}, {"name": "Alaska", "electoral": 3, "winner": "McCain"}, {"name": "Arizona", "electoral": 10, "winner": "McCain"}, {"name": "Arkansas", "electoral": 6, "winner": "McCain"}, {"name": "California", "electoral": 55, "winner": "Obama"}, // results for the rest of the States too... ] To use it we’ll save it in our Ember Application. window.MapApp = Ember.Application.create({ ready: function() { this.set('usaStatesGeoData', usaStatesGeoData); var stateResults = usaPres2008Data.map(function(stateResult) { return MapApp.StateResult.create(stateResult); }); this.set('usaPres2008Results', MapApp.StateResults.create({content: stateResults})); } }); We use the javascript map function to turn our json data into ember objects that we can put into an Ember ArrayProxy object. For this example we don’t really need these ember objects but in a real application we’d probably get some requirements that would make them useful. For instance if we wanted the colors to update on election night as new results come in. Since we are using the StateResult and StateResults objects, we need to define them next. MapApp.StateResult = Ember.Object.extend({}); MapApp.StateResults = Ember.ArrayProxy.extend({ names: (function() { return this.mapProperty('name'); }).property('content'), findByName: function(name) { var content = this.get('content'); var index = this.get('names').indexOf(name); return content[index]; } }); Both objects are pretty simple. In fact they would both be empty except for the findByName accessor we define on StateResults. We’ll see the need for that in a minute when we look at how the view decides whether to color a State red or blue. This takes us to the view which enhances what we had before: MapApp.Map = Ember.View.extend({ // the path property is unchanged didInsertElement: function() { // same code as before ... regions.selectAll("#regions path").data(features).enter().insert("path") .attr("d", path) .attr('stroke', '#ccc') .attr('fill', this.updateFillFor ); // This line changed }, // A new function updateFillFor: function(d) { var stateResult = MapApp.usaPres2008Results.findByName(d.properties.name); switch (stateResult.get('winner')) { case 'Obama': return 'blue'; case 'McCain': return 'red'; } } }); Most of the view is the same, all that’s different is the way we set the fill on each State (“feature” in d3 terms). .attr('fill', this.updateFillFor); - Instead of setting the “fill” attribute to ‘white’ for all States we now provide a function to make the decision differently for each State. D3 will call the function with the current State as an argument (it actually passes the D3 “datum” object). updateFillFor - This function uses the findByName function we defined in StateResults to match the “geographical” State with the “election result” State. They are separate because each came from a different external json source. Once we have the stateResult object we look at the winner and know to return either “red” or “blue”. We can see it all working together right here and yes it does look like all the other red/blue election maps you’ve seen. http://www.alexrothenberg.com/examples/ember-d3maps/map_red_blue.html This is just the beginning of what you can do by combining D3.js with Ember.js. Next I plan to write about how you could add behavior like clicking to select a State and let Ember show details about that State.

System.BadImageFormatException

almost 5 years ago | Sumit Bajaj: Sumit Bajaj's Blogs

Could not load file or assembly 'System.Data.SQLite' or one of its dependencies. An attempt was made to load a program with an incorrect format. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.BadImageFormatException: Could not load file or assembly 'System.Data.SQLite' or one of its dependencies. An attempt was made to load a program with an incorrect format. Source Error:An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. Assembly Load Trace: The following information can be helpful to determine why the assembly 'System.Data.SQLite' could not be loaded.System.BadImageFormatExceptionSystem.BadImageFormatException: System.Data.SQLite Resolution Steps:1. Goto IIS (inetmgr)2. Open Application Pools3. Select the required pool4. Click on 'Advanced Settings' on right hand side panal5. Check the 'Enable 32-bit Applications' and set it to true (see below screenshot)6. Restart the pool and browse your websiteIIS SettingApplication Pool Advanced Settings

Factile – A free online survey tool

almost 5 years ago | Aishwarya Singhal: Aishwarya Singhal

On Friday last week, I launched Factile at http://www.factile.net. It is a free and open source survey platform that I created and aims at making the job of data collection and analysis simpler. It supports a variety of question types … Continue reading →

Factile - A free online survey tool

almost 5 years ago | Aishwarya Singhal: Aishwarya Singhal

On Friday last week, I launched Factile at http://www.factile.net. It is a free and open source survey platform that I created and aims at making the job of data collection and analysis simpler. It supports a** variety of question types** (Text boxes, Radio buttons, Check boxes, Combo boxes (dropdowns), Text areas, Plain texts, matrix of choices/ rating scales). The surveys generated are fully mobile device compatible. So you can create a survey and share it with people to take on iPads/ iPhones/ BackBerry/ Samsung S2s, really, anywhere! It is truly free and unlimited. There is zero usage cost, and you can add as much content to your survey as you like. And, if you wanted to download it and install on your infrastructure, you can! Whats more? You can define logic in the survey, you can build charts of the captured data, customize the appearance of the survey to match your requirements and the best is, you can request for missing features and I'll be happy to oblige! Check out http://www.factile.net and let me know of what you think.

Deploy Play 2 application on AWS with Tomcat and Apache HTTPD

almost 5 years ago | Aishwarya Singhal: Aishwarya Singhal

I have created a web application on Play 2.0 framework, in Scala. To deploy it, I looked at various cloud options – Amazon looks the best because, well its free :-)  Once the instance was created, it already had Java … Continue reading →

Deploy Play 2 application on AWS with Tomcat and Apache HTTPD

almost 5 years ago | Aishwarya Singhal: Aishwarya Singhal

I have created a web application on Play 2.0 framework, in Scala. To deploy it, I looked at various cloud options - Amazon looks the best because, well its free :-)  Once the instance was created, it already had Java 6, I installed Apache HTTPD and Tomcat 7. Lets first add some swap space sudo -i dd if=/dev/zero of=/swapfile bs=1024 count=524288 mkswap /swapfile swapon /swapfile Now edit /etc/fstab and append the following line to it: /swapfile swap swap defaults 0 0 Ok, lets install tomcat and httpd now. yum -y install httpd mkdir -p /var/www/html/assets mkdir -p /usr/share/tomcat7 cd /usr/share/tomcat7 wget http://apache.mirrors.timporter.net/tomcat/tomcat-7/v7.0.27/bin/apache-tomcat-7.0.27.tar.gz gzip -d apache-tomcat-7.0.27.tar.gz tar xvf apache-tomcat-7.0.27.tar mkdir -p /var/log/tomcat7 /var/cache/tomcat7/temp /var/lib/tomcat7/webapps /var/cache/tomcat7/work rm -rf logs temp webapps work ln -s logs /var/log/tomcat7 ln -s webapps /var/lib/tomcat7/webapps ln -s work /var/cache/tomcat7/work ln -s temp /var/cache/tomcat7/temp useradd -d /usr/share/tomcat7 tomcatusr chown -R tomcatusr /var/log/tomcat7 chown -R tomcatusr /var/cache/tomcat7/ chown -R tomcatusr /var/lib/tomcat7 chown -R tomcatusr /usr/share/tomcat7 Now open the server.xml (inside /usr/share/tomcat7/conf) and comment out the connector for port 8080 <!-- Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" / --> Look for 8009 (AJP connector) and modify it to: <Connector port="8009" enableLookups="false" redirectPort="8443" protocol="AJP/1.3" URIEncoding="UTF-8" /> Now create a start up script under /etc/init.d and call it tomcat7: #!/bin/bash # Tomcat7: Start/Stop Tomcat 7 # # chkconfig: - 90 10 # description: Tomcat is a Java application Server. . /etc/init.d/functions . /etc/sysconfig/network CATALINA_HOME=/usr/share/tomcat7 TOMCAT_USER=tomcatusr LOCKFILE=/var/lock/subsys/tomcat RETVAL=0 start(){ echo "Starting Tomcat7: " su - $TOMCAT_USER -c "$CATALINA_HOME/bin/startup.sh" RETVAL=$? echo [ $RETVAL -eq 0 ] && touch $LOCKFILE return $RETVAL } stop(){ echo "Shutting down Tomcat7: " $CATALINA_HOME/bin/shutdown.sh RETVAL=$? echo [ $RETVAL -eq 0 ] && rm -f $LOCKFILE return $RETVAL } case "$1" in start) start ;; stop) stop ;; restart) stop start ;; status) status tomcat ;; *) echo $"Usage: $0 {start|stop|restart|status}" exit 1 ;; esac exit $? All set. Now let us connect the HTTPD to talk to Tomcat. Open /etc/httpd/conf/httpd.conf for editting Go to the end of the file and uncomment the VirtualHost (port 80). The whole block, of course. Add the following inside the VirtualHost ErrorLog logs/error_log CustomLog logs/ajp.log combined SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \ \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content #Header append Vary User-Agent env=!dont-vary ExpiresByType image/gif A604800 ExpiresByType image/png A604800 ExpiresByType image/jpg A604800 <Proxy *> AddDefaultCharset Off Order deny,allow Allow from all </Proxy> ProxyPass /assets ! ProxyPass / ajp://localhost:8009/ ProxyPassReverse / ajp://localhost:8009/ The above will enable gzip compression on your pages (for performance), cache images on the client for a week and enable you to serve static assets from the webserver itself. Set docroot and error pages: DocumentRoot "/var/www/html" ErrorDocument 404 /assets/html/missing.html ErrorDocument 503 /assets/html/missing.html All done. Now use the Play WAR plugin to generate the WAR file. Copy the generated WAR file into /var/lib/tomcat7/webapps as ROOT.war (otherwise you don't get the "/" root URL). Package the static files from inside APP_HOME/public separately into a TAR and extract into the /var/www/html/assets directory.

Generating Excel in Play 2

almost 5 years ago | Aishwarya Singhal: Aishwarya Singhal

Play 1.x has a nice module that allows you to create Excel sheets. The new Play 2.x however lacks this capability. Or atleast is not very evident. While I found most of the information by searching the net, I thought … Continue reading →

Generating Excel in Play 2

almost 5 years ago | Aishwarya Singhal: Aishwarya Singhal

Play 1.x has a nice module that allows you to create Excel sheets. The new Play 2.x however lacks this capability. Or atleast is not very evident. While I found most of the information by searching the net, I thought it may help someone to just have quick start notes here. I use Apache POI to generate Excel. I also wanted to create .xlsx rather than a plain .xls. Add the following to your Build.scala (under APP_HOME/project) val apache_poi = "org.apache.poi" % "poi" % "3.8" val apache_poi_ooxml = "org.apache.poi" % "poi-ooxml" % "3.8" val appDependencies = Seq( ... apache_poi, apache_poi_ooxml ) Actually, you don't need ooxml if you only want to create a plain xls (and not a xlsx). Now start the Play console ('play') and execute 'run'. This will resolve the dependencies and get you the requisite libraries. Now generate a excel: import java.io.File import java.io.FileOutputStream import org.apache.poi.xssf.usermodel._ val file = new File("mydata.xlsx") val fileOut = new FileOutputStream(file); val wb = new XSSFWorkbook val sheet = wb.createSheet("Sheet1") var rNum = 0 var row = sheet.createRow(rNum) var cNum = 0 val cell = row.createCell(cNum) cell.setCellValue("My Cell Value") wb.write(fileOut); fileOut.close();  All done! Now, in your controller action, add the following: Ok.sendFile(content = file, fileName = _ => "mydata.xlsx")

Sitecore Best Practices

almost 5 years ago | Sumit Bajaj: Sumit Bajaj's Blogs

Design Prospective:1. Put components statically in html if it is being used multiple times and not much changes required. Use placeholders only to bind those components which are getting change frequently.2. Always set presentation details on _standard values.3. Do appropriate image resizing on server else it will slow down the performance when opening on browse.4. Create template for providing data to presentation component.5. Get the Data from DataSource from component Parameters to get variations.Code Prospective:1. Test your html/css/javascript code in such a way that Page Editor is enable for edit by non technical staff.2. Given meaningful names to placeholder so that right component could add under right placeholder.3. Write code using C# coz this is language generally use by Sitecore Support team.Use GUID instead of path/name as content can be moved to some other location in content tree.4. Create separate config file for your component instead of adding directly in web.config.5. Use Lucene Search in case data is large6. Do customization(if required) carefully and properly tested as it can impact the performance.

CodeGrunt - The Brittleness of Type Hierarchies

almost 5 years ago | Ben Gilles: Ben Gillies

When you write a program using a C#-like language you typically start by modelling your problem as a hierarchical set of classes which represent your domain. You then procede to ‘flesh out’ and expand upon these types with code which actually implements your program.After a while you inevitably find an exception to the rules of the system you have created - your types turn out not to match the problem in some way. Typically this occurs later after a lot of work has already been done which is now strongly tied to the structure of your type hierarchy, so you are left with a problem - do you hack around the incongruity, usually the quickest solution, or restructure your types to adapt to the new requirement?If you choose the former your hierarchy not only fails represent the problem anymore, it actively misleads you about it. If you choose the latter, you end up spending a long time yak shaving - working on something which has absolutely nothing to do with the problem itself and is purely a product of the system in which you are writing your program - the very definition of accidental complexity.CodeGrunt - The Brittleness of Type HierarchiesThis is my experience almost exactly, and why I tend to prefer more dynamic languages like Python and JavaScript that make refactoring easier.My approach tends to be to first start building, and then when refactoring/encapsulation opportunities arise, refactor and encapsulate. I find this results in something that better reflects the problem domain than defining a class hierarchy up front. Of course, I now use Python and JavaScript, which makes this all a lot easier. via TiddlySpace [source]

Sitecore customization using pipelines

almost 5 years ago | Sumit Bajaj: Sumit Bajaj's Blogs

A pipeline consists of a number of processors arranged in sequence to process a common set of parameters. If I have a series of tasks, which need to be performed to accomplish a task, then a pipeline may be the way to go.Instead of passing to each processor an arguments object containing these parameters, the pipeline class itself exposes properties representing the parameters.Sitecore pipelines also allow an object to pass through each step. This object can be manipulated by any of the steps and passed through to the next step until the end is reached and the object can be used by whatever executed the pipeline in the first place.In configuration file, you will be able to see numbers of pipelines, which is default from sitecore. You can create your own custom code and add pipeline to execute that code.Example:Pipeline contains parameter ‘type’, which contains information about class and assembly as shown in snapshot.UI customization using pipelinesEach step in pipeline is called a ‘processor’. Pipeline call the ‘Process’ method from class. Whatever functionality you want to achieve can be written in ‘Process’ method.For Example:In this scenario, Pipeline class is inheriting ‘HttpRequestProcessor’ and overriding its Process method to achieve some functionality.Now code has been written, we have to add pipeline in ‘web.config’ so it could execute. We have added our custom pipeline next to step, where we want to it be executed.So with just a few lines of code and configuration we can consume benefits of pipeline architecture and perform our custom actions.Have a great day and enjoy coding !!

Confessions of an introvert

almost 5 years ago | Ben Gilles: Ben Gillies

I remember you though. I was really impressed by your story and your vision of where you want to take the company. Selling myself is not my strong suit, so I must have seemed pretty funny handing you my card and mumbling something about getting coffee. The thing is, once you get to know me, I’m a pretty funny and personable guy. Hell, I love to have a good laugh and hang out to decompress – it’s really important to me too.Confessions of an introvertSeems to me like being an introvert is deeply unfashionable and uncool in the web industry at the moment. That sucks. It would be awesome if it changed. via TiddlySpace [source]

Cookies in Javascript

almost 5 years ago | Eduard Moldovan: eduardmoldovan.com - tech

I am back to using cookies in javascript again, so here is a little write-up about how to do that wit cookie.js