DEV Community: Constantin Cheptea

The Art of Celebrating Too Early And Backtracking to Save The Day. A Scraping Story.

Constantin Cheptea — Mon, 19 Apr 2021 10:18:57 +0000

One of our clients asked us if we could build a simple app for scanning product barcodes in stores. The goal is to instantly tell the user if the product is safe for consumption considering specified intolerances (e.g.: Gluten). We would get the product information from a partner website. Only, there's a tiny issue: there's no public API to get the data. On the bright side, we were allowed to scrape it 🕷.

Our first scraper

Building a scraper may seem like a daunting task. There are many tools online that you can use, but after a thorough assessment, we decided we can simplify things by using Elixir (functional programming language) and the Phoenix Framework. With Pheonix, we bootstrapped a basic admin panel in less than a day. The scraper itself is based on a tiny library called Crawly for making the web requests and Flow for parallelising the data processing. The products were not listing the barcodes but they did have high-quality images we could scan with ZBar. Image processing is slow in high-quality images - all the more reason to multithread. Long story short, our scraper turned out to be pretty slick 🚀.

Time to make the client happy

We ran our scraper several times and made as many improvements as we could. Our database was ripe with thousands upon thousands of products ready to be picked by our soon-to-be long lasting customers. We were pretty confident we nailed it. Our client was pleased to find out we managed to pull the products without having any public API and took the app (built with ReactNative) for testing with friends and family. We went to celebrate with 🍻 and 🎮.

A couple of days later our client scheduled a meeting. Time for laurels, we thought. But no, the app turned out to be completely useless. Our client had scanned his entire fridge and found just two products that we also had in our database. Same went for the others. How was that possible? We did scrape the entire website, didn't we? Were there products that were not listed on the website?

Needle in a haystack

Scraping is indeed a daunting task. After a day of uselessly testing and validating our code, we turned our heads towards the website. What if we looked for the products in the fridge? Namely, the ones we missed. Searching for them manually actually worked! They were on the website, only our scraper couldn't get to them.

Now the fun begins.

Our first discovery was that our website had a hard limit of 201 products per category. Meaning, no matter what category we were choosing to scrape we would always be getting the same 201 products. We scraped by category and dietary preference, but we also discovered that we could get completely different products if we applied different combinations of dietary preferences. This meant that if we were to make all possible combinations of dietary preferences we would end up with a lot more products if not all of them. But how do we solve that?

Back to high school

First, we defined our problem. Suppose we have a list of elements, where each number represents a dietary preference. We need to come up with a function that finds all possible unique combinations of those elements. For list = [1, 2, 3], our function should return the following possibilities:

[1]
[1, 2]
[1, 3]
[1, 2, 3]
[2]
[2, 3]
[3]

Having simplified the terms of the problem we were relieved. Relieved because we knew what to do next, but also because all those years spent in college learning about algorithms are yet again useful (:feeling-grateful)!

Like children at play, we took the challenge to solve the problem individually, then choose the best solution. Time to code-kata!

Of course, none of us looked for anything fancy, because the scraper would only run once to get the data. An optimized brute force solution should be enough.

Here are some of the raw solutions:

# "To pad, or not to pad?", this is the question...

def kata1(input_list) do
    length = Enum.count(input_list)
    limit = (:math.pow(2, length) - 1) |> round |> IO.inspect()
    Enum.reduce(1..limit, [], fn c, acc ->
      digits = Integer.digits(c, 2)
      to_pad = length - Enum.count(digits)
      acc ++
        [
          (if(to_pad == 0, do: [], else: Enum.map(1..to_pad, fn i -> 0 end)) ++ digits)
          |> Enum.zip(input_list)
          |> Enum.filter(fn {x, y} -> x == 1 end)
          |> Enum.reduce([], fn {x, y}, acc -> acc ++ [y] end)
        ]
    end)
  end

#Using the wisdom of bits.

def kata2(input_list) do
    length = Enum.count(input_list)
    # (2^length)-1 -> limit
    {limit, _} = "" |> String.pad_leading(length, "1") |> Integer.parse(2)
    Enum.reduce(0..(limit - 1), [], fn c, acc ->
      acc ++
        [
          String.split(List.to_string(:io_lib.format("~#{length}.2.0B", [-Bitwise.~~~(c)])), "",
            trim: true
          )
          |> Enum.reverse()
          |> Enum.zip(input_list)
          |> Enum.filter(fn {x, y} -> x == "1" end)
          |> Enum.reduce([], fn {x, y}, acc -> acc ++ [y] end)
        ]
    end)
  end

# This one thinks it's all game of heads and tails.

defmodule Combinations do
  def combine([_|_] = list), do: combine(list, [])
  def combine([], _), do: []
  def combine([head | tail], current) do
    next = current ++ [head]
    [next] ++ combine(tail, next) ++ combine(tail, current)
  end
end

We ended up choosing the last solution presented above, which is a classic backtracking implementation. You don't implement backtracking algorithms every day. So, although you (should) learn to use it in high school, chances are you forget about it by the time you get your first programming job. Our advice is to do competitive programming whenever you find the time or simply solve problems on platforms such as HackerRank and Codewars. It's fun and it keeps you fresh. Internally, we have a dedicated Slack channel where we add challenges and discuss solutions.

To be continued...

After accommodating the backtracking solution with our existing code, it felt like our scraper was on steroids. The time to scrape the entire website doubled to around four hours. Clenching teeth, we regularly monitored the numbers in the database. In the end, it turned out well - the number of products almost doubled!

You may be curious about what happened with the project. Well, with the new data our client was happy to rescan his fridge and ask friends to do the same in real grocery stores. So far, the feedback was relatively positive. As a proof of concept, it does enough to start a discussion about opening the much-needed public APIs to make it work in real life.
For us, however, this was a short project stuffed with lots of fun challenges that required unusual, if not unorthodox, solutions.

Swift Debugging: better printing with a simple trick

Constantin Cheptea — Sun, 24 May 2020 13:42:53 +0000

Coming from Android Development to iOS/Swift, one might expect debugging to be somewhat similar. It is to some extent. One thing that I miss while doing iOS Development is the logging capabilities Android Studio offers, which are available out of the box.

I use print() a lot while during development. I like that it is so basic and simple to use, but oftentimes I find myself doing extra work to make the logs easier to follow and dissect. Things like timestamps and types (debug/error/warning/info) are things that make it a lot easier to filter and analyze the logs. The same goes for metadata such as class/filename, function, and line where the logs were created.

This made me do a little research that resulted in a few lines of code that define the following methods:

info("Some butterflies are blue.")
warning("Careful, something's cooking!")
debug("Here's a list of primes:", 2, 3, 5, 7)
error("Ooops, you've got errors!")

which print logs like this:

15:38:21.816 🦋 TabViewScreen.init():46 Some butterflies are blue.
15:38:21.816 ⚠️ TabViewScreen.init():47 Careful, something's cooking!
15:38:21.816 🦎 TabViewScreen.init():48 Here's a list of primes: 2 3 5 7
15:38:21.816 ❌ TabViewScreen.init():49 Ooops, you've got errors!

The idea was to preserve the print signature since that's what I was used to while using more descriptive names.

Here's a gist with the code I'm using, but feel free to customize to your own needs.

_logging.swift


import Foundation

fileprivate let infoMarker = "🦋"
fileprivate let debugMarker = "🦎"
fileprivate let warningMarker = "⚠️"
fileprivate let errorMarker = "❌"

func info(_ items: Any..., separator: String = " ", terminator: String = "\n", file: String = #file, line: Int = #line, function: String = #function) {
    log(items, separator: separator, terminator: terminator, marker: infoMarker, file: file, function: function, line: line)
}

func debug(_ items: Any..., separator: String = " ", terminator: String = "\n", file: String = #file, line: Int = #line, function: String = #function) {
    log(items, separator: separator, terminator: terminator, marker: debugMarker, file: file, function: function, line: line)
}

