teleren/devto huggingface dataset:
Is it `On Production` or 'In Production`
Tags: discuss
Published: 2019-07-18 13:50:40

---
title: Is it `On Production` or 'In Production`
published: true
description: 
tags: #discuss
---

I've got a little bit of `Non-native speaker syndrome` and I would like to get a second opinion on this.

Which one is correct.

The new version of `some-service` is on production?

or 

The new version of `some-service` is in production?
5 Tools to Optimize The Website Code For Faster Loading
Published: 2019-07-18 13:39:24

First of all, the internet is moving towards faster websites. Every Website owner wants their website loads as fast as possible. As a developer, it's always a challenge to optimize without breaking the code. 

I worked in the development field for the last five years, and from my experience, I can say we developers get an additional tsk these days called "optimization." 

In this topic, I'll list some tools which we can use to test the loading time of the website. 

1. Google Page Speed https://developers.google.com/speed/pagespeed/insights/

This tool is made by Google, which is powered by the lighthouse API. This tool tells what to optimize in the website i.e., images, CSS, JS, or any HTML stuff. Most of the people face difficulties while working with "render-blocking error." Below I've included a link which posted the fix. 

https://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/

2. Pingdom

It's Another tool which tests your web page speed and lists down which thing can be optimized. Some optimization lies in Code and some in Server Level. However, they are easy. The Waterfall chart is the best thing about it. It precisely shows which file/ type is making your page load slower. Just dig into that and optimize. 

3. GTmetrix
https://gtmetrix.com/

Gtmerix another Speed test tool which can be an alternative to Pingdom. While both are free, always test your web page on both for better accuracy. The problem is it tells the js to need to be optimized but never tells which one. 

I like the timeline graph of GTMetrix; you can analyze which part your webpage is loading longer. 

4. Google Chrome Dev tools.

If you don't want to use any 3rd party tools, you have chrome dev tools. The best part of chrome dev tools is, it tells which CSS, HTML, JS codes are not being used but placed at the page. 

Sometimes we place scripts and CSS in all pages. Not all classes or ids being used in all pages. Why make the page extra weight having unused codes? 

That's the reason why I always love to create separate CSS/ JS for each page. I'm paranoid about page weight. 

5. webpagetest

https://www.webpagetest.org/

Another tool which almost gives the same functionality as gtmetrix and Pingdom but they the better TTFB (Time To load First Byte) analysis tool. We know some backend functions block the page to load. This increases the TTFB. With webpagetest, we can measure and fix them. 


Happy Optimizing!! 

Forgive me for grammatical errors; I just wanted to finish ASAP. 

Sammy T | I work at https://mypaintsprayer.com .Ping me anytime at sammy@mypaintsprayer.com
Daily Challenge #18 - Triple Trouble
Tags: challenge
Published: 2019-07-18 13:36:30

---
title: Daily Challenge #18 - Triple Trouble
published: true
description: Part of "Daily Challenge" series
tags: #challenge
series: Daily Challenge
---

