Tag Archives: dev

Things everyone should know about responsive images and srcset

The aim of responsive images is to deliver the same image in mobile and desktop view without disturbing the viewport size that is the image should look alike in every device .

Therefore this problem of responsive images can be solved by using srcset attribute in image tag or using media queries.

Both are suitable to deal with this situation but prefer to use srcset instead of media queries because media queries will take time to write but srcset does the same thing in small time and space .
The information below will explain all about srcset .

srcset
The srcset attribute is listing different resolutions of the same image from which the browser chooses the best fitting image source before loading it.
Example: srcset="ninja-1000w.jpg 1000w, ninja-500w.jpg 500w, ..."
To calculate this, the browser assumes the image fills up the full viewport width (100vw) by default, which means it uses the full width of the browser.

In short, Srcset is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types.
The usage is really simple, you just provide a lot of different images separating them with a comma like this:

<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">.

Here is an example:

srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

Descriptors are just a way to show what kind of image is coming from the resource. There are various kinds of descriptors:

  1. density descriptor–> srcset=”image.jpg, image-2X.jpg 2x” The display density values—the 1x, 2x, etc. are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x.
  2. width descriptor –> srcset=”image-240.jpg 240w, image-640.jpg 640w”.
    When using the w-descriptor we have to specify the default explicitly by adding a second srcset image option, with its own w-descriptor, and separating them with a comma.
  3. size descriptor–> It only makes sense if you use width descriptor.
    srcset=”image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w” sizes=”(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px”>.
    The instructions for the browser would look like this: (max-width: 480px) 100vw — if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width.So it is like using media queries in html which looks a lot easier as compared to media queries written in css .

Pros–>
1.much easier than media query
2.saves time

Cons–>
1.Browser should be updated to see the effect
2.Not all browsers support this.
At present, Edge, Safari, and iOS Safari only support a subset of the srcset specification. Firefox, Chrome, Opera, Android Browser, and the forthcoming versions of Safari and iOS Safari fully support it.

Demo can be seen on my github link

pershantgoel.github.io/imgsrcset

Test Driven Development with SpringBoot+Junit

 

Test-driven development(TDD) in the Spring framework.

TDD  helps me speed up my software release cycles, and ensure that I end up with a high-quality product. Spring makes Java enterprise development much easy.  Spring Boot, which we will use in this blog, is a project that does this task with excellence.

Follows are the steps to configure your spring boot framework with the Junit and Maven.

Step-1)Set up Spring boot with J-Unit testing Approach

After Set your maven dependencies , for spring-boot add following dependency for testing Approach.

<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.4</version>
<scope>test</scope>
</dependency>

<dependency>
<groupId>org.springframework.restdocs</groupId>
<artifactId>spring-restdocs-mockmvc</artifactId>
<scope>test</scope>
</dependency>

Step-2)Create test Package and in that ,create DemoApplicationTests Class.

Step-3)Inject controller using @InjectMocks, Inject repository using @Mock Annotations.

Let us take some J-Unit Annotations used in java class :

@Before:@Before annotation are executed before each test.

@After:It executes after each test.

@BeforeClass: It executes common operation before each test,So it executes  only once before running all tests.

@AfterClass: It executes common operation after each test, So it executes only once after running all tests.

@Test:The Test annotation tells JUnit that the public void method to which it is attached can be run as a test case.

In JUnit 5, the tags @BeforeEach and @BeforeAll are the equivalents of @Before and @BeforeClass in JUnit 4.

Configure Java File and Select Run as Junit and Test the file.

 

Congratulations!!!you are done with your TDD approach.

Eclipse not auto-configuring/auto-importing a Git mavenized project

I was trying to setup a maven project in eclipse via GIT. I had hoped, it will auto import the project into eclipse, but for some reason that did not happen.

 

This is what was done as a workaround:

Step:1 Checkout your repository in your system

File->import->Git->Project from Git->Clone URI->Enter Git Repository Details

Select Destination where you wanted to store your Git Repository

Step:2 Import your Project into Eclipse

File->import->maven->install or deploy an artifact to a Maven Repository

Once these steps are done, The project is browsable in eclipse!

Some Helpful Git Commands for the commandline:

git init — Initialize your directory with git.

git add FILE and git checkout — FILE To stage/unstage a file

git commit— To save your changes. This commit will be local

git stash and git stash pop — Stashes are back

git reset HEAD –hard Revert all your local changes

git log— Access all the history in the repository

git rebase –You can squash all the commits! (one should be carefull with this one)