func warning(_ items: Any..., separator: String = " ", terminator: String = "\n", file: String = #file, line: Int = #line, function: String = #function) {
    log(items, separator: separator, terminator: terminator, marker: warningMarker, file: file, function: function, line: line)
}

func error(_ items: Any..., separator: String = " ", terminator: String = "\n", file: String = #file, line: Int = #line, function: String = #function) {
    log(items, separator: separator, terminator: terminator, marker: errorMarker, file: file, function: function, line: line)
}

fileprivate var formatter: DateFormatter = {
    let _formatter = DateFormatter()
    _formatter.dateFormat = "H:m:ss.SSS"
    return _formatter
}()

fileprivate func log(_ items: [Any], separator: String = " ", terminator: String = "\n", marker: String, file: String, function: String, line: Int) {
    let lastSlashIndex = (file.lastIndex(of: "/") ?? String.Index(utf16Offset: 0, in: file))
    let nextIndex = file.index(after: lastSlashIndex)
    let filename = file.suffix(from: nextIndex).replacingOccurrences(of: ".swift", with: "")

    let dateString = formatter.string(from: NSDate.now)

    let prefix = "\(dateString) \(marker) \(filename).\(function):\(line)"

    let message = items.map {"\($0)"}.joined(separator: separator)
    print("\(prefix) \(message)", terminator: terminator)
}

Note*: unfortunately XCode doesn't allow text coloring in the console. (Or I didn't find how to do it yet)

Note**: The above code is a simple/lightweight and straightforward solution that doesn't require including any external package. If you want something more sophisticated you can check some other tools like this one: https://github.com/SwiftyBeaver/SwiftyBeaver

Angular meets Phoenix/Elixir

Constantin Cheptea — Fri, 15 May 2020 20:34:02 +0000

I recently started working on a Phoenix/Elixir based project. Well, I'm too rusty for that, I said to myself. After many years of OOP, I was about to delve into the realm of functional programming. But, against common misconceptions, it turned out to be an enjoyable experience, and I literally feel I'm in the safe zone now (pun intended).

I got so excited about this new discovery that I decided to use Phoenix/Elixir for another project of my own. The thing is, I already had the frontend somewhat prototyped in Angular 9, so all I had to do is create a Phoenix/Elixir app that serves an Angular frontend.

So, let's see how we can make things work.

1. Create the Phoenix project

Open your terminal and navigate to your working directory and create a new Phoenix project. We will also specify it doesn't add webpack, that will be taken care of by Angular.

$ mix phx.new --no-webpack

[Optional] You can navigate to priv/static/ and remove all files in there. Here is the place our built Angular sources will live.

2. Create the Angular project

In the root folder of your Phoenix project create the Angular project. Let's call it frontend.

ng new frontend

2.1 Move files

For the sake of simplicity, let's move angular.json and package.json from the frontend folder to the root folder of our project. The reason we're doing this is to allow us to run npm and ng (angular-cli) commands straight from the root folder.

By now our project structure should look similar to this:

2.2 Remove unused files

Note: If Angular initialized a git repo and installed the default node_modules (it most likely did) you can safely delete them as they will now be available in the root folder. To do that navigate to /frontend and run rm -rf node_modules and rm -rf .git. Also, delete package-lock.json if any - another one will be created in the root folder.

Don't forget to add /node_modules to your main .gitignore file.

3. Building Angular sources

3.1 Update the source paths

Because we moved some files around, we must to update the angular.json file such that each declared path reflects the new location. In our case we have to add the frontend/ prefix in several places. Check the following gist as a reference.

angular.json

3.2 Set the frontend build output path

When Angular builds the project it creates a bunch of files that will end up in your users' browsers. However, Phoenix has no idea whatsoever about those files unless we tell it about them.

Notice that angular.json file has a build option called outputPath, which is where the built files will be delivered. We will tell Phoenix to serve the files statically and because it already has a designated folder for static content, we will use it as Angular's output path:

...
"outputPath": "priv/static/frontend",
...

3.3 Test build output

We are ready to do some tests. In your root folder run npm install to install missing dependencies, then ng build.

Once the build is done you should see a bunch of colorful lines in your terminal, representing the built files. But most importantly, open your editor and check the priv/static/frontend folder. You should be able to see all the files generated in the previous step by Angular.

4. Tying things together

4.1 Import sources

Now that we have all the frontend files, we need to tell Phoenix to serve them.

Angular is a single page application, which is why there is an index.html file that imports all the other components. With Phoenix, we can ignore that file and use the app.html.eex template file instead. You can find it in the lib/phoenix_angular_web/templates/layout/ folder. Phoenix comes with a powerful server-side template engine, but we will only use it to load the Angular files.

Open the file and replace the entire <body> with the the following lines:

<body>
    <app-root></app-root>
    <!-- Files generated with `ng build` -->
    <script  src="<%= Routes.static_path(@conn, "/frontend/runtime-es2015.js")  %>" type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/runtime-es5.js")  %>"  nomodule  defer></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/polyfills-es5.js")  %>"  nomodule  defer></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/polyfills-es2015.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/styles-es2015.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/styles-es5.js")  %>"  nomodule  defer></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/vendor-es2015.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/vendor-es5.js")  %>"  nomodule  defer></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/main-es2015.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/main-es5.js")  %>"  nomodule  defer></script>

    <!-- Files generated with `ng build --watch` -->
    <script  src="<%= Routes.static_path(@conn, "/frontend/polyfills.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/styles.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/runtime.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/vendor.js")  %>"  type="module"></script>
    <script  src="<%= Routes.static_path(@conn, "/frontend/main.js")  %>"  type="module"></script>
</body>

4.2 Add the base path

Angular also requires a <base href="/"> tag. Add it as a child element to <head>.

<head>
    <!-- other elements -->
    <base  href="/">
</head>

4.3 Allow static imports from `frontend` folder

Open the lib/pheonix_angular_web/endpoint.ex and locate the configuration of the static imports plug. Tip: it starts with plug Plug.Static. add frontend to the only list. It should look similar to this:

plug Plug.Static,
    at:  "/",
    from:  :phoenix_angular,
    gzip:  false,
    only:  ~w(css fonts images js favicon.ico robots.txt frontend) # <- here

You can also remove the items that are not used anymore (css fonts images js ...)

5. Run and Watch

{: style="margin-bottom:20px;"}

5.1 Run the server

We're all set. Run mix phx.server and open the browser. If all went well, you should see the app.component rendered. You may also want to double-check that the frontend files are generated, if not run ng build before starting the server.

5.1 Watch for changes

Right now, it is too much work to rebuild and restart the server each time we make changes to our code. Thankfully, we can instruct Phoenix to watch over our changed files and rebuild the sources automatically. To do that, open the config/dev.exs file and add the following watcher to the endpoint configuration:

config :phoenix_angular, PhoenixAngularWeb.Endpoint,
    http: [port:  4000],
    debug_errors:  true,
    code_reloader:  true,
    check_origin:  false,
    watchers: [
        ng: ["build", "--watch"] # <- this one
    ]

Earlier we added two sets of files in the body element. The first set is created when building the files statically (and will end up in production), whereas the second is generated when building and watching files. This seems like a bug, but the second set is used for Angular differential loading, which is building files a lot faster to save development time.

Troubleshooting

Normally, you will figure out on your what to do based on the messages if anything goes haywire. But here are some things I encountered along the way.

ng build terminates with errors.
- Make sure you don't have any errors in your files (.ts, .html).
- Some package is breaking the build. For me, it was ng-cli-pug-loader that wasn't translating .pug files to .html and thus resulting in verbose errors.
Failed to load resource: the server responded with a status of 404 (Not Found)
- With the current setup, you will get some of these errors depending on which set of files is generated at build time (see step 4).
- However, these imports are taken from priv/static/frontent/index.html. Make sure all imports in that file are also imported in your app.html.eex file.

If you'd like to skip the steps above, please check out this ready-made template: https://github.com/ccheptea/phoenix-angular-template

Handling REST errors with RxSwift and RxAlamofire