We've got more trouble! Today's [challenge](https://www.codewars.com/kata/55d5434f269c0c3f1b000058) comes from jon_pot on Codewars. You are asked to:

> Write a function tripledouble(num1,num2) which takes numbers num1 and num2 and returns 1 if there is a straight triple of a number at any place in num1 and also a straight double of the same number in num2. If this isn't the case, return 0

Good luck, and happy coding!

***
_Thank you to [CodeWars](https://codewars.com/), who has licensed redistribution of this challenge under the [2-Clause BSD License](https://opensource.org/licenses/BSD-2-Clause)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
component #5 - Switch
Tags: react
Published: 2019-07-18 13:25:34

---
title: component #5 - Switch
published: true
description: This is a part of *30 components / month* challenge.
tags: #react
---
{% codesandbox m8khg %}

## What I have learned?

- That we can also use css vars instead of react context when only trying to theme a component.

- That you can still trigger the onChange event handler of an input even though it has a `display: none` style. But you have to wrap that input inside of a `<label>[input goes here]</label>` tag and use the `htmlFor` props.

## What are the main challenges?

  That switch component seems not to be enough. So I've had to come up with an example on which to apply that switch component.

## Why am I doing this anyway?

- To learn.
- To have fun.
- To future Joimee (for reference).

Resources:
[Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
[CSS Variables](https://www.w3schools.com/css/css3_variables.asp)



Salamat.
Top Best Laravel Web Development Company
Tags: laravel, laraveldevelopmentservices, laraveldevelopmentcompany
Published: 2019-07-18 13:23:15

OweBest Listed In Top Best Web & App Laravel Development Company. Owebest provides for web & app development services with the latest technology like Laravel, Drupal, Php, Java, Yii, etc. Visit Us: https://www.owebest.com/laravel-development/
Generate Excel with Chart
Tags: python
Published: 2019-07-18 13:17:57

---
title: Generate Excel with Chart
published: true
description: python 
tags: python
cover_image: https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.Y4JtWAHa3CJEPVqinsROiQHaFk%26pid%3DApi&f=1
---
Excel files can be generated from code. In this case, in Python, including a chart. If you don't know Python, <a href="https://pythonprogramminglanguage.com/">learn Python</a> first. 

Plain Python is not enough. To start you need to install xlsxwriter. 
This is a Python module for writing excel files.

Then define the excel filename and sheet. 

    workbook = xlsxwriter.Workbook('new_excel.xlsx') 
    worksheet = workbook.add_worksheet('sheet1')

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fize2r20ICQONq%2Fgiphy.gif&f=1">

Write the data to the excel sheet. Then add the chart data. Now this is pretty self explanatory.
   
    chart_col = workbook.add_chart({'type':'line'})      
    chart_col.add_series(                                  
        {
            'name':'=sheet1!$B$1',
            'categories':'=sheet1!$A$2:$A$7',
            'values':   '=sheet1!$B$2:$B$7',
            'line': {'color': 'red'},
        }
    )
    
    chart_col.set_title({'name':'Beautiful Chart'})
    chart_col.set_x_axis({'name':"X"})
    chart_col.set_y_axis({'name':'Y'})       
    chart_col.set_style(1)
   
<img src="https://thepracticaldev.s3.amazonaws.com/i/21bntg8avm4qw01loeat.png">

Complete code to create excel file with line chart:

    #!/usr/bin/python3
    import xlsxwriter
   
    workbook = xlsxwriter.Workbook('new_excel.xlsx') 
    worksheet = workbook.add_worksheet('sheet1')
   
    headings = ['Number','testA','testB']         
   
    data = [
         ['2017-9-1','2017-9-2','2017-9-3','2017-9-4','2017-9-5','2017-9-6'],
        [10,40,50,20,10,50],
        [30,60,70,50,40,30],
    ]                                                       
    
    worksheet.write_row('A1',headings)
    
    worksheet.write_column('A2',data[0])
    worksheet.write_column('B2',data[1])
    worksheet.write_column('C2',data[2])                  
    
    chart_col = workbook.add_chart({'type':'line'})      
    chart_col.add_series(                                  
        {
            'name':'=sheet1!$B$1',
            'categories':'=sheet1!$A$2:$A$7',
            'values':   '=sheet1!$B$2:$B$7',
            'line': {'color': 'red'},
        }
    )
    
    chart_col.set_title({'name':'Beautiful Chart'})
    chart_col.set_x_axis({'name':"X"})
    chart_col.set_y_axis({'name':'Y'})        
    
    chart_col.set_style(1)
    
    worksheet.insert_chart('A10',chart_col,{'x_offset':25,'y_offset':10}) 
   
    workbook.close()
                     

Related links:
* <a href="https://xlsxwriter.readthedocs.io/">xlsxwriter module</a>
* <a href="https://pythonprogramminglanguage.com/">Python tutorial</a>
* <a href="https://pythonprogramminglanguage.com/python-machine-learning/">Machine Learning with Python</a>
Grab satellite data with Python
Tags: python
Published: 2019-07-18 13:04:14

---
title: Grab satellite data with Python
published: true
description: python
tags: python
---
You can use Python to download satellite data. Lets try that. First you need to <a href="https://scihub.copernicus.eu/">create  tha username and password</a> for the API. This is from the Senitel satellites.

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F10lIlvHeCFpMhq%2Fgiphy-downsized-large.gif&f=1">

Then install the senital module. You can type

    pip install senitel

I got this working for Python 2.x, not Python 3. Maybe just an install issue.

It needs a search polygon as input (cities.geojson). You can <a href="https://github.com/shakasom/GDS/blob/master/dataset/1-introData.zip">download that file</a> from here.

Change the username and password below, then run the code.

    #!/usr/bin/python3
    from sentinelsat import SentinelAPI, read_geojson, geojson_to_wkt
    from datetime import date

    api = SentinelAPI('username', 'password', 'https://scihub.copernicus.eu/dhus')

    # search by polygon, time, and SciHub query keywords
    footprint = geojson_to_wkt(read_geojson(r'cities.geojson'))
    products = api.query(footprint,
                         date=('20151219', date(2015, 12, 29)),
                         platformname='Sentinel-2',
                         cloudcoverpercentage=(0, 30))

    #Download all products 
    api.download_all(products)

It will download a zip file with lots of data. Extract that zip file and enter the directory:

    cd /S2A_MSIL1C_20151221T140112_N0201_R024_T21HVB_20151221T140113.SAFE/GRANULE/L1C_T21HVB_A002595_20151221T140113/IMG_DATA/

Great, but all the image format is in jp2 format. Ever heard of that? Me neither. You can convert these images online. Seems that after that step need to merge the color channels.

Related links:
* <a href="https://scihub.copernicus.eu/">Copernicus</a>
* <a href="https://towardsdatascience.com/satellite-imagery-access-and-analysis-in-python-jupyter-notebooks-387971ece84b">Satellite imagery access in Python</a>
* <a href="https://pythonbasics.org">Learn Python Programming</a>
* <a href="https://pythonprogramminglanguage.com/">Python Learning Resource</a>
Cláusulas de Guarda
Tags: refactoring, php, cleancode
Published: 2019-07-18 10:57:03

---
title: Cláusulas de Guarda
published: true
description: 
tags: Refactoring,PHP,Clean Code
---

![](https://cdn-images-1.medium.com/max/2000/1*-T_5P8bsMtaB0OQeMr9VZQ.jpeg)

Las [cláusulas de guarda](https://refactoring.com/catalog/replaceNestedConditionalWithGuardClauses.html) son un sencillo método que nos permite hacer nuestro código **más leíble**, **más semántico** y con **menor nivel de identación**.

Una buena forma de detectar estos refactors, es buscar siempre estructuras **if-else** que comprueben una condición para ejecutar el código principal, y en caso de no cumplirse, lanzar un error o una excepción.

Seguro que más de una vez nos hemos encontrado con un bloque de código como este:

 <iframe src="https://medium.com/media/c7ce076d1e63b6ab81e488553975caf3" frameborder=0></iframe>

En el método **setSpeed** podemos ver una construcción if-else que hace una comprobación, y en caso de pasarla, ejecuta una acción de asignar un valor. En este caso es una acción muy simple, pero podría requerir de más líneas y tendríamos un bloque de código bastante grande dentro del **if** y una única línea en el **else**, que además quedaría debajo del todo, dificultando su lectura.
> # Este es un caso típico que puede transformarse en una cláusula de guarda y aplicar un refactor [*Extract Method*](https://refactoring.com/catalog/extractMethod.html).

Para conseguir esto, lo primero es dar la vuelta al **if**, negando la condición y eliminando el **else**:

 <iframe src="https://medium.com/media/eee39ffd0e368d1afac7e6b1f694b9f8" frameborder=0></iframe>

Aquí podemos apreciar que, ya de entrada:

* Hemos eliminado un nivel de identación en la asignación.

* El **else** ha desparecido ya que resultan innecesario, en caso de lanzar la excepción la asignación nunca se realizará.

A pesar de ello, el **if** sigue siendo “molesto”, así que aplicaremos el refactor de la [cláusula de guarda](https://refactoring.com/catalog/replaceNestedConditionalWithGuardClauses.html) extrayendo el **if** a un método privado de nuestra clase:

 <iframe src="https://medium.com/media/027258664423fbb1342e04f5ebe54f47" frameborder=0></iframe>

Como se puede ver, hemos movido el código del **if** a un método privado. Siguiendo los principios de [Clean Code](http://amzn.to/2vpeq24), hemos puesto el método privado justo debajo del primer método que hace uso de él.

El resultado final, a la vista queda, es un código mucho más simple, sencillo de leer y con menor nivel de identación.

Hasta pronto!
SVG icons in Elixir and Phoenix
Tags: elixir, phoenix, svg, icon
Published: 2019-07-18 12:51:06

Here's the best way I can find to use SVG icons in Elixir and Phoenix framework:

First, you can create a file `lib/myapp_web/helpers/icon_helper.ex`:

```ex
defmodule MyAppWeb.Helpers.IconHelper do
  @moduledoc """
  Give some icons to be used on templates.
  """

  use Phoenix.HTML

  alias MyAppWeb.Router.Helpers, as: Routes

  def icon_tag(conn, name, opts \\ []) do
    classes = Keyword.get(opts, :class, "") <> " icon"

    content_tag(:svg, class: classes) do
      tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg#" <> name))
    end
  end
end
```

And then in your file `lib/myapp_web.ex` you can import this helper:

```ex
def view do
  quote do
    # ...
  
    import MyAppWeb.Helpers.IconHelper
  
    # ...
  end
end
```

Now let's create our icons in the file `assets/static/images/icons.svg`:

```xml
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg id="active" viewBox="0 0 426 426">
    <path d="M213.333,0C95.518,0,0,95.514,0,213.333s95.518,213.333,213.333,213.333 c117.828,0,213.333-95.514,213.333-213.333S331.157,0,213.333,0z M174.199,322.918l-93.935-93.931l31.309-31.309l62.626,62.622 l140.894-140.898l31.309,31.309L174.199,322.918z"/>
  </svg>
  
  <svg id="right-arrow" viewBox="0 0 31 31">
    <path d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
  </svg>
</svg>
```

I added 2 icons here, the `active` and the `right-arrow`, but you can add as many as you want.

Now all your views will have the `icon_tag/3` so you can use in your HTML:

```ex
<%= icon_tag(@conn, "active", class: "something") %>
```
or
```ex
<%= icon_tag(@conn, "right-arrow", class: "something") %>
```

You can also add in your CSS file something like:


```css
.icon {
  fill: currentColor;
}
```

Then the SVG icon will be filled with the color used in your CSS :)
(As long as you don't use one `fill="color"` inside the `<path>` in your `icons.svg`)

And now, to finish, we can create a test file for the `IconHelper` module:

```ex
defmodule MyAppWeb.Helpers.IconHelperTest do
  use MyAppWeb.ConnCase, async: true

  import Phoenix.HTML, only: [safe_to_string: 1]

  alias MyAppWeb.Helpers.IconHelper

  test "icon_tag/2 renders a svg icon" do
    image =
      MyAppWeb.Endpoint
      |> IconHelper.icon_tag("active", class: "something")
      |> safe_to_string()

    assert image ==
             "<svg class=\"something icon\">" <>
               "<use xlink:href=\"/images/icons.svg#active\">" <>
               "</svg>"
  end
end
```

Thank you [@andrielfn](https://github.com/andrielfn) for teaching it to me :)
Chatbot App Development Services

Published: 2019-07-18 12:18:20

Oodles AI specializes in providing various AI app Development services with excellent results. The new dedicated Artificial intelligence services are no different than what we have done till now. With a revamped look and feel, Oodles AI brings every service in demand using Artificial Intelligence as a base under one roof. Our professionals excel in developing solutions for a wide range of challenges using AI.

Oodles AI serves as a development company of smart artificial intelligence applications. From recommender system development to chatbot app development services to natural language processing services, we cover it all. With the implementation of AI into your business, you unleash a different dimension of it.

Visit: https://artificialintelligence.oodles.io/chatbot-development-services/
Best 5 latest Information Technology trends in 2020
Tags: aitechnology, iot, latesttechnologytrends, 5gnetwork
Published: 2019-07-18 12:15:57

The future is always exciting and with regard to technology that is accelerating at a tremendous growth rate, there is no doubt that the universal digital transformation concept will be a reality. Well, the clear proof is the powerful business leaders like Amazon, Google, Apple, and Facebook who ventured courageously in leveraging various latest technology trends like Big Data, <a href="https://www.2basetechnologies.com/services/blockchain-development-company/">blockchain development</a>, AI (Artificial Intelligence) for enhancing the user experience.

Can Technology Trends Be Trusted?

Now there might be certain technology trends introduced by a <a href="https://www.2basetechnologies.com">web and mobile app development company </a> that just fizzes out over time. But there are ones that are related to the latest emerging technologies which stay on the sidelines. They gain immense traction only after it gets some major funding or when the industry simply becomes integrated into the given process.

Emerging Technology Trends In 2020

Artificial Intelligence (AI)

Among the top technological trends, <a href="https://www.2basetechnologies.com/best-5-latest-information-technology-trends-in-2018">artificial intelligence has been making a great impact</a> , and that too for quite some years. Not surprisingly it has found a place in the 2020 technology predictions as well.

IoT

Now there are plenty of <a href="https://www.2basetechnologies.com/are-emerging-iot-ideas-reshaping-our-future-lives">internet of things </a>  devices, but it is only getting started. There are various predictions that are stating that somewhat 65 billion of connected devices will be there by 2020.

5G Network

By the time of 2020, the entire world, as well as nations, would be under the spell of the lightning-fast internet connection. Plus don’t forget all the perks that are attached to it. There is no doubt that <a href="https://www.2basetechnologies.com/are-emerging-iot-ideas-reshaping-our-future-lives">5g network</a>  will find its place in the tech market soon. Also, it will bring a huge amount of benefits like high internet speed, higher capacities, and lower latency. Such benefits are bound to make it as one of the major technological trends to watch out for in 2020 and even in the years to come by.

Prescriptive Analysis

Currently, it is the time of predictive analysis, where software is providing prompts based on user behavior and past interactions. In the coming years, the huge amount of collected user data will assist businesses in a different way.

 Automation

Since various emerging technologies like cloud computing, big data, artificial intelligence, and robotics are going towards high scale development, it is not surprising to see that automation is right at its peak. Most of the software consulting firms right from banking to manufacturing and software enterprises are going ahead with implementing automation. All this is to bring in safety, productivity, quality, and profitability.
Solve the Two Sum problem with Javascript
Published: 2019-07-18 12:13:26

---
title:Solve the Two Sum problem with Javascript
published: true
description: 
tags: 
---

### Objective
Given an array of numbers and a target number, find the sum of two numbers from the array that is equal to the target number. May not sum the same index twice.

### Brutal Force Solution

Use a nested for loops to check all possible sums in the array and match the target number as it literates. Time Complexity for this solution is O(n^2).
```
function twoSum(numArray, numTarget)
{
 const arraySize = numArray.length;

 for(let i = 0; i < arraySize; i++){

     for(let j= i + 1; j < arraySize; j++){
       
       if(numTarget - numArray[i] === numArray[j]){

          return `The sum of indices ${i} and ${j} equals ${numTarget}` 
        }
     }
  }
 return "target not found."
}

//calling 

twoSum([1,2,3], 5)

//returns 'The sum of indices 1 and 2 equals 5'

twoSum([1,2,3], 6) //returns "target not found"
```
### Use key/value Pairs Solution 
Instead of thinking the sum of index1 + index2 = target, we can think of index2 = target - index1, then look for index2 in the key/value object which we will store the array values as keys, and array index as value. 
 
The lookup time in objects or hash tables is O(1) constant time, therefore, this implementation improves the time complexity to O(N).

Pseudo code:
1. create an empty object
2. iterate the array with a for loop
3. let num2 = target - num1
(the num2 is the number we want to lookup for in the object)
4. on each iteration add the value/pair to the object
5. if the num2 is in the object, we have found it, return the indexes and the sum
```
function twoSum(numArray, target){

  const numObject = {} //create an empty object

  for(let eachNum in numArray){

    const otherNum = target - numArray[eachNum]

    if(otherNum in numObject){

      return `${otherNum} + ${numArray[eachNum]} = ${target}`
    }

    numObject[numArray[eachNum]] = eachNum

//adding key/value has to go after the if statement to avoid adding the same index twice.
  }

  return "target not found"
}

twoSum([1,2,3,4,5], 8) //output: '3 + 5 = 8'
twoSum([1,2,3,4,5], 10) //"target not found"
```
Language Proposal: The 'Any' Switch Case
Tags: discuss
Published: 2019-07-18 06:20:49

---
title: Language Proposal: The 'Any' Switch Case
published: true
description: I haven't seen this anywhere else.
tags: discuss
---

This feature proposal is language agnostic, as I have not seen this in any language before. If you know of an existing better way to do this, please let me know :)

The tagline for this feature is like if `switch` had a `finally` block, but only ran if the successful `case` found was not `default`.

Here's what it would look like in code:
```go
switch (number) {
  case 1:
    ...
  case 2:
    ...
  case 3:
    ...
  any:
    ...
  default:
    ...
}
```

The `any` block would be ran in this case if and only if case 1, 2, or 3 were also caught.

As far as whether or not the block would be run before or after the given `case` block is up to debate, and I could see scenarios where either would be useful. So it would be ideal to allow both, but I don't have a clear idea on how you could separate the difference between a before `any` clause and an after `any` clause.

Something I've been pondering the past few days. Feedback welcome! 😃