TIL from the Rocketship

TILJuly 17, 2019by Maxim Romanov

How to handle 401 unauthorized error in a Redux React application

In response to a client request, the server may return a 401 Unauthorized error. You must correctly catch it, for example, clear the state and redirect to the authorization page. To solve this problem, we wrote a custom Middleware which, in our opinion, is the best solution.


import * as actions from 'actions';



const authInterceptor = ({ dispatch }) => (next) => (action) => {

  if (action.status === 401) {

    dispatch(actions.removeJwt());

  } else {

    next(action);

  }

};

TILApril 22, 2019by Dmitry Sokolov

Integrate Drawer inside Stack Navigation in React Native

I wanted to use more than one navigation in a React Native app.

The documentation didn’t give a clear way to implement this.

Here is what you can do on purpose to add several types of navigation in your React Native app:




import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

import * as Screens from './screens/index';

import Drawer from './components/DrawerMenu';

import getDrawerWidth from './utils/scale';



const AppStackNavigator = createStackNavigator({

  home: {

    screen: Screens.MainScreen,

  },

  about: {

    screen: Screens.AboutScreen,

  },

});



const AppNavigator = createDrawerNavigator(

  {

    home: {

       screen: AppStackNavigator,

    },

  },

  {

    contentComponent: Drawer,

    drawerWidth: getDrawerWidth,

    headerMode: 'none',

  }

);



export default AppNavigator;



TILFebruary 25, 2019by Arina Shmeleva

How to add a line break to PostgreSQL?

You have to insert some data into your PostgreSQL table that has line break. As a result, the cell will look like this:


First line

Second line

To use "escape sequences" in a string literal you need to use an "extended" constant. You can specify the escape character by prefixing the letter E:


UPDATE posts SET body = E'First Line\nSecond line.' WHERE id = 2701;

TILMay 15, 2019by Alexander Spitsyn

Handling IP addresses using PostgreSQL

PostgreSQL provides a inet and cidr datatypes for storing net addresses and proceed operations with them.

Host address and it's subnet can be stored with inet, while cidr can contain only network address:


select inet '192.168.0.1/24';

      inet

----------------

 192.168.0.1/24


select cidr '192.168.0.0/24'; -- valid cidr

      cidr

----------------

 192.168.0.0/24


select cidr '192.168.0.1/24'; -- invalid: cidr must not be a host address

ERROR:  invalid cidr value: "192.168.0.1/24"

LINE 1: select cidr '192.168.0.1/24';

                    ^

DETAIL:  Value has bits set to right of mask.

In case there's no number after slash in cidr address the netmask is to equal 32:


select cidr('127.0.0.1');

     cidr

--------------

 127.0.0.1/32

The value above represents a subnet address, while the same value passed to inet represents a host:


select inet('127.0.0.1');

   inet

-----------

 127.0.0.1

Checking inclusion or equality can be performed with >>= and <<= operators:


select inet '192.168.0.1/24' >>= inet '192.168.0.0'; -- returns true

select cidr '192.168.0.0/24' >>= inet '192.168.0.0/12'; -- returns false

select cidr '192.168.0.0' >>= cidr '192.168.0.0'; -- returns true

And getting a netmask by a net address can be performed with netmask:


select netmask(inet('192.168.0.0/24')); -- returns 255.255.255.0

select netmask(cidr('127.0.0.1')); -- returns 255.255.255.255

TILMay 14, 2019by Dmitry Sokolov

JS: Parsing URL

So far, I have used the indexOf operator or regular expressions to get query string values. Today I learned how to make it easier using the URLSearchParams API:




// Assuming "?post=1234&action=edit"



let urlParams = new URLSearchParams(window.location.search);



console.log(urlParams.has('post')); // true

console.log(urlParams.get('action')); // "edit"

console.log(urlParams.getAll('action')); // ["edit"]

console.log(urlParams.toString()); // "?post=1234&action=edit"

console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"



Important: Does not work in IE

TILMay 01, 2019by Suhomozgy Andrey

Typeahead async requests throttling

As everybody else have some legacy code (who does not have it?), and yesterday we faced with problem.