Constantin Cheptea — Mon, 30 Dec 2019 14:17:33 +0000

If you're developing an iOS app that consumes a REST API, chances are you're using RxAlamofire. If you don't, then it is worth exploring what it has to offer. For me personally, transitioning to iOS/Swift from an Android/Kotlin world was fairly smooth. The two languages share a lot of similarities. And if you're willing to look, there are plenty of (almost) equivalent libraries for both platforms.

The first thing I integrated into my iOS app was RxSwift, followed by Alamofire (a twin for Retrofit) and RxAlamofire. RxAlamofire is a wrapper on top of Alamofire that offers all the good stuff Rx has in its trunk.

Making a network call with RxAlamofire is as simple as:

_ = session.rx
    .request(.get, url)
    .responseData()
    .subscribe(onNext: { response in
        // handle response
    }, onError: { error in
        // handle error
    })

Mistakes

A common mistake people usually make when consuming a REST API is relying solely on the happy flows. After all, it is easier to consider the API infallible and blame the backend if anything goes wrong. That is something to expect as everyone loves rewards and dreads failures. Hence, sometimes errors are ignored.

Another mistake is treating all errors in the same way. With Rx, it is quite easy to add a handler for errors, but even then it is tempting to tell the user "Something went wrong. Please try again later. Thanks!". However, errors are not the same and in order to avoid confusing users, we need to provide appropriate feedback.

Types of Errors

Generally, when making an HTTP call with RxAlamofire there are three categories of errors:

Errors raised on the client (no connectivity, errors while processing the response)
Expected errors originating on the API (unauthorized user, invalid credentials, resources not found)
Unexpected errors originating on the API (internal server error)

Usually, errors in the first category come with an explicit message that we can present to the user. For instance, if there is no internet connection we can display the error message in the onError callback.

The second and third categories are a bit trickier. That is because when making a call to the endpoint and we do get a response, Alamofire considers it successful, regardless of its status code.

So, how do we model our data in order to easily handle responses that could represent either a success or an error?

Modeling Responses

One thing I like about Swift is that enums can be instantiated with an associated value. This increases type-safety and allows us to better model our business logic. To make things simpler, here is how we can define our response:


enum ApiResult<Value, Error>{
    case success(Value)
    case failure(Error)

    init(value: Value){
        self = .success(value)
    }

    init(error: Error){
        self = .failure(error)
    }
}

The above code can be read as: An API call result can succeed with a Value object or fail with an Error object.

Now let's write some models. Consider an authentication endpoint that expects an email and a password, and responds with a JSON containing a user id and a token if the request is successful or a JSON containing an error message if it is not successful.

Successful response JSON example:

{
    "user_id": "123",
    "token": "c7d83mdla_3ms"
}

Failure response JSON example:

{
    "error_message": "User doesn't exist."
}

In Swift this can be translated to the following:

struct LoginResponse: Codable{
    let user_id: String,
    let token: String
}

struct ApiErrorMessage: Codable{
    error_message: String
}

For the sake of simplicity, let's consider that the scheme of the error message is always the same.

Handling Responses

In order to make things work, we have to teach RxAlamofire to map the actual response to the correct type: LoginResponse or ApiErrorMessage. To do that let's write an extension function for Observable which we will use to instruct RxAlamofire about our expected response.

extension Observable where Element == (HTTPURLResponse, Data){
    fileprivate func expectingObject<T : Codable>(ofType type: T.Type) -> Observable<ApiResult<T, ApiErrorMessage>>{
        return self.map{ (httpURLResponse, data) -> ApiResult<T, ApiErrorMessage> in
            switch httpURLResponse.statusCode{
            case 200 ... 299:
                // is status code is successful we can safely decode to our expected type T
                let object = try JSONDecoder().decode(type, from: data)
                return .success(object)
            default:
                // otherwise try
                let apiErrorMessage: ApiErrorMessage
                do{
                    // to decode an expected error
                    apiErrorMessage = try JSONDecoder().decode(ApiErrorMessage.self, from: data)
                } catch _ {
                    // or not. (this occurs if the API failed or doesn't return a handled exception)
                    apiErrorMessage = ApiErrorMessage(errorMsg: "Server Error.")
                }
                return .failure(apiErrorMessage)
            }
        }
    }
}

