teleren/devto huggingface dataset:
Project Euler: Problem 4 Walkthrough
Tags: projecteuler, java, problemsolving
Published: 2020-03-01 18:06:46

---
title: Project Euler: Problem 4 Walkthrough
published: true
date: 2020-03-01 15:02:49 UTC
tags: Project Euler,Java,Problem Solving,project euler
canonical_url: 
---

This article is a full walkthrough on Project Euler problem 4. If you’re stumped on solving this problem, you’re in the right place. This article...

The post [Project Euler: Problem 4 Walkthrough](https://jaeheonshim.com/project-euler-problem-4-walkthrough/) appeared first on [Coding with Jaeheon Shim](https://jaeheonshim.com).
Create Responsive React app using react-responsive
Tags: react, responsivewebdesign, frontend, webdev
Published: 2021-05-16 15:17:25

---
title: Create Responsive React app using react-responsive
published: true
date: 2020-03-01 14:55:55 UTC
tags: reactjs,responsivewebdesign,frontenddevelopment,webdevelopment
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*1ScBZ-IhswU0uPIlLj_E8g.png)<figcaption>React Responsive</figcaption>

Before we start, visit this demo application, this will give you a rough idea of what we are going to discuss in this article.

[React App](https://rishikeshvedpathak.github.io/react-responsive-demo/)

This article will help you to understand how we can handle responsive UI easily in ReactJS. You must have known about the media queries which was introduced in CSS3.

> **Media queries** are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser [viewport](https://developer.mozilla.org/en-US/docs/Glossary/viewport) width).

Media queries is the first thing that comes in our(the UI developers) mind when we want to develop a responsive website. But sometimes it makes hard for us to handle all the viewport attributes in every CSS file. What if we can manage it at a single place. In case of React app, we can take the advantage of React’s techniques like hooks and HOC.

#### About react-responsive

There a node package called react-responsive which makes it easy to manage media queries.

[react-responsive](https://www.npmjs.com/package/react-responsive)

to install this package use below command,

```
npm i react-responsive
```

once installed, you can use it as

{% gist https://gist.github.com/RishikeshVedpathak/b1fadf904e61803b7256de3dd5579f62 %}

#### HOC for react-responsive

> A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Lets take an advantage of HOC. We will create a HOC which will act as a wrapper to manage the responsive config at a single place. Below is simple code for HOC,

{% gist https://gist.github.com/RishikeshVedpathak/d92b99ed6fc56c78619856d1cfcfcf7e %}

Use this HOC in your component say Home as,

{% gist https://gist.github.com/RishikeshVedpathak/507976713ac896b979e12b80854cd635 %}

#### Demo App

Here is the glimpse of a demo app created using react-responsive.

![](https://cdn-images-1.medium.com/max/1024/1*1uNScBlvZ7OWqoaCECfmrQ.gif)<figcaption>react-responsive-demo</figcaption>

I hope this article has helped to understand how we can easily create and manage responsive UI in react app using react-responsive and HOC. You can find the final code in the GitHub repo,

[RishikeshVedpathak/react-responsive-demo](https://github.com/RishikeshVedpathak/react-responsive-demo)


### And more...
- Check [Hybrowlabs](https://hybrowlabs.com/react-js-dev-outsourcing) for React app development services.
Como crear una guía de estilo con Figma
Tags: design, figma, style, tutorial
Published: 2020-03-01 14:54:29

La imagen de un proyecto es súper importante, y va a influenciar al usuario directamente para que siga utilizando la aplicación y la identifique rápidamente o para que salga huyendo confuso y asustado.

Cuando trabajan varios diseñadores o programadores en un proyecto muy grande, lo mejor es crear una guía de estilo para que nadie se salga del _guión_ y acabe diseñando algún componente fuera de tono en comparación al resto.

Para evitar esto, existen las guías de estilos.

Así que cuando llega alguien nuevo al proyecto, le podemos dar la bienvenida con una bonita guía de estilos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q2vcfp81awipkl2v4qff.png)

# Que es una guía de estilo

Una guía de estilos, como bien dice su nombre, es una guía para saber que **materiales** se deben de usar para seguir construyendo, como por ejemplo, que tipografía usar en los títulos, cuáles son los colores principales de la aplicación, que sombras utilizar, y cualquier aspecto que queramos definir.

En nuestra [empresa](https://citec-sl.com), hemos creado una guía de estilos muy simple para una aplicación que llevamos desarrollando cuatro años: [Fleetview](https://fleetview.io).

Nuestra guía de estilo ha servido a otros compañeros para poder crear manuales y vídeos sobre la aplicación.

Hemos decidido hacerla en Figma ya que es una aplicación increible y nos permite exportar cualquier elemento en vectorial.

## Que elementos añadir

Podemos añadir los elementos que consideremos más importantes, y en nuestro caso fueros los siguientes:

### Branding

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/800thl6sd50j162ze09f.png)

Los logos de la aplicación y sus variantes. Cualquier otra variante que no esté aquí definida no estará permitida.

### Paleta de colores

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yfrhej25hhegw4g691u7.png)

Colores principales y secundarios.

### Tipografía

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wgrd68xuur8kj7qqlefn.png)

La tipografía que usamos en el logo, en los títulos y en los párrafos. De cada uno de ellos definimos la familia, peso, tamaño, altura de línea, espaciado entre letras, color y un ejemplo.

### Iconos

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cmu6pcm35sbiu4t0zsrl.png)

El sistema de iconos que usa la aplicación. Si hay que diseñar un icono nuevo, debe tener el mismo tamaño y mismo el grosor en las líneas.

### Componentes

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qsxjtfui0pnqjzibogpp.png)

Los componentes más importantes que utilicen algunos de los aspectos anteriores.

Y todo junto pues se vería así:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xuamwgqvkoxbllhb99cu.png)

Hasta la próxima batalla!

🖖
How to make angular app watch for changes in angular library and update itself?
Tags: angular, library, opensource
Published: 2020-03-01 14:48:25

---
title: How to make angular app watch for changes in angular library and update itself?
published: true
description: Make angular app watch for changes in angular library and update itself.
tags: angular,library,open-source
---

[Angular CLI](https://angular.io/cli) provides a command-line interface to do a lot of things like linting, changing configuration of your application, view docs, run and build your app etc etc..

Out of these commands, there is a [generate](https://angular.io/cli/generate) command which allows us to create building blocks of our application. In this article, we are going to learn how to [generate library](https://angular.io/guide/creating-libraries) and watch for changes in the library in an angular application.

####Let's get started.

###Create an empty angular application

```javascript
ng new my-lib-app –createApplication false
```

This command will create angular application with an empty workspace.


###Add a library project

Go to the root of this project and generate a library.

```javascript
cd my-lib-app
ng g library lib1
```

This command will generate a library project for you. Now build this library:-

```javascript
ng build lib1
```
Depending on angular.json configuration, it will generate build files in the output path. By default it should be **dist/lib1**.

Link this library in your local system. Go to the build folder of your library and run command:

```javascript
npm link
```
It will globally link your library in your local system and you will be able to install it in any app in your system.

###Create an angular application

Run following command to create an angular app:

```javascript
ng g application myapp
```

Now install library which we've created earlier. But to enable watching, we’ll have to install this library with a file system url:

```javascript
npm install file:./dist/lib1
```

Now run following commands:-

```javascript
ng build lib1 --watch
ng serve
```

Now use any component from your library in the app. Run it. Make some changes to the library and you’ll see that app is updating automatically based on those changes.

You can find complete source code of this article here:-

{% github sumitparakh/ng-lib-watch %}
Python string into characters
Tags: python, beginners
Published: 2020-03-01 14:42:05

If you have text (string) in <a href="https://python.org">Python</a>, you can break that up into a bunch of characters. There are several ways to do that.

In this article we'll discuss Python methods for processing a <a href="https://pythonbasics.org/strings/">text string</a>, for each character individually.

*Processing a string into a character list*

**Use list(str)**
If you have a string, you can turn it into characters by calling the <a href="https://pythonbasics.org/list/">list()</a> function, this turns it into a list.
```python
      >>> a = 'abcdefg'
      >>> list(a)
      [ 'a', 'b', 'c', 'd', 'e', ​​'f', 'g']
      >>> aList = list(a)
      >>> for item in aList:
          print (item) # Here you can add other operations, we simply use print
      a
      b
      c
      d
      e
      f
      g
      >>>
```
**Use `for` traversal strings**    
The <a href="https://pythonprogramminglanguage.com/for-loops/">for loop</a> lets you loop over a strings characters. This iterates over every character in the string, where item is your character.
```python
      >>> a = 'abcdefg'
      >>> for item in a:
              print (item) # Here you can add other operations, we simply use print   
      
      a
      b
      c
      d
      e
      f
      g
      >>>
```

**list tricks you can use** 
You can use the code below to breakup a string too
```python
      >>> a = 'abcdefg'
      >>> result = [item for item in a]
      >>> result
      [ 'a', 'b', 'c', 'd', 'e', ​​'f', 'g']
      >>>
```
Caching HTTP Response in Angular with Cashew
Tags: angular, cache, http
Published: 2020-03-01 14:37:22

---
title: Caching HTTP Response in Angular with Cashew
published: true
description: Caching HTTP Responses in Angular with Cashew
tags: angular, cache, HTTP
---

[Cashew](https://github.com/ngneat/cashew) is a new library that provides seamless caching for HTTP responses in Angular.

## Installation

```
npm install @ngneat/cashew
```

## Usage

Inject the `HttpCacheInterceptorModule` module along with `HttpClientModule` in `AppModule`:


```ts
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpCacheInterceptorModule } from '@ngneat/cashew';

@NgModule({
  imports: [HttpClientModule, HttpCacheInterceptorModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

And that's all. Now we can use the `withCache` function for any request we want to cache:

```ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { withCache } from '@ngneat/cashew';

@Injectable()
export class TodosService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('todos', withCache());
  }
}
```

## Local Storage Support
The library also supports caching in localstorage:

```ts
import { HttpCacheInterceptorModule, useHttpCacheLocalStorage } from '@ngneat/cashew';

@NgModule({
  imports: [HttpClientModule, HttpCacheInterceptorModule.forRoot()],
  providers: [useHttpCacheLocalStorage],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

For more information, check out the [docs](https://github.com/ngneat/cashew).
Python File methods
Tags: python, beginners
Published: 2020-03-01 14:23:13

In the <a href="https://python.org">Python</a> programming language, you can do file system operations. This includes the ability to <a href="https://pythonbasics.org/read-file/">read</a> or <a href="https://pythonbasics.org/write-file/">write</a> files from code. 

But the `File` class has many more functions.

<a href="https://docs.python.org/3.8/tutorial/inputoutput.html#reading-and-writing-files">File objects</a> using `open` function, can use all the methods listed below. Besides opening, read a line and write a line, there's more you can do.

```python
#!/usr/bin/env python

myFile = open("coffee.txt", 'r')
...
```

No. | method and description 
--- | ---- |
1 | *File.close()* Close the file. After closing the file can not read and write operations.
2 | *File.flush()* Internal refresh buffer files directly to the internal buffer of data written to the file immediately, rather than passively waiting for the output buffer written.
3 | *File.fileno()* Returns an integer file descriptor (file descriptor FD integer), it can be used in a method as read some of the underlying operating os module.
4 | *File.isatty()* If the file is connected to a terminal device returns True, otherwise False.
5 | *File.next()* Returns the file the next line.
6 | *File.read()* Reading the specified number of bytes from the file, it is not given, or if the reading of all negative.
7 | *File.readline()* Read the entire line, including the "\n" character.
8 | *File.readlines()* Read all rows and returns a list, if a given sizeint> 0, returns the sum of approximately sizeint byte line, the actual read value may be larger than the sizeint, because of the need to fill the buffer.
9 | *File.seek()* Set the current position of the file
10 | *File.tell()* Returns the current file position.
11 | *File.truncate()* Intercepting files, taken byte size specified by default is the current file position.
12 | *File.write(str)* Writes string to the file, returns the character written.
13 | *File.writelines(sequence)* Write a list of strings to the file, if necessary wrap will have to add their own line breaks each line.
Five Linux commands that are very useful when requesting help
Tags: linux, webdev, beginners
Published: 2020-03-01 14:21:44

Hi everyone,

Today I am writing about five linux commands that can really offer useful information when you request help online.

# `cat`(concatenate)

The `cat` command can be used to view the content of a file without opening it.

it is very good to also redirect the content of a file to a new file, like this:

cat file1.txt > file2.txt

All the content of file1 will be copied to file 2.

Pretty handy right?

This feature is very good when you are in a hurry and don't want to deal with `cp` or `rsync` to copy something fast.


# `uname`(unix name)

uname is a good command when someone requests you to tell them what version is your operating system and what kernel are you running.

So `uname -ar` will give this output and display the version of the OS and the kernel that is currently in use.


# `which`(which)

The which command it is used to determine what program is bash using when you type a symlinked command like `ls`.

So typing which ls will tell us exactly what ls is Linux using to complete this task.

Let's type the command and see what it is the result:

```
which ls                                                                                 

ls: aliased to ls --color=tty
```

As you can see **Dear Reader**  `ls` is part of the `tty`, the core of UNIX.

> Unix is the operating system that was used to build Linux!


# `journalctl`(Events database)

Journalctl is very useful to see when a certain event has taken place on a Linux Operating System.

The jounralctl can be used also to filter the events and the older events are displayed first.

Let's try to filter our journalctl by date using the UTC argument:

```shell
journalctl --utc
```


# `lsmod` (list the drivers, ex: mouse, keyboard, motherboard.. so on)

Will list all driver modules that are currently enabled and help us identify if a blacklisted driver has not been successfully taken care of.

A very useful command to deal with driver issues.

> Also to find more about any command in Linux, don't forget to use the `man` command followed by the command you want to find out more.

> For example, let's find out more about the cat command:

> `man cat`

I hope you enjoyed this article **Dear Reader**, and if you also find it useful share it on social.
Gitkraken
Published: 2020-03-01 14:14:48

Bonjour, 
Nombreux d'entre nous git et l'importance d'intégrer une politique de management aujourd'hui dans un projet web ou mobile.
On en parlera aujourd'hui d'un logiciel legendaire intitulé Gitkraken, celui ci à été développé en 2014 par la société axosoft,
pour but de simplifier les logiciels de gestions de version (Versionning control) en particulier Git.

Gitkraken à plusieurs avantages parmi celle-ci une interface simple d'utilisation et fluid à plusieurs profils, la possibilité
d'utiliser plusieurs serveurs de stockage, une comptabilité parfaite sur les OS Mac, Windows et Linux.

la version de base est gratuite mais cependant cet version est limité mais la bonne nouvelle est que Gitkraken Pro est,
gratuit pour les étudiant d'une valeur de $49 l'année.
https://www.gitkraken.com/student-resources
Vous pouvez l'obtenir gratuitement il suffit d'être membre de Github education pack.   
https://www.gitkraken.com/invite/c6GLnp4n
Python modify string
Tags: python, beginners
Published: 2020-03-01 14:03:02

In the <a href="https://python.org">Python</a> programming language strings can be modified. In order to modify the original <a href="https://pythonbasics.org/strings/">string</a> you have method calls available.

Some functions are *replace()* and *find()*. But you can also use *list()* and *join() on strings. We'll show some examples below

## substring and combined

You can get part of a string (a substring) or combine strings.

```python    
      >>> a = 'abcde'
      >>> b = 'fghij'
      >>> c = a[1:3] + b[2:5] + 'end'
      >>> c
      'Bchij end'
      >>>
```

## replace()

The replace function lets you replace the original string with a new string
```python     
      >>> a = 'aaabbbcccddd'
      >>> a.replace('aaa','xxx')
      'xxxbbbcccddd'
      >>>
```

## Combination find() and substring

Find a string inside a string
```python     
      >>> a = 'aaaxbbbcccxddd'
      >>> where = a.find('x')
      >>> where
      3
      >>> a[:where] + 'ttttt' + a[where:]
      'Aaatttttxbbbcccxddd'
      >>>
```

The above three methods, although both modify the source string, in fact, they are not modified directly in the place, just create a new string object

## Use the modified list

You may need to modify the long text and turn it into multiple strings (<a href="https://pythonprogramminglanguage.com/lists/">list</a>). 
```python     
      >>> a = 'aaaxbbbcccxddd'
      >>> b = list(a)
      >>> b
      [ 'A', 'a', 'a', 'x', 'b', 'b', 'b', 'c', 'c', 'c', 'x', 'd', ' d ',' d ']
      >>> b [2] = 'x'
      >>> b [7] = 'x'
      >>> b
      [ 'A', 'a', 'x', 'x', 'b', 'b', 'b', 'x', 'c', 'c', 'x', 'd', ' d ',' d ']
      >>> a = ''.join (b)
      >>> a
      'Aaxxbbbxccxddd'
      >>>
```
What is CDKPatterns.com?
Tags: aws, cdk, architecture, serverless
Published: 2020-03-01 13:57:29

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c5zoqnyi8mynkdqb0ueh.png)

[cdkpatterns](https://cdkpatterns.com) is a github repo that is paired with a twitter account to communicate updates ([@cdkpatterns](https://twitter.com/CdkPatterns)). Star the repo to follow along with updates or follow on twitter, the choice is yours.

The repo is designed to contain serverless architecture patterns built using AWS CDK. They all follow the same structure so the same commands can be used to deploy them all to your aws account to learn and play. Since these are all serverless, the costs of doing so should be as close to free as possible (depends on your actual usage of the pattern).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f5yygzd2qfv4bipn5orf.png)

All patterns come in Python or TypeScript flavours and include the native Cloudformation template that the pattern creates. This means that if you aren't ready for aws cdk yet you can still learn from the patterns.

The patterns are all linked back to an AWS Serverless Hero who created / is presenting them on stage or writing blog posts about them. 

Dynamo Streamer Example:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iqp2mp1wgfto1azpsf3s.png)

If you want to know more about why I am building it check out my last blog post - https://www.mattcoulter.com/blog/post/2
Golang, Microservices, and Monorepo
Tags: go, microservices, monorepo
Published: 2020-03-01 13:52:48

I've been coding in golang for the last 2 years (2018 - 2020), building `microservices` and committing it to a `monorepo`.
These years have got me thinking on how to structure `Go` project based on those 2 criteria: `microservice` and `monorepo`

## Why Microservice

Business comes and go quickly, especially at the early phase of a startup.
The benefits of using `microservice` are:

1. Each `microservice` is treated as 1 business domain
2. Easier to spawn a new `microservice` without having any dependency to other services
3. It's also easier to take down a `microservice` in case the business initiative failed, without having to refactor any code

But there are also some downsides on using `microservice` architecture.
In my experience, `code sharing` is one of the issues. Which can be tackled by using `monorepo`

## Why Monorepo

One benefit of `monorepo` is `code sharing`.
But what the `f` is `code sharing`???

Imagine a scenario without `monorepo`:

* There's an e-commerce named `TOKOPA'EDI`
* They have 2 `microservice` named `payment` and `invoice`
* Everytime a `payment` is made, it needs to copy the `payment` information into `invoice`

When `invoice` service accept `payment` information, `invoice` service do not have `type Payment struct` in its repository.
Therefore `invoice` service have to do some duplication of `payment` struct.

With monorepo, `payment` struct can be shared across multiple `microservices`

## Project Structure

```bash
project
├── cmd                     # contains microservices 
│   ├── '{microservice a}'  # "microservice a" project which contains "main" function to start app
│   │   └── main.go
│   └── '{microservice b}'  # "microservice b" project, also only contains "main" function to start app
│       └── main.go
├── docker                  # dockefile for each microservices
│   ├── '{microservice a}'
│   └── '{microservice b}'
├── internal                # internal package of each microservice. codes inside internal package only visible to its own microservice and cannot be shared
│   ├── '{microservice a}'
│   │   ├── rest            # HTTP entry point for REST API
│   │   ├── grpc            # gRPC entry
│   │   ├── repo            # repository / connector to database
│   │   └── service         # business logic layer which is handled by the microservice
│   └── '{microservice b}'
│       ├── rest
│       ├── grpc
│       ├── repo
│       └── service
├── pkg                     # public package directory which can be shared across project / microservices
│   └── models              # data model which usually 1:1 relation with database
│       ├── something.go
│       └── another.go
└── readme.md
```

With above project structure, every object / code inside `pkg` is fair game and can be shared across `microservices` without having to copy-pasting object from another repository.

CMIIW :v: