Month: July 2013

Setting up Spring web-project on IntelliJ using Maven

alfasin, , Leave a comment

Till yesterday I used eclipse when I wanted to work with the combination of Spring-web/Maven projects. To be more exact I was using STS which is a version of eclipse called Juno (if I’m not mistaken – but if I do – please correct me) that comes with the relevant plugins already installed (Spring and Maven’s jars for example) and it wears an ugly green skin. It also comes with vFabric server which is a web-container (like Tomcat) that was made by VMWare, which bought Spring in order to leverage Spring to push their products.

Now, if there’s an IDE that I hate – that’s Eclipse. It’s just so slow and buggy… You can spend a couple of hours on something that doesn’t work just to find out that if you create the project from scratch – everything’s peachy, and no, clean/re-built/restart/computer-restart wouldn’t have fixed it…

If IntelliJ wasn’t an option I would definitely choose Netbeans which is the fastest Java IDE I’ve experienced, but intelliJ is a tool you fall in love with…

So yesterday I decided that I’ve had it, and that I’m migrating my Spring projects to IntelliJ. In case you have an existing Maven project – it’s really easy to import and start working, but then I tried setting up a project from scratch, and after fighting with it for a couple of days I finally found out how to do it (by the way, I read a few other posts in regards which didn’t help…). I know, it should be easier and that’s a couple of black-points to JetBrains, but the effort was worthy!

In order that you won’t have to go through the same painful experience which I did, here’s a short guide on how to set up a Spring Web environment on IntelliJ. So without  a further adu:

1. create a new project from scratch

i1

2. select “Maven module” as a type and click “Next” after filling out the project name and path

i2

3. check the option “create from archetype” and choose “maven-archetype-webapp” from under “org.apache.maven.archetypes”. If you don’t have that option go to step 4, otherwise you can skip it and go directly to step 5.

i3

4. In case we didn’t have the archetype, we’ll click on “add archetype” and add it manually as follows:

GroupId: org.apache.maven.archetypes
ArtifactId: maven-archetype-webapp
version: RELEASE

i4

5. before you click on “Finish” check if the parameter M2_HOME is defined, if not, you can define it as an environment variable, or alternatively you can set it up right here:

i5

6. once you click “Finish” a pom.xml file will be generated and some, other stuff will run on your screen, you should also see the following option to enable auto-import for Maven projects – click it!

i6

7. goto “edit configurations”, click on the “+” button and choose the local version of Tomcat

i8

i7

8. Name your server, check the option to “Build artifacts” and click on the “…” right next to it. Choose the .war file and continue

i9

9. go to the “deployment” tab and click the “+” button to add an Artifact. Again, choose the war file

i11

i10

10. That’s it – we’re done! If you’ll expend your project you should be able to see something like the following screenshot.

i12

Click the green “Play” button and after Tomcat starts, you should be able to view “Hello World” jsp version on localhost

i13

Setting up Spring web-project on IntelliJ using Maven

Front-end development

alfasinLeave a comment

I got to start by saying that I am not a front-end developer.
That said, today, when there are so many available web-stacks, it becomes inevitable to handle at least a bit of UI.

On this post, I’ll share some info that’ll help you on your way to become a front-end developer, so let’s begin:

Learn CSS!

Learning HTML is not very complicated but if you know nothing about HTML you should probably start there… I assume that you have some familiarity with HTML and that’s why we started here. CSS is a very good practice of separating styling from content. There are many web-sites that will teach you CSS and it’s very easy to Google something you’re looking for, but, if you really know little or nothing at all in regards, I recommend a course called “30 CSS Selectors You MUST memrise” in a beautiful website: memrise – a wonderful free site (there’s also a mobile app) that’ll teach you anything from languages and history to art & literature and much more. In order to dynamically change CSS on the page (and see the result without switching to the editor back and forth and refreshing the page) I highly recommend using LiveCSSEditor – a plugin to chrome which I can’t live without!

Another two plugins to Chrome I find very useful are: MeasureIt! and ColorZilla

Javascript & jQuery

Codecademy is another awesome web-site for self-education, here you can study the basics (and more) of both Javascript and jQuery. This is critical since there’s no other way to manipulate DOM elements after creation, and in fact, whenever you hear the buzz-word HTML5 it refers to Javascript!

In order to debug JS/jQuery on-page I used to use a Firefox plugin called Firebug (which is awesome!), but today I use Chrome and the same developer-toolbox is available in Chrome by pressing F12. Two relevant tabs are “sources” – which allow you to add breakpoints, inspect objects etc, and “console” which enable you to view errors in the code that ran as well as to write a Javascript/jQuery expression and see what it evaluates to. Another good resource for JS is mozilla.

Performance

Google’s PageSpeed add-on to Chrome and Firefox’s YSlow! are two excellent extensions to test the performance of your web-page. Both supply a list of recommendations which, in case you decide to implement, will improve the loading speed of the page. Two websites that offer the same analysis are the famous Pingdom and webpagetest. TMO, you should use more than one tool to have a good coverage. That said, you shouldn’t get too obsessive with the performance grades.

General

Firefox still has two plugins that I really like:

  1. Tamper Data is a great tool that helps viewing the parameters that were submitted/received, usually via. forms (HTTP calls). If you want to dive deeper into lower levels of protocols like TCP/IP you’re welcome to installWireShark (previously called: Ethereal), but as a web-developer you’ll probably find yourself using only the filters HTTP/HTTPS anyway.
  2. I use Poster mainly to debug REST calls which are usually less of a “UI thing” and considered more as “back-end”. But, if you use AJAX to fetch information from the server you might find this plugin helpful.

If you’re interested in SEO perspective, there are toolbars like seoquake and sites like http://www.seositecheckup.com/  and http://www.hubspot.com that will provide a detailed analysis of your website.

keep learning!

You can do this by subscribing to weekly newsletters like Javascript weekly, online courses, reading blogs (you can search for relevant information via. redit and Hacker News), following pros on Twitter and asking questions on stackoverflow (make sure to answer some questions as well – give back to the community!)

Do you have a plugin/extension/web-site you found useful ?

Front-end development