Our internal app have search panel where users could write and get related results. But search was written with typeahead and without any throttling. So it's triggered full text search on backend side on every input change which leads to DB connection pool exhaustion.

We didn't found any ready to use solutions, so we added following fix:


$input.typeahead(

  {

    ...

  },

  {

        ...

    async: true

    source: (query, syncResults, asyncResults) ->

      href = self.href

      # Added getAsyncResults call to throttle requests:

      getAsyncResults(

        () ->

          $.ajax(

            url: href

            data:

              query: query

            dataType: 'json'

          ).success(

            (data, textStatus, jqXHR) ->

              asyncResults(data)

          )

      )

  })

where getAsyncResults defined before typeahead init:


# throttle is lodash function

getAsyncResults = _.throttle(((fn) ->

    fn()

  ), 300,

  { ... })

Would be happy if someone find this simple solution helpfull.

TILApril 23, 2019by Suhomozgy Andrey

Trick: filter falsy values out of an array?

Lets say you need to filter all falsy


0, undefined, null, false, ''(empty string), NaN

values from array.

Of course you can use following construnction:




myArray

    .map(item => {

        // ...

    })

    // Get rid of falsy values

    .filter(item => item);





Since the values we don't want aren't truthy, the filter above removes those falsy items.

Did you know there's a clearer way with Boolean?




myArray

    .map(item => {

        // ...

    })

    // Get rid of falsy values

    .filter(Boolean);





TILApril 17, 2019by Suhomozgy Andrey

Add conditional properties in JS objects

How conditionaly add properties to object?

As it turned out, it's pretty simple:




const user = { id: 1, name: 'Suhomozgy Andrey' }

const position = 'Frontend Developer'

const userWithPosition = {

  ...user,

  id: 2,

  ...(position && { position })

}



userWithPosition //=> { id: 2, name: 'Suhomozgy Andrey', position: 'Frontend Developer' }





TILMarch 28, 2019by Dmitry Voronov

Create factory with an uploaded file in Rails rspec

To create a factory with an uploaded file in Rails rspec, needs to be included ActionDispatch::TestProcess module in the rails_helper.rb file to use the #fixture_file_upload method in the factories.


# spec/rails_helper.rb

include ActionDispatch::TestProcess

In a factory, when setting the attribute value, use the method #fixture_file_upload, specifying the path and file type.


# spec/factories/import_file.rb

FactoryBot.define do

  factory :import_file, class: ImportFile do

    data { fixture_file_upload 'spec/fixtures/test_file.pdf', 'application/pdf' }

  end

end

TILMarch 20, 2019by Suhomozgy Andrey

Get most performant function

Let's say you need to determine which function is execute faster.

Write a function that take array of functions and iterates each of them a certain number of times.

Will use the difference in performance.now() values before and after to get the total time in milliseconds each iteration running.

Play with iterations argument to get more or less reliable results.


const mostPerformantFunction = (fns, iterations = 10000) => {

  const times = fns.map(fn => {

    const before = performance.now();

    for (let i = 0; i < iterations; i++) fn();

    return performance.now() - before;

  });

  console.log(times);

  return times.indexOf(Math.min(...times));

};


mostPerformantFunction([

  () => {

    [1, 2, 3, 4, 5, 6, 7, 8, 9, '10'].every(el => typeof el === 'number');

  },

  () => {

    [1, '2', 3, 4, 5, 6, 7, 8, 9, 10].every(el => typeof el === 'number');

  }

]); // 1

TILMarch 20, 2019by Alexander Blinov

How to download files with Axios

A simple example using the Blob() constructor:


export function someFunction(values) {

  return (dispatch) => {

    ...

    const method = 'GET';

    const url = 'http://go.api/download_file';

    ...

    axios

      .request({

        url,

        method,

        responseType: 'blob', //important

      })

      .then(({ data }) => {

        const downloadUrl = window.URL.createObjectURL(new Blob([data]));

        const link = document.createElement('a');

        link.href = downloadUrl;

        link.setAttribute('download', 'file.zip'); //any other extension

        document.body.appendChild(link);

        link.click();

        link.remove();

      });

  };

}

TILMarch 05, 2019by Alexander Spitsyn

Append string to a route with a slash operator

If you need to append string to some route to build a path name you can use few ways:


Rails.root + 'foo/bar'

[Rails.root, 'foo/bar'].join('/')

"#{Rails.root}/foo/bar"

But also there is a Pathname#/ method, so you can append string to route using a slash:


Rails.root/'foo/bar' # => #<Pathname:/Users/alex/myproject/foo/bar>

Looks more readable!

TILFebruary 23, 2019by Alexander Ivlev

Recompose withContext and getContext. Simple example

Very often for nested components you need to transfer some props of the parent. For example size. So, we have the Card component. It contains a Button component.


  // App.js

  <Card size="sm">

    {/* ... */}

    <div>

      {/* ... */}

      <Button size="sm" onClick={action}>Action</Button>

    </div>

  </Card>



The size for both components is set by the "size" parameter. In the example above, the parameter passed is indicated for both components. In order not to specify the size for the Button each time, you can use the Context to use the one specified for the Card. If you use recompose, it can be super easy:


  // Card.js

  import { getContext } from 'recompose';

  // ...

  export default withContext(

    { size: PropTypes.oneOf(['sm', 'md', 'lg']) },

    ({ size }) => ({ size }),

  )(Card);



  // App.js

  import Button from './Button';

  // ...

  const EnhancedButton = getContext({ size: PropTypes.oneOf(['sm', 'md', 'lg']) })(Button);

Live example

TILFebruary 20, 2019by Alexander Budchanov

AND & OR Operators Precedence

Are you still sure that && and and is the same operators? Look at this:


a = true && false

a

=> false


a = true and false

a

=> true

The same situation could be reproduced for || and or. Why? The answer lies in Ruby Operator Precedence.

The first example can be represented as:


a = (true && false)

Second:


(a = true) and false

Thanks to Igor Alexandrov

TILFebruary 20, 2019by Alexander Ivlev

Sort lines in the vim editor

Often when writing code, you need to sort the lines in alphabetical order. For example, in javascript, when importing a large number of modules, it is good practice to organize them alphabetically. Users of the vim editor can do this very simply. It is enough to select in the visual mode all the lines that need to be sorted and enter the command :sort. All rows are sorted!

TILFebruary 20, 2019by Alexander Blinov

Custom onChange in React Final Form

Let's take a case when we need to call our own function to change a state of a specific field in a form (our react final form).

Here is a way to do the exact that:

You should pass your function as a parameter and after that just call it inside of the onChange method

Example:


const FormGroupAdapter = ({ input, inputOnChange }) => {

    const inputProps = {

        ...input,

        onChange: e => {

            input.onChange(e);

            inputOnChange && inputOnChange(e);

        }

    };



    return <input {...inputProps} />;

};



const handleChange = event => {

    console.log("!!!", event.target.value);

};



const App = () => (

    <Form

        ...

        render={({ handleSubmit, reset, submitting, pristine, values }) => (

            <form onSubmit={handleSubmit}>

                <div>

                    <label>some label</label>

                    <Field

                        name="someField"

                        component={FormGroupAdapter}

                        inputOnChange={handleChange}

                    />

                </div>

                ...

            </form>

        )}

    />

);



Live example

TILFebruary 20, 2019by Suhomozgy Andrey

How to display numbers with currency formatting in JS?

Use Intl.NumberFormat to enable country / currency sensitive formatting.


const toCurrency = (n, curr, LanguageFormat = undefined) =>

  Intl.NumberFormat(LanguageFormat, { style: 'currency', currency: curr }).format(n);


toCurrency(123456.789, 'EUR'); // €123,456.79  | currency: Euro | currencyLangFormat: Local

toCurrency(123456.789, 'RUB'); // RUB 123,456.79  | currency: Ruble | currencyLangFormat: Local

toCurrency(123456.789, 'RUB', 'Ru-ru') // 123 456,79 ₽  | currency: Ruble | currencyLangFormat: Russian

toCurrency(123456.789, 'USD', 'en-us'); // $123,456.79  | currency: US Dollar | currencyLangFormat: English (United States)

