Codable — the Swift way

Content posted here with the permission of the author Shirish Bankar, who is currently employed at Josh Software. Original post available here

We have always spent hefty amount of time to parse and format a JSON response to our views and same amount of time again to collect data from there and create a JSON key by key to post to server. It was the traditional way until Apple gave us JSON Codable protocol at WWDC with Swift 4. An elegant way to parse and create JSON to and from models equivalent to the JSON hierarchy.

Swift Codable protocol has offered following things to us :

  • Using Codable, we can model JSONObject or PropertyList file into equivalent Struct or Classes by writing very few lines of code. We don’t have to write the constructor for the properties in the objects. It’s all handed by Codable. We just need to extend our model to conform to the Codable, Decodable or Encodable protocol.
  • Mismatch between the strong data types of Swift and loose data types of JSON has been internally handled by Swift compiler. We can now handle Swift Data types like Date, URL, Float etc
  • Complex JSON can be modelled easily using Nesting Structs for readability.
  • Parsing actual JSON become one-liner using JSONDecoder

For instance we’ll use below JSON :

{
  “username”: “shirish@joshsoftware.com”,
  “id”: 628593,
  “profile_image”: “https: //josh.intranet.com/shirish21790.jpeg", 
  “designation”: “senior ios developer”, 
  “name”: “Shirish Bankar”, 
  “company”:” [“Deskera”, “MangoApps”, “Josh software”]”, 
  “personal_info” : {
  “dob”:”21–07–1990",
  ”blood_group”: ”bpositive”,
  ”marital_status”: ”married”,
  ”contact”: ”8669005821" 
  }
}

Now to parse this JSON we’ll create following struct.

struct EmployeeInfo {
 let username: String?
 let designation: String?
 let id: Int?
 let profile_image: URL?
 let company: [String]?
 let personal_info : PersonalInfo? 
}

Here profile_image is of URL type in our struct and in JSON its a string. Now conforming to Codable protocol will take care of this type mismatch. Here we also have a type PersonalInfo which will become another struct to create a hierarchy and conforming it to Codable will parse data into it too along with EmployeeInfo. Also, notice few constants are declared as camel case which is not Swift standard convention. To take care of camel case we declare CodingKeys enum and tell to use snake case for Swift constant and camel case for JSON. Our final struct will be like :

struct EmployeeInfo: Codable {

    let username: String?
    let designation: String?
    let id: Int?
    let profileImageUrl: URL?
    let company: [String]?
    let personal_info : PersonalInfo?
    
    private enum CodingKeys: String, CodingKey {
        case username 
        case designation
        case id
        case profileImageUrl = "profile_image”
        case avatarUrl = "avatar_url”
        case company
        case personalInfo = "personal_info"
    }
}

Parsing JSON with Codable

guard let apiUrl = URL(string: "https://api.getMyJSON/shirishInfo?") else {
    return
}

URLSession.shared.dataTask(with: apiUrl) {
    (data, response, error) in guard let data = data else{return}

    do {
        let decoder = JSONDecoder()
        let myData = try decoder.decode(EmployeeInfo.self, from: data)
        print(myData.username)
    } catch let err {
        print(“Err”, err)
    } 
}.resume()

We have parsed our JSON data (supposedly) received from the api url. We can access all properties using myData variable.

Now the reverse procedure :-

Creating JSON from your struct :

let encoder = JSONEncoder()encoder.outputFormatting = .prettyPrintedlet data = try encoder.encode(myData)print(String(data: data, encoding: .utf8)!) 
//** This is our json **//

Thats it we can use JSONEncoder to create JSON to be sent to server this easily . So this is the real magic behind Codable .

Advertisements
Posted in General | Leave a comment

Learnings from first solo talk at RubyConf TH

Content posted here with the permission of the author Shweta kale, who is currently employed at Josh Software. Original post available here