git branch –You can create local branches,But keep the history linear

Hope this workaround and the commands are useful to a new user.

Creating a new git project on xp-dev.com with IntelliJ!

Meta Steps, YMMV…

1/Select what you need from Spring INITIALIZR :: https://start.spring.io/
2/Download/Extract the zip && cd into it.
3/Create a git repo on xp-dev.com
4/Initialize Git repo:
a)git init
b)git add .
c)create .gitignore
d)git commit .
e)git remote add origin https://xp-dev.com/git/
f)git push -u origin master
5/Open IntelliJ
a) checkout https://xp-dev.com/git/
b) Goto Maven Projects and add the pom.xml(if not picked automagically by IntelliJ
c)Do deploy, I got a failing unit test, as I added spring-tests.

What Elon Musk can learn from Java App/Cloud Deployments!

I had an unproductive day yesterday!

I did nothing, but slept through most of the day. And then late night this next challenge of deploying the hush-hush java app over the cloud started to bother me.(afterall it was not a totally unproductive day, thinking wise!)

And then, flash back to a few days, where comparisons were made, what I am doing (javascript ehew!) and what one of the current top living inspiration in the current world Elon Musk is doing, and then I went into sad slumber!

Then yesterday happened, and then it clicked:: we Java devs(web ones, not hard core jdk ones) are orchestrating everything in lifecycle of what Elon Musk is trying to do!

Here is the analogy(it can be extended wonderfully!):

  1. The WAR(Web ARchieve)(sorry, I am old fashioned) is like the unmanned space ship.
  2. The dev JVM is like simulated Mars environment.
  3. The cloud is the SPACE where the bits travel to-and-fro in form of data/packets.
  4. The machine IP Address is like the lat/long of where you want to deploy.

So my current app is in its final integraton phase(hush-hush…) and I am trying to accomplish Slide Driven Development.(nice term!).

Slice Driven Development :: A development approach where a feature/flow is shipped to staging environment as soon as it becomes usable.

Currently I(with @explorer) are trying to integrate all features/flow of the hush-hush app, While I am totally unsure/unaware how it will behave when deployed on staging/production environment. Therefore, I had come up with this approach :: The momemt a feature becomes bug-discoverable, it ought be shipped so that:

  1. Move to the next flow..
  2. Bugs can be quashed..
  3. (most imp)Our path of going from dev–>staging–>production for any feature should be seamless and smooth like  skating on butter!

And then, a Eureka moment happened!! And this blog post came about!

Your Takeaway: If you are on a team working with Elon Musk(or anyone trying to transport stuff from place X to place Y, in an unsure environment), you can leverage from the experience of thousand if not millions of deployments of web java developers trying to deploy WAR file formats from local dev JVM to production JVM.

We know the nuances of this lifecycle!

It might save you some time! 🙂

Java EE 9 Survey ~ Technology has gone Democratic and Political(rant!)

If you are in the Java ecosystem, please fill out this survey.

After you are done laughing and wondering what you just saw, I will pen down my thoughts and serious objections to the way they are doing the survey.

Here are a few things asked, which I think are absolutely unnecessary, humorous to ask in a tech survey:

  1. How important is Eventing support for the next generation of cloud and microservices applications?

    • Is there any application which does not have eventing? Is there any application that has only Eventing support system??
  2. The current practice of cloud development in Java is largely based on REST and asynchrony

    • So cheeky statement!
  3. Application development style is changing…

    • This is happening for the first time in history of mankind!
  4. How important is HTTP/2 for the next generation of cloud and microservices applications?

    • What if it is important and then What if  a newer protocol/standard comes?
  5. How important are the new features proposed in JSON-P for the next generation of cloud and microservices applications?

    • How many people are aware of these concepts?
  6. The databases may be used as replacements or additions to standard RDBMS storage

    • ha ha ha ha ha ha ha!
  7. Should we standardize a Java EE application configuration API?

    • no let United Nations drive this initiative.
  8. In the Cloud, failure of application instances and services are inevitable

    • Truth statement, not a survey question!!!
  9. Should Java EE introduce a mechanism to communicate the health of the cloud application to the cloud infrastructure?

    • umm.. why just health? why not a cumulative health parameter listing?
  10. Current trends talk about building ‘stateless’ applications and services, but the need to store some state exists nonetheless

    • why NoSQL did not happen yet?
  11. To be successful, many microservices need a scalable, fault tolerant state management solution

    • someone tell me how Oracle defines a micro service?
  12. Should Java EE investigate standards for state management? Should Java EE 9 investigate how to package a set of microservices together?

    • Let some federal body do the investigation? Is modules dead??
  13. The Java EE runtime components could provide an “embedded” API

    • what on earth is an embedded API? some kind of zombie api??
  14. We could enhance key Java EE APIs such as JAX-RS to better handle these technologies.We could integrate JCache with the Java EE platform

    • so kind of you!
  15. We could define a secret management facility suitable for a cloud environment

    • there oracle’s way of management is *secret*… Where on earth are Sun Microsystems engineers?
  16. How important is MVC API for the next generation of cloud and microservices applications?

    • (scared of the spring tools?)
  17. How important is the Management API, as proposed in JSR 373, for the next generation of cloud and microservices applications?

    • So there will be a mgmt api and a secrets management api! I already  like Oracle!
  18. How important is the continued evolution of the JMS API for next generation Java EE applications?

    1. wow! That is so political, stop working on something just because there is little traction… Does not happen in tech guys!