toCurrency(123456.789, 'USD', 'fa'); // ۱۲۳٬۴۵۶٫۷۹ ؜$ | currency: US Dollar | currencyLangFormat: Farsi

toCurrency(322342436423.2435, 'JPY'); // ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local

toCurrency(322342436423.2435, 'JPY', 'fi'); // 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish

TILFebruary 19, 2019by Alexander Budchanov

Safe Navigation vs Try in Rails (Part 2: Performance)

This Note is an extension of Safe Navigation vs Try in Rails (Part 1: Basic Differences)

Method try() comes from Active Support component of Ruby on Rails. Safe Navigation Operator is Ruby native feature.

Let's check performance!


require 'benchmark'



class Foo

  attr_accessor :name

end



foo = Foo.new

bar = nil



Benchmark.bm(35) do |x|

  x.report('Successful access: try(...): ')         { 1_000_000.times { foo.try(:name) } }

  x.report('Successful access: &.: ')               { 1_000_000.times { foo&.name } }

  x.report('Successful access: control sample: ')   { 1_000_000.times { foo.name } }

  x.report('Failed access: try(...): ')             { 1_000_000.times { bar.try(:nonexistent) } }

  x.report('Failed access: safe navigation: ')      { 1_000_000.times { bar&.nonexistent } }

end;nil


                                          user     system      total        real

Successful access: try(...):          0.498216   0.005748   0.503964 (  0.530010)

Successful access: &.:                0.062146   0.000943   0.063089 (  0.069714)

Successful access: control sample:    0.062411   0.001098   0.063509 (  0.069603)

Failed access: try(...):              0.172535   0.004374   0.176909 (  0.194386)

Failed access: safe navigation:       0.054141   0.001029   0.055170 (  0.065502)

Safe navigation is about 7 times faster than method try() for successful navigation and 3 times faster for unsuccessful.

TILFebruary 19, 2019by Alexander Budchanov

Safe Navigation vs Try in Rails (Part 1: Basic Differences)

There are some ways of preventing errors like undefined method for nil:NilClass.

  • Rails Method try(...)

  • Safe Navigation Operator (&.)

  • Logical operator && (AND)

Here is how these options look like:


user.try(:company).try(:name)


user&.company&.name


user && user.company && user.company.name

But there are some differences.

1. If model User hasn't relation compppany (it may be just a typo or renamed model relation/attribute):


user.try(:compppany).try(:name)

=> nil

You will receive nil and never been know about this typo.


user&.compppany&.name

=> NoMethodError: undefined method `compppany' for #<User:0x000000123456789>

and


user && user.compppany && user.compppany.name

=> NoMethodError: undefined method `compppany' for #<User:0x000000123456789>

Looks better!

2. If model User has relation company, but company is false. User.new(company: false):


user.try(:company).try(:name)

=> nil


user&.company&.name

=> NoMethodError: undefined method `name' for false:FalseClass

Safe Navigation recognized false. Awesome!


user && user.company && user.company.name

=> false

Hmmm, it does not look like we want.

3. Performance

Read the second part Safe Navigation vs Try in Rails (Part 2: Performance)

TILFebruary 18, 2019by Alexander Budchanov

Force Downloading of File instead of Opening in Browser

When you go through the link, some files will be opened in the browser. Such behavior is typical for some content types (e.g., images, pdf, etc.)

However, you can force file downloading instead of opening when an user clicks on the link though.

1st way (frontend):

HTML attribute download allows you to do this.


<a href="/public/report.pdf" download="stat_report">

If the value of the attribute is omitted, the original filename would be used.

However, be careful. This attribute isn’t supported in some old browsers without HTML5 support.

Renaming does not work if the given file stored on another host.

2nd way (backend):

You can set HTTP header Content-disposition.

for Nginx:


location ~* /public/(.+\.pdf)$ {

    add_header Content-disposition "attachment; filename=$1";

}

for Apache:


<IfModule mod_headers.c>

    <FilesMatch "\.(?i:pdf)$">

        ForceType application/octet-stream

        Header set Content-Disposition "attachment"

    </FilesMatch>

</IfModule>