I spoke at International RubyConf alone for the first time and it is one of the best experience I ever had at a conference.

It all started few years back when I joined Josh. We had to deliver internal talk and I realised my biggest fear is Public Speaking. I decided to overcome this fear therefore I delivered two talks at RubyConf, first was lightening talk and second talk with a colleague. Now I wanted to move ahead and give solo talk!

I submitted CFP at few of the conferences but it didn’t get selected. I thought it’s not my cup of tea but every time I attend conference the question I used to get from my dad was when are you going to speak at conference? At Josh Software we had a great session on Goal Setting early this year and we all were asked to publish our Goals on internal channel. One of my Goal was to speak at conference and take my parents along with me. Publishing your Goals in your team really helps. Once you publish the Goal you work towards achieving them! I have already achieved 50% of the goals which are supposed to be completed in next 5 years.

In this blog post I will highlight few of the learnings from my first solo talk!

Practise your talk in front of mirror

When you practise your talk in front of mirror you realise what needs to be improved! So always practise your talk in front of mirror.

Record your talk while practising

Recording helps you to analyse your talk on your own! I had recorded my talks 10 times and when I listen first recording and last recoding it had improved a LOT.

Time your talk

Time your talk so you can add/remove few points if required.

Have presenter notes ready

All the tools has facility of presenter notes and when you present your talk you can see those notes on your screen.Those notes are there to give you confidence. I was always worried what if I get blank on the stage? But after adding notes I was bit relaxed as I had feeling that there will be some one who will remind me if I get blank. Though I didn’t use these notes at conference but surely it boosted my confidence!

Check license of the image before you use it

We always tend to add images in our slides because it makes easy to keep audience in sync. But few images are not allowed to be used so always check licence of the image before you use it. Your talk gets recorded so never forget this.

Talk slowly

Talk you are going to deliver is new for most of the people in audience. Audience take some time to figure out what you are talking so talk slowly and repeat your important points twice.

Never read the slides

If you read the slides you loose attention of the audience so never read your slides. Your slides should have highlighted points only. If your slides has more content, audience will start reading it which will distract them.

Look at the audience when you talk

This helps keeping audience engaged in your talk rather than phone 

Make friends before conference start so you have few known faces in the audience

At the time of RubyConf TH There was a cruise dinner arranged at chao phraya river. It was a excellent idea as all speakers got chance to interact with. I knew few of them from DeccanRuby Conf and RubyConf India but many of them were new faces to me but throughout the cruise I didn’t feel like I am new here. Thanks to awesome ruby community. Made some #rubyfriends during this party 

Because of this I had few known faces in the audience which helped me for my own moral support.

Have some punch in first 3 minutes of your talk.

It helps you to get comfortable on stage. In my talk I didn’t have many punches. But when I started the demo of my talk there was laughter and claps from audience at one place. Which gave me some time to cool down and made me comfortable on stage.

Give demo of your talk in front of group of people you are comfortable with, for example meetup

I had given demo of my talk to Josh team. I got really good feedback/ tips from the team also got confidence.

Have backup plan if your laptop crashes

I was all set for my talk and just before I travel my laptop crashed And Apple store said it will take 3-5 days to diagnose the issue. So I had to recreate my presentation. I managed to do it in time. So always keep back up plan ready! Mail slides and PDF to your self and keep it in pen drive.

If you have fear of public speaking start with lightening talk

Many of the conferences has concept of lightening talks. This is a great stage to start with. You get chance to speak in front of many people. Also these talks get recorded. So you can see video later and Enjoy your talk. Also you get chance to learn from mistakes you have made! I had delivered my first lightening talk at DeccanRuby Conf. Timing for these talks are from 3 to 5 minutes.

Don’t give up if talk is not selected

Yes it happens. My 7-8 CFP’s got rejected (different topics) before this selection. But in every conference there are 100’s of CFPs and selection committee has to choose around 10% of the CFPs. There are chances that similar talk was delivered in earlier edition of the conference or there are few better topics than your. So never get disappointed if talk is not selected. Keep trying another conference might be waiting for you!