This is my opinion. Could be utterly wrong or out of context.

But Dear World, use democracy judiciously, by indicating you are a a thought leader, do not sit on the general opinion and say you created a standard. A standard creation needs long term vision and astute conformance that a chosen approach would suffice for years to come!(Java is 20+ years already no?)

(Here is an aside…)

It is like you have your food daily on the dining table, its a standard. What you are saying, hey our neighbors are here for couple of days,they have trouble walking, why don’t we have the food daily in the bed itself?So let’s ask everyone if its okay to have food in the bed daily? Let’s ascribe whether we can have chow mien while we are still  in bed?

So please STOP taking opinions and start taking a firm stance and start defending it to your core.You all are at the top of your game so when are you going to put to use of that knowledge? And if something is wrong, humbly accept that for the betterment of the standard. You all sound like a group of politicians gathered to sit and harp on majority public opinion.

Now is the best time for all the smartest minds of the world to forge and take charge and establish standards that are the outcome of their experiences, and not just there to please the majority public opinion. What is correct as per their experiences should be put forth and debated as standards. Not whether X should be a standard or should Y be the standard. What is the use of your expertise then?

Please get back to being engineers and not just tinkerers!

Talking to mysql on Bitnami google-cloud Tomcat instance

The Java deployment world is plagued with infra issues! Things we need to take care of:

  • Apache
  • Tomcat
  • RDBMS
  • Firewall/Ports
  • Shell accesses
  • Security/Encryption/Keys
  • File System Storage
  • Indexes corrupting and the list goes on…

So after my failed attempt to understand/decipher CORS issues on the AWS platform, I fortunately stumbled on google-cloud! And it is one hell of a bouquet of services for us petty and dev-ops-complaining Java folks!

So churn out a bitnami tomcat instance and you get the feel of the aws thing. For over a month now my google cloud app was(still is) talking to the mysql instance on aws, before that starts to drain my mini wallet, time to configure a mysql instance on google-cloud. And here are the steps:

  1. Have access to the SSH into your google cloud instance working
  2. Create following script (/home/bitnami/mysql-init):
  3.  UPDATE mysql.user SET Password=PASSWORD('NEW_PASSWORD') WHERE User='root';
     FLUSH PRIVILEGES;
    
  4. sudo /opt/bitnami/ctlscript.sh stop mysql
    
  5. sudo /opt/bitnami/mysql/bin/mysqld_safe --defaults-file=/opt/bitnami/mysql/my.cnf --pid-file=/opt/bitnami/mysql/data/mysqld.pid --init-file=/home/bitnami/mysql-init 2> /dev/null &
    
  6. sudo /opt/bitnami/ctlscript.sh restart mysql
  7. Remove the script in step 2.

So it turns out to get mysql talking on your bitnami instance you only need to reset the password.

Further to enable remote access do this in

/opt/bitnami/mysql/my.cnf:

  •  #bind-address=127.0.0.1
    

Next to enable remote mysql access via workbench you need to enable firewall ports to allow connections for tcp 3306 for a specific ip on your google cloud instance.

And there you go, you have a lot powerful config, much like aws ready to be used, backed by google!!

 

 

Javascript muggles don’t mess with Java’s strong type def structure!

Yes, this is going to be a rant post!

If you are in sync with the recent developments happening in/around open jdk you might have come across the JEP-286 | Local-Variable Type Inference

This JEP has been authored by none other than Brian Goetz and endorsed by Mark Reinhold himself(Yikes!).