Phew! That is quite some information to grasp, but if you look closer it is not that complicated. What the function does, is to tell the observable how to convert the data based on the response's status code and what to send further down the pipe. You can easily add more cases for other status codes, depending on your needs.

Now let's see how our login call will look like.

_ = manager.rx
    .request(.post, "https://my-api.com/login",
        parameters: ["email": john@doe.com, "password": "onlyjohnknowsme"])
    .responseData()
    .expectingObject(ofType: LoginResponse.self) // <-- specify what object is expected
    .subscribe(onNext: { apiResult in
        switch apiResult{
        case let .success(loginResponse):
            // handling the successful response
            saveUserId(loginResponse.user_id)
            saveToken(loginResponse.token)
        case let .failure(apiErrorMessage):
            // handling the erroneous response
            showError(apiErrorMessage.error_msg)
        }
    },onError:{ err in
        // handle client originating error
    })

Conclusion

Although being new to iOS development, Swift offers handy tools to help write good code. In this particular case, we eliminated the response type ambiguity when consuming a REST API which implicitly helps us improve the end-user experience. We modeled our responses using enums and added a superpower to the Observable type by writing an extension function.

(This article was originally posted on my personal blog: http://www.ccheptea.com/2019-03-25-handling-rest-errors-with-rxswift/)

4 useless functions I wish JavaScript offered out of the box

Constantin Cheptea — Sun, 29 Dec 2019 16:31:50 +0000

JavaScript, the most popular programming language in the world, is a mess. There are many articles (or repositories) on the web about how peculiar or counter-intuitive some aspects of this language are. But as much as you may hate it, you have to admit it is a handy tool if you want to quickly build a small project, prove some code works, or simply have some fun. I think most of its critics loved the language at some point in their lives, but are now too cool or sophisticated to admit it. I, personally, use it a lot for solving algorithmic problems from websites such as HackerRank or ProjectEuler.

But even if JavaScript is so widely and wildly used, sometimes it feels incomplete and forces you to break a function chain or implement a basic functionality from the ground up. Here are four functions that I wish were readily available in JavaScript. I will provide usage examples and possible implementations for each of them.

Array.distinct()

Do a simple search on how to get the distinct values in a collection in JavaScript and you will find plenty of results from StackOverflow to blogs and tutorials. There is no doubt this is a commonly needed functionality. So, why isn't it built-in? Kotlin, for instance, has two distinct methods: distinct and distinctby. The latter allows you to get distinct elements by a specific property.

Here's how I see the .distinct() method in JavaScript.

Usage

[1, 2, 3, 1, 2, 3]
    .distinct()
    .forEach(x => console.log(x)) 
/*
output:
1
2
3
*/

[{name: "Bob"}, {name: "Jane"}, {name: "Bob"}]
    .distinct(person => person.name)
    .forEach(x => console.log(x)) 
/*
output:
{ name: 'Bob' }
{ name: 'Jane' }
*/

Possible implementation

Array.prototype.distinct = function(selector){
  if (selector === 'undefined'){
    return [...new Set(this)];
  }

  if (typeof(selector) !== 'function'){
    throw new Error(`Expecting selector to be a function, but received ${typeof(selector)} instead.`)
  }

  let found = new Set()
  return this.filter(element => {
    if (found.has(selector(element))){
      return false
    } else {
      found.add(selector(element))
      return true
    }
  })
}

Array.indicesOf()

You're familiar with .indexOf(). It returns the index of the first appearance for a given value, or -1 if no match is found. Surprisingly, I encountered situations where I needed to determine not just the first index, but all of them. It can be done with a .reduce(), but then I need to explain what I'm trying to achieve. I'm not a big fan of comments in code. Thus, although it seems a useless function, for the sake of expressiveness I would like to have it out of the box.

Usage

[1, 2, 3, 1, 2, 3]
    .indicesOf(2)
    .forEach(x => console.log(x)) 
/*
output:
1
4
*/

[{name: "Bob"}, {name: "Jane"}, {name: "Bob"}]
    .indicesOf(person => person.name)
    .forEach(x => console.log(x)) 
/*
output:
0
2
*/

Possible implementation

Array.prototype.indicesOf = function(test){
  if(typeof(test) === "function"){
    return this.reduce((indices, element, index) => {
      if (test(element)) indices.push(index)
      return indices
    }, [])
  } else {
    return this.reduce((indices, element, index) => {
      if (element === test) indices.push(index)
      return indices
    }, [])
  }
}

Array.binarySearch()

Similar to .distinct(), running a binary search may be something you would like to use more often but cannot without some extra work. Binary search looks for a given element in a sorted array and returns it's index, or -1 if missing. It does the same thing as .indexOf() but a lot faster. Since it is such a well known and basic algorithm, it makes a lot of sense to have it built-in along with the sorting algorithms. I was pleased to find it in Kotlin. Kudos to the Kotlin team.

Usage

let index = [1, 2, 3, 4, 5, 5, 7].binarySearch(x => x - 7)
console.log(index)
/*
output:
6
*/

Possible implementation

Array.prototype.binarySearch = function(comparator){
  let left = 0, right = this.length - 1
  while(left <= right){
    let mid = Math.floor((right + left)/ 2)
    let cmp = comparator(this[mid])
    if(cmp < 0){
      left = mid + 1
    } else if(cmp > 0){
      right = mid - 1
    } else{
      return mid
    }
  }
  return -1
}

Number.rangeTo()

You may find generating a list of integers a useful functionality. It can be sample data for your tests, or coordinates for your cool game. You can do it using a for loop, but smarter languages have the concept of range. Here's how one can define a range of integers in Swift: let myRange = 1..10. Now myRange can be used as a collection of integers that you can manipulate as you would a good old array. JavaScript doesn't provide this, but it seems like a common enough feature that should be part of any programming language.

Usage

let myRange = (1).rangeTo(10)
console.log(myRange)
/*
output:
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
*/
let myRange2 = (-3).rangeTo(3)
console.log(myRange2)
/*
output:
[ -3, -2, -1, 0, 1, 2, 3 ]
*/

Possible implementation

Number.prototype.rangeTo = function (toValue){
  if (!Number.isInteger(this.valueOf()) || !Number.isInteger(toValue))
    throw new Error("Only integers are allowed!")

  let values = new Array()
  for(i = this.valueOf(); i <= toValue; i++){
    values.push(i)
  }
  return values
}

These useless functions are just the ones I recently needed, but surely there are plenty of others that should make it in this list. What else do you think is worth adding?

(This article was originally published on my personal blog: http://www.ccheptea.com/2019-12-29-four-useless-functions/)

DEV Community: Constantin Cheptea

The Art of Celebrating Too Early And Backtracking to Save The Day. A Scraping Story.

Our first scraper

Time to make the client happy

Needle in a haystack

Back to high school

To be continued...

Swift Debugging: better printing with a simple trick

Angular meets Phoenix/Elixir

1. Create the Phoenix project

2. Create the Angular project

2.1 Move files

2.2 Remove unused files

3. Building Angular sources

3.1 Update the source paths

3.2 Set the frontend build output path

3.3 Test build output

4. Tying things together

4.1 Import sources

4.2 Add the base path

4.3 Allow static imports from frontend folder

5. Run and Watch

5.1 Run the server

5.1 Watch for changes

Troubleshooting

Handling REST errors with RxSwift and RxAlamofire

Mistakes

Types of Errors

Modeling Responses

Handling Responses

Conclusion

4 useless functions I wish JavaScript offered out of the box

Array.distinct()

Usage

Possible implementation

Array.indicesOf()

Usage

Possible implementation

Array.binarySearch()

Usage

Possible implementation

Number.rangeTo()

Usage

Possible implementation

4.3 Allow static imports from `frontend` folder