Submit same talk at multiple conferences

If your talk does not get selected at one conference, it might get selected in other one. I met one person at DeccanRuby Conf whose CFP was not selected at RubyConf TH but got selected in some other conference where mine was not selected. So it totally depends on what kind of topics conference demands.

My first solo talk went well. A lot of people came up to me to say that they liked the talk. It was all very overwhelming. Here are photos with all the attendees.

It was an amazing conference. This was first edition of RubyConf TH – Awesome venue, amazing people, cruise party. Kudos to organisers and volunteers for pulling this off.

You can find slides of the talk here.

Big thanks to Josh team for valuable feedback and conference budget 

🙂

Posted in General | Tagged , , , | Leave a comment

Data Race Detector in Golang

Content written by author Rahul Shewale, who is currently employed at Josh Software.

As we know, Golang is a powerful programming language with built-in concurrency. We can concurrently execute a function with other functions by creating goroutine using go keyword. When multiple goroutines share data or variables, we can face hard to predict race conditions.

In this blog, I am covering following points

  • What is data race condition and how can it occur?
  • How can we detect race conditions?
  • Typical Data Races examples and how can we solve race conditions?

What is the data race condition?
A data race occurs when two goroutines access the same variable concur­rently, and at least one of the accesses is performing a write operation.

Following is a basic example of race condition:

package main
import (
    "fmt"
    "sync"
)
func main() {
    var wg sync.WaitGroup
    wg.Add(5)
    for i := 0; i < 5; i++ {
        go func() {
            fmt.Println(i)
            wg.Done()
        }()
    }
    wg.Wait()
 }
}


In the above example, you must have noticed we have invoked 5 goroutines and access i variable inside the goroutine, but here we faced data race condition because all goroutine read data from i variable concurrently and at the same time for loop write a new value into i variable.

Program OUTPUT:

5 5 5 5 5

How can we detect race conditions?

Now that we know what is a race condition, let’s dive into how to detect these conditions on your Golang project. So Golang provides built-in powerful race detector tools for checking the possible race conditions in program.

To use the built-in race detector you need to simply add -race flag to your go run command:
$ go run -race main.go

This command finds a data race condition in the program if any and print error stack where race condition is occurring

Sample Output
$ go run -race  race_loop_counter.go

==================
WARNING: DATA RACE
Read at 0x00c0000a8020 by goroutine 7:
  main.main.func1()
      /home/-/goworkspace/src/example/race_loop_counter.go:13 +0x3c
Previous write at 0x00c0000a8020 by main goroutine:
  main.main()
      /home/-/goworkspace/src/example/race_loop_counter.go:11 +0xfc
Goroutine 7 (running) created at:
  main.main()
      /home/-/goworkspace/src/example/race_loop_counter.go:12 +0xd8
==================
==================
WARNING: DATA RACE
Read at 0x00c0000a8020 by goroutine 6:
  main.main.func1()

Goroutine 6 (running) created at:
  main.main()
      /home/-/goworkspace/src/example/race_loop_counter.go:12 +0xd8
==================
2 2 4 5 5 Found 2 data race(s)
exit status 66

How can we solve it?

Once you finally find race condition, you will be glad to know that Go offers multiple options to fix it.

Rob Pike has very aptly stated the following phrase. The solution to our problem lies in this simple statement

“Do not communicate by sharing a memory; instead, share memory by communicating.” -Rob Pike

  1. Use Channel for data sharing

Following is a simple program where the goroutine accesses a variable declared in main, increments the same and then closes the wait channel.

Meanwhile, the main thread also attempts to increment the same variable, waits for the channel to close and then prints the variable value.

However, here a race condition in generated between main and goroutine as they both are trying to increment the same variable.

Problem example:

package main
import "fmt"

func main() {
    wait := make(chan int)
    n := 0
    go func() {
        n++
        close(wait)
    }()
    n++
    <-wait
    fmt.Println(n)
}

To solve the above problem we will use the channel.

Solution:

package main
import "fmt"
func main() {
    ch := make(chan int)
    go func() {
        n := 0
        n++
        ch <- n
    }()
    n := <-ch
    n++
    fmt.Println(n)
}

Here the goroutine incrementing the variable and variable value pass through the channel to main function and when channel receives data then main perform next operation.

2) Use sync.Mutex 

Following is a program to get the total number of even and odd numbers from an array of integers, numberCollection and store into a struct.

Following is a program to get the total number of even and odd numbers from an array of integers, numberCollection and store into a struct.

Problem example:
package main
import (
    "fmt"
    "sync"
)

type Counter struct {
    EvenCount int
    OddCount  int
}

var c Counter
func main() {
    numberCollection := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}
    fmt.Println("Start Goroutine")
    var wg sync.WaitGroup
    wg.Add(11)
    for _, number := range numberCollection {
        go setCounter(&wg, number)
    }
    wg.Wait()
    fmt.Printf("Total Event Number is %v and Odd Number is %v\n", c.EvenCount, c.OddCount)
}
func setCounter(wg *sync.WaitGroup, number int) {
    defer wg.Done()
    if number%2 == 0 {
        c.EvenCount++
        return 
    }
         c.OddCount++
    
}

Output:

 Total Event Number is 5 and Odd Number is 6

If program is checked by race detector flag then we notice line  c.EvenCount++  and line no 31  c.OddCount++ generate race condition because all goroutine writes data into struct object concurrently.

Solution:

To solve this problem, we can use sync.Mutex to lock access to the struct object as in the following example:

package main

import (
    "fmt"
    "sync"
)

type Counter struct {
    EvenCount int
    OddCount  int
    mux       sync.Mutex
}

var c Counter

func main() {
    numberCollection := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}
    fmt.Println("Start Goroutine")
    var wg sync.WaitGroup
    wg.Add(11)
    for _, number := range numberCollection {
        go setCounter(&wg, number)
    }
    wg.Wait()
    fmt.Printf("Total Event Number is %v and Odd Number is %v\n", c.EvenCount, c.OddCount)
}
func setCounter(wg *sync.WaitGroup, number int) {
    defer wg.Done()
    c.mux.Lock()
    defer c.mux.Unlock()
    if number%2 == 0 {
        c.EvenCount++
 return 
    } 
        c.OddCount++
   }

3) Making Copy of variable if Possible 

Problem example:
package main
import (
    "fmt"
    "sync"
)
func main() {
    var wg sync.WaitGroup
    wg.Add(5)
    for i := 0; i < 5; i++ {
        go func() {
            fmt.Printf("%v ", i)
            wg.Done()
        }()
    }
    wg.Wait()
}

In the above problem, we can see five goroutines invoked in for loop and access value of i  from the goroutine. Every Goroutine is called asynchronously and goes to wait state until the for loop is completed or any block operation is created.

After for loop execution is completed all goroutine will start execution and try to access i variable. This will result in a race condition.

For this problem,  we can easily pass copy argument to goroutine and every goroutine gets a copy of the variable. As shown in the example, below we use argument j instead of accessing i from within goroutine.

Solution :

package main
import (
    "fmt"
    "sync"
)
func main() {
    var wg sync.WaitGroup
    wg.Add(5)
    for i := 0; i < 5; i++ {
        go func(j int) {
            fmt.Printf("%v ", j)
            wg.Done()
        }(i)
    }
    wg.Wait()
}

Conclusion:
The preferred way to handle concurrent data access in Go is to use a channel and use -race flag for generating data race report, which helps to avoid a race condition.

Posted in General | Tagged , , , , , , | Leave a comment