I will straight away come to the points why I(no-one) vehematically (n:vehement) oppose this improvement!

  1. Code is read more than just written.
  2. There is max context when someone is writing an implementation for a method! All context needs to be dumped then and there. By bringing in this change, all this context will be lost for ever!
  3. This change introduces the idea of “I know its suppose to return X”, there will be no way to verify the claim, except the compiler-interpretation.
  4. Such changes belittle the language semantics! Well remember this: Milk of a lioness can be held in a gold container only else it goes sour! Java respects this semantics as of now! (Its really cool!).
  5. You can leverage power of automatic type suggestions while one is on RHS of the equation/statement, which has given a great boost to the language via lambdas. LHS *has* to be clearly defined.

Following are demo videos showing how easy and quickly one can do an alt-enter in your favorite ide and have the LHS of the assignment automagically inferred!

1/Simple example from the JEP

 

2/Complex examples using files from the same JEP

local_var_file

 

There are couple of surveys seeking public opinion on the same here are their links:

  1. Survey 1
  2. Survey 2

Finally, if you have seen Mark’s Java 9 intro speech, he starts off by talking about

1/No copy pasting a feature from any language just because its cool!

2/ Readability:

This JEP is not only killing Readability, but its not consistent across the language.!? There goes universality and compatibility into the garbage collector!

Let’s just keep evolving without giving up the things that make Java really stand strong on its feet! #DieJEP286

Debugging JSP Request/Session Variable

Of all times debugging jsp code is the most challenging of all times to me that anything else.

And for that, I came across the linked jsp and the following code snippet in the footer jsp of the application:


      <%@include file="/WEB-INF/jsp/debug_session.jsp"%>

keep the debug_session.jsp as per the path defined in the above snippet.
To check all request & response variable while developing, just update the current url as:

  
http://localhost:8080/context-path/login.jsp?debug=jsp

And you can easily check all variable without trying to search them in the request object on your IDE, while debugging!

Here is the debug_session.jsp

~rohit.

The social media thing!

Recently at work, I was given the task of implementing social engagement buttons for the likes of Google +1, Twitter, Facebook, LinkedIn.

And the successful implementaion was in two phases.

The first phase: Installing/Configuring the scripts for inclusion and second was testing them out!

Here comes the comparison of their usage:

Ease of finding share buttons.

Here LinkedIN fared last(it took me some time to reach the actual page)), while facebook came second last(it was simply not intuitive to see what changes were getting affected) and google just beat twitter for better placement of the generated script.

Basis: Easy finding + Instant display of customization + Zero extra effort.

Size of included JS

Here FB was last with 100+KB of script, while other three were quite okay, seemingly under 29KB all three combined.

Basis: Don’t know why FB is pushing so much client side javascripts?

Ease of understanding the tag’s

Here the clear winner is twitter, as they simple do a script include and use an anchor tag! It can not get simpler than this. Google came second by making it complex by adding their own custom tag. FB was ugly, while LinkedIN was pathetic, as there was not handle that I could find in their code!

Basis:I am a non-UI guy, so and anchor tag + js include sounds like I am at home!

Alignment on the UI

Twitter and Google fared quite well here, as placing them in a span/div tag, did not distort their buttons, whle FB and LinkedIN folks seems to have done a sloppy job here. Try putting a div around them and you might see their button’s vanishing at times!

Basis:I should be given complete freedom to place the button’s where I like’em.

Getting them to work!

All 4 of these scored 0 on this front. I wasted one whole day trying to figure-out the reason for these tag’s not working on localhost. Surprisingly they require a live public url for them to work fine!

Very dis-appointing!

Basis:I suppose I should be able to test on local how these buttons look for testing!

After getting them to work!

Al most all of these have a bug that if I delete the publicly promoted link/url/etc, the count does not seem to come down accordingly.Strange, but true.

No – Thank You!

For incorporating all of them I had to create a new id and register. I am glad I did it that ways, because LinkedIN was all over me pouring all their corporate tie-ups link/spam/trash all to me and making me a subscriber by default. Also reading the fine print LinkedIN seems like they are selling all infromations to 3rd party affiliates without a clear consent!

Going through FB and twitter settings was also a pain, did not go through details on +1!

Basis: No thanks for the spam!

The inclusion codes for each of these are available on these sites:

1/Google +1 2/Twitter  3/Facebook 4/LinkedIN

Well after checking out the code on a live public url, I suppose the feature would easily come out, but this was an interesting learning experience about how do folks at big public organizations code!

Twitter seems to be leading in this front by keeping it really simple!

~rohit.