Async Action handling in Javascript

Content posted here with the permission of the author Pragati Garud, who is currently employed at Josh Software. Original post available here

As you know javascript is synchronous language. To deal with async operations javascript has provided three ways:
1] Promises
2] Async & await
3] Generator function

Promises: Whenever we ask for some async operation like fetching data from database, instead of waiting for that to get completed, javascript just returns you the promise, on that promise object you can add your success and error handler.

let promise = new Promise((resolve, reject) => {
    // do a thing, if everything is fine then resolve
    // otherwise reject
  })

  //Success handler executed on promise resolve
  promise.then((data) => console.log(data));

  //Error handler executed on promise reject
  promise.catch((error) => console.log(error));

if async operation that you requested is successfully completed then your success handler will get executed otherwise error handler will get executed.

Example: Suppose you want to fetch a list of users from database.(Note: I am assuming that you are aware about the `fetch` function and it’s error handling)

const fetchData = () => {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  })
}

fetchData();

In above code we first requested for users list to server using fetch() and it’s a async operation, so we will get promise as a result of this operation and I added success and error handler on that promise. The response returned by the fetch needs to be converted in the json format.

const fetchData = () => {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  })
}
fetchData();

here, we called json() on the response to convert that into json, and it is also a async operation that results into a promise. so here from success handler of one promise I am returning another promise called Promise chaining.


So in case of promise chaining, code will look like little bit confusing. hence ES7 comes up with the async/await

Async/Await: async/await is just a syntactical sugar to promise. it provides you the way that you can write your async operations which will look like synchronous. The async function always returns you the promise, even if you return some non-promise value from your async function, javascript just wraps it inside promise and then returns.

async function f() {
  // await works only inside async functions
  let value = await promise;
  return 1;
}

async function f() {
  // await works only inside async functions
  let value = await promise;
  return Promise.resolve(1);
}


await instructs the javascript that wait until provided operation gets finished. The same example that we saw using promises using async/await will be like:

const fetchData = async () => {
  try {
    let apiEndpoint = 'https://jsonplaceholder.typicode.com/users'
    let response = await fetch(apiEndpoint);
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}
fetchData();

here, I defined a async function and used await for my async operations, so javacsript will wait until it will get finished. if your async operation will get failed then await will throw the exception that’s why try catch is used.

Generator Function: It is a special kind of function which can stop it’s execution at a point and resume it’s execution from the same point later. Basically, it’s a function which can pause/resume on our demand.

function* generator() {
   // do something
   yield expression;
}

* after function keyword denotes that it’s a generator function. Inside generator function yield will get used, this is the point where execution of the generator function will get stopped and It will yield an object { value: result, done: true/false } to caller function. value contains the result of the expression given to yield and done indicates that collection on which you are iterating has finished or not(true/false).

Calling a generator function is different than our normal javascript function. Normal function just start it’s execution once we invoke that function. It follows Run to Completion model. But, When we call generator function it does not start the execution of the function body, it just returns you the iterator object on which you can call next() and throw()method. When you call first time next() method on the iterator object then it will start the execution of your function body.

Basic Example for generator:

function* generator() {
   yield 5+3;
   yield 7*2;
}

let it = generator(); // does not start execution of function body
console.log(it.next()); // { value: 8, done: false }
console.log(it.next()); // { value: 14, done: false }
console.log(it.next()); // { value: undefined, done: true }

we can use generator function for async operation handling. we just pause at our async operation and resume generator when that async operation will be done.

Example: fetching list of users from server:

function* fetchData() {
  try {
    let apiEndpoint = 'https://jsonplaceholder.typicode.com/users'
    let response = yield fetch(apiEndpoint);
    let data = yield response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

let it = fetchData();

// { value: promise returned by fetch(), done: false }

let promise1 = it.next().value

promise1.then((response) => {
//resume generator by calling next() as your async operation is   fulfilled now.
// we can pass values to generator from here. e.g response is accessible here but we need that in the generator, passed value will gets assign to response variable of the generator.
//{ value: promise returned json(), done: false }  

  let promise2 = it.next(response).value  

  promise2.then((data) => {
    it.next(data);
  });
});

Generator functions are fun and really a good concept. As Generator function provides power to caller to control the execution of the function, most of the libraries uses this concept to handle the async action.

Conclusion:

when to use which one ?

  1. Async/Await – when you want synchronous behaviour with async operations.
  2. Promises – when you want async nature. i.e. execution should continue while you wait for results.
  3. Generators – when you don’t want function to run to completion.

Posted in General | Tagged , , , , | Leave a comment

Using Rack::Proxy to serve multiple React Apps on the same domain.

Content posted here with the permission of the author Rahul Ojha, who is currently employed at Josh Software. Original post available here

Background

We had 4 React apps running on the local server. All apps were running on different ports because we can not start multiple React Apps on the same port. We had to build a single sign-on server. Out of 4 react apps one will be responsible for managing authentication and based on roles or department redirecting to other apps. The Auth app will get token from Auth API and will store it to local storage, and other apps will be using this token for authentication while calling APIs.

Problem Faced:

Now while calling API from any React app we need to send the token with it. Since the token is stored in local storage by Auth App which is using a different port so the local storage will not be accessible for other react apps.

You may think “Why didn’t you go with Cookies”, Yes cookies are shareable among HTTP ports but its size is very less which is 4 KB. So if you have to store permissions and anything else which is shareable and exceeding to 4 KB the cookies will not be useful.

Solution:

We will be using a single domain and will access different React apps using namespace in URL.

Example:

localhost:9292/app1 => app1 => localhost:3001
localhost:9292/app2 => app2 => localhost:3002
localhost:9292/app3 => app3 => localhost:3003
localhost:9292/app4 => app4 => localhost:3004

Here we need to use a reverse proxy server to do this. We will use Ruby Rack to create a proxy server. Why not use Nginx here? You can but there is a problem, React does not add namespace in the assets path so assets will not be loaded and you will see a blank white page always, and there is no way in development to add the namespace in asset path without ejecting CRA. If you have specified any value to homepage key in package.json file, then it will be automatically prefixed with assets path while creating a build in production mode.

So if you are Ruby developer then you are going to enjoy rest of the blog. But if you are not a Ruby developer there is no issue because Ruby is nice and easily understandable. You just need to follow the steps.

Step 1:

Install ruby
You can use below link to install RVM and ruby. RVM is Ruby version manager.https://rvm.io/rvm/install

Step 2:

gem install rack

Step 3:

gem install rack-proxy

Step 4:

Create a file ./proxy_server.rb and add below code.

require 'rack-proxy'
class ProxyServer < Rack::Proxy
 def rewrite_env(env)
  request = Rack::Request.new(env)  
  if request.path.match('/app1')
    env["HTTP_HOST"] = "localhost:3001"
    @port = 3001
  elsif request.path.match('/app2')
    env["HTTP_HOST"] = "localhost:3002"
    @port = 3002
  elsif request.path.match('/app3')
    env["HTTP_HOST"] = "localhost:3003"
    @port = 3003
  elsif request.path.match('/app4')
    env["HTTP_HOST"] = "localhost:3004"
    @port = 3004
  # The below line is important to load assets.
  # So it detects app name from the first request to the app
  # which is stored in an instance variable and redirects
  # to that app for assets.
  elsif request.path.match('/static') || request.path.match('/assets')
    env['HTTP_HOST'] = "localhost:#{@port}"
  else
    env["HTTP_HOST"] = "localhost:3001"
    @port = 3001
  end
  env
 end
end

Step 5:

Add a file ./config.ru and add below code

require_relative './proxy_server'
run ProxyServer.new

Step 6:

Run below command on the command line where you have stored above files. This command is responsible for starting your rack server.

rackup

Now your Rack server has started and ready do proxy pass. You just need to go at localhost:9292 and your default app which is app1 as per proxy_server file will be loaded to the browser. Port 9292 is default port defined for Rack server.

Conclusion:

By using Rack server you can run multiple react apps on the same domain in development environment with local storage and cookies shareable among all applications. This solution is not restricted to only React apps, it can be used for any other client-side frameworks too.

Posted in General | Tagged , , , , | Leave a comment

How to make image loading lightning fast on web and mobile App

Content posted here with the permission of the author Shivam Kumar Singh, who is currently employed at Josh Software. Original post available here

Since internet is born, we have come a long way in improving web page loading time. Faster it gets, better it is. Most time consuming part of loading web & mobile app is loading images. Therefore faster image load is major challenge today.

One of application we worked recently has lots of images to render. As number of images increased, loading time of application increased as well.

So to tackle this problem we decided to compress images. We were using ImageMagick with carrierwave for all the image processing and remote file upload. So we decided to compress the image using ImageMagick libraries to reduce the file size but it compresses the image at the cost of image quality. We can not compromise on image quality therefore we were looking for alternatives.

We came across webp format developed by Google — which uses both lossy and lossless compression. WebP lossless images are 26% smaller in size compared to PNGs.

Can you figure out size of below images by looking at them ?

https://www.dropbox.com/s/aes6q2vldawol2u/seeds-4306035.webp?dl=0 (Image 2)

Image 1 is of type jpg and Image 2 is of type webp.

Quality wise they look very similar, right ? But size wise Image 1 is 4 times larger than Image 2

Image 1 size is 2.8 MB while Image 2 size is 551 KB.

How to configure it for Rails Application

Considering we already have ImageMagick installed on our system.

We have to install libwebp, a library used to add WebP encoding and decoding to your programs. Before that

Download dependency for libwebp.

sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev

Download latest libwebp and extract it.

wget http://downloads.webmproject.org/releases/webp/libwebp-0.4.3.tar.gz
tar xf libwebp-0.4.3.tar.gz

Run the following commands to install libwebp.

cd libwebp-0.4.3/
 ./configure
make
sudo make install

Run following command on the console to confirm successful installation.

2.0.0p0 :002 > WebP.decoder_version  => "0.4.3" 
2.0.0p0 :003 > WebP.encoder_version  => "0.4.3"

Now we need to add carrierwave-webpgem which is Ruby wrapper for libwebp.

gem 'carrierwave-webp'

Now that we have all of our prerequisites out of the way, we are now ready to convert our image to WebP.

Customize Carrierwave uploader to generate images in webp format.

class MediaUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
  include CarrierWave::WebP::Converter   
   version :jpeg do     
     process resize_to_fit: [720, 450]     
     process convert: :jpeg   
   end  
 version :webp do     
   process :convert_to_webp   
  end 
end
 

So this way we have generated two different versions of images, one in jpg with given resolution (for fallback) and other in webp format.

Format Specific remote image URL

def return_url(poster, format)
  if poster.image.send(format).exists?
    url = poster.image.send(format).url
  else
    poster.image.jpeg.url //JPEG as fallback option.
  end
end

There are few limitations as well for webp

  1. Not supported in iOS and Safari client.
  2. More effective for substantially large files

Conclusion:

With Webp format, we decreased our images size by 4 times thereby increased page load speed. If you have any questions let us know in comments.

Posted in General | Tagged , , , , | Leave a comment

How is data secure over https?

https

STEP1: Client HELLO

STEP2: Server HELLO

STEP3: Server authentication

STEP4: Secret key exchange

STEP5: Client HELLO finished

STEP6: Server HELLO finished

STEP7: Data exchange

Thanks for reading and hope you learned something new. Feel free to comment if you have any suggestions or corrections.

Posted in General | Leave a comment