teleren/devto huggingface dataset:
Implementing Medium's Image Preview with Gatsby Images
Tags: gatsby, beginners, codenewbie, css
Published: 2021-01-12 05:00:04

The zoom-in image preview feature used by Medium for their blogs is a really nice way to allow users a deeper look at the images on your project. I wanted to use this feature for displaying past projects on my portfolio site, but ran into issues between the compatibility of the React Medium Image Zoom library and the Gatsby Image tool.

### Goal
Have you seen the "Image Preview" zoom feature on Medium? It allows a user to view a lightbox version of the full image, filling up the browser with as large of an image as the size allows while seeing it in full.
![Medium Image Zoom Preview Example](https://imgur.com/0YRFIKf.gif)
There are multiple React libraries that replicate this image-zoom feature, but the one that seems to have the most users and the largest community for support is the [react-medium-image-zoom](https://github.com/rpearce/image-zoom) library (built by Robert Pierce)

### Issues
The steps for use of React Medium Image Zoom are pretty simple. Start by adding the library to your React project (`npm i react-medium-image-zoom`), then import Zoom to your desired component, and wrap an image with it.
##### Example: 
```
import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const MyComponent = () => (
  <Zoom>
    <img src="../images/example.jpg" width="500" />
  </Zoom>
)

export default MyComponent
```

When using with Gatsby though, the issue of using the Zoom feature with Gatsby Images quickly becomes apparent. The Gatsby Images no longer show up! Luckily this is only a CSS issue, and has to do with some of the native styling in both.

### Resolution
It all comes down to debugging the styling pre-baked into Gatsby Image and the React Medium Zoom library, and implementing fixes that will allow them to both work cohesively together.

##### Required CSS
```
// Set Gatsby Image className to 100% width and height
gatsbyImage {
  width: '100%',
  height: '100%'
}

// React Medium Image Zoom styling update to work with Gatsby Images
[data-rmiz-wrap='visible'], [data-rmiz-wrap='hidden'] {
    width: 100%;
    height: 100%;
    display: block;
}
```

### Conclusion
Implementing the Image Zoom feature seen on Medium is a simple, and nice way to improve the user experience in many projects. Hopefully this will help some of you that happen to be trying to implement this feature with Gatsby Images. It's much simpler than I thought to fix, but took me some time to figure out what needed to be done.

##### Additional Resources
[Mikal Mantis's one-component solution to the React Medium Image Zoom with Gatsby Image issue](https://gist.github.com/MantasMikal/a04b2b6b760ef3ef796a00bd84716160)
Class Component, Functional Component, JSX, Without JSX in React JS
Tags: react, javascript
Published: 2021-01-12 04:31:15

Theory :

Components: Components are like JavaScript functions. They accept input and return output like other functions. In the output, components describe what should appear on the screen. Components are part of the User Interface. They are reuseable and nested inside other components.

There are two types of Components.
     1) Stateless functional components.
     2) Stateful Class components.

JSX :
JSX (JavaScript XML ) write XML code for elements and components . It allows us to write HTML in React . JSX tags have a tag name , attributes and children .

Functional Components : 

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

Class Components:

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

With JSX :

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

Without JSX :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wbbg58xawoqvci52rvxw.png)
A simple Todo application with NestJS & Docker
Tags: nestjs, docker, postgres, jwt
Published: 2021-01-12 04:02:55

I wrote an article in Medium. Follow the below link. Thank you.
https://tushar-chy.medium.com/a-simple-todo-application-with-nestjs-typeorm-postgresql-swagger-pgadmin4-jwt-and-docker-caa2742a4295
A small byte of bash aliases and functions.
Tags: linux, bash, productivity, discuss
Published: 2021-01-12 03:49:05

---
title: A small byte of bash aliases and functions.

published: true
description: An easy to digest post on bash functions and aliases.
tags: #linux #bash #productivity #discussion
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9xhgc4ixnid4lknn1x9w.png
---

I'd like to share a few of my favorite bash aliases and functions. All I ask for in return is for you to share your own in the comments!

```
# Set up ls to use my preferences
alias ls='ls -l --color=auto --group-directories-first'

# Quickly add things to a todo-list. Usage: remember milk
alias remember="xargs -I TODO  echo \"[ ] TODO\" >> ~/remember <<<"

# I often find files that I don't know what to do with, but I don't want to delete. So I just move them to dev-hell. usage: devhell mysuperniftyfunctionthatiwillneveruse.js
alias devhell='mv -t ~/dev-hell/'

# I don't know how many times I typed this in before I made it an alias. Usage: pid vim
alias pid="ps -aux | grep "

# I use the following function and alias to jump back and forth between home and the current directory.
function home() {
        PREVIOUS=$(pwd)
        cd ~
}
alias back="cd $PREVIOUS"

# I use Arch Linux, and often download from AUR. Usage: aur chromium
alias aur="xargs -I FILENAME git clone https://aur.archlinux.org/FILENAME <<<"
```
Run Angular and dotnet core api app in docker container with docker compose — Part 3 — The Angular UI and docker
Tags: docker, dotnet, angular, dotnetcore
Published: 2021-01-12 03:45:20

Hello Friends,

In this part we will be building our Angular UI to show the countries returned by the dotnet core API. I am going to call it as KnowThatCountryUI (ktcui)

This is a very basic Angular application with the folder structure as below


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610388618967/d4ysy3j6x.png)

We have one injectable service file which call the API and fetches the data. 


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610389547320/XUjZRsoqK.png)

>This service is talking to the API service that we created in part 2 of this series which is running at port 5005 on local machine.

in the app.component.ts file, we inject that service as a dependancy and subscribe to the observable.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610388727640/7cAo0yG0A.png)

and in the app.component.html, we loop over the results and display them


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610388764073/YKKH2lM89.png)

OK now our basic UI app is ready to talk to the service and show data.

Now, lets run it in a docker container by creating dockerfile.

Below is my docker file for UI. (dockerfile.ui)


```
FROM node:10.15.3-slim as build
WORKDIR /KTCUI
COPY src ./src
COPY *.json ./
RUN npm install -g @angular/cli@7.3.10
RUN npm install
RUN ng build --prod

FROM nginx:alpine as deploy
WORKDIR /KTCUI
COPY --from=build /KTCUI/dist/KnowThatCountryUI/*.* /usr/share/nginx/html/

``` 

Here we are using node:10.15.3-slim as the base image and installing all the angular dependencies from package.json file inside the container.

Notice the last 3 lines.
To run the angular application, we are using nginx:alpine image as web server.

Now, we can build the image for our UI Application.


```
docker build -t ktcui -f dockerfile.ui .
``` 

and then run it by assigning a port.


```
docker run -it -p 5006:80 --name ktcui ktcui
``` 

In above command, we are assigning port 5006 on local machine with port 80 inside the container which is the default port for nginx.

Now, if we visit http://localhost:5006, we should be able to see our UI.

Thanks for reading.

In the next and the last part of this series, we will see how to pull this all together in one file and one command and stand up the applications together and get them working.
The Cookbook: Branch Flow
Tags: news, feature, infrastructure, community
Published: 2021-01-12 03:29:35

---
title: "The Cookbook: Branch Flow"
created_at: Friday 08 Jan 2021 15:00:00 EDT
author: Montana Mendy
layout: post
permalink: 2021-01-08-branches
category: news
excerpt_separator: <!-- more --> 
tags:
  - news
  - feature
  - infrastructure
  - community
---

It's important when using multiple branches in your repository to define which branches to build to, and which branches not to build to. Let's get started.

<!-- more --> 

# Branch Flow 

Travis CI uses the `.travis.yml` file from your project structure, once you've configured your flow via the `.travis.yml` file, you can trigger a build by pushing changes through the CLI using: 

```bash
git init
git add . 
git commit -m "Travis build branch" 
git remote add origin remote repository URL
git remote -v 
git push -u origin master
```

You can tell Travis to build multiple branches using `blacklists` or `whitelists`. More specifically you can define which branches to build using a `whitelist`, or on the flip side you can use `blacklist`. You can blacklist branches that you do not want to be built via the following:

```yaml 
# blacklist (branches you don't want to be built) 
branches:
  except:
    - legacy
    - edge

# whitelist
branches:
  only:
    - master
    - stable
 ```
 
If you specify both `whitelist` and `blacklist`, only takes precedence over except. By default, let's say you have a `gh-pages` branch, that branch is not built unless you add it to the `whitelist` explicitly. When deploying to your version control, or if you're using Apache SVN (Subversion), in some cases, it may reset your working directory, it does this via: 

```bash
git stash --all
```

As a cursory cautionary move, you can add `skip_cleanup` to your `.travis.yml` file. So after, your `yml` file might look like this: 

```yaml
deploy:
  skip_cleanup: true
```
If there's anything you want to add before you deploy, you can obviously add `before_deploy`. This is also true for an inverse method, for after deployment via `after_deploy`.
Updating version numbers for Python Packages in Azure DevOps
Tags: programming, technology, cicd, python
Published: 2021-02-09 20:47:13

---
title: Updating version numbers for Python Packages in Azure DevOps
published: true
date: 2021-01-12 03:19:00 UTC
tags: Programming,Technology,cicd,python
canonical_url: 
---

So I did a previous post on how to create package libraries in Python, and I wanted to put in a post here on how to solve a problem I immediately identified.

If you look at the setup.py, you will see that the version number, and other details are very much hard coded into the file. This is concerning as it requires a manual step to go and update this before you can do a build / publish activity. And honestly, nowadays CI/CD is the way of the word.

So to resolve this, I built a script to have the automated build agent inject the version number created by the CI/CD tool. And that code is the following:

```

import fileinput
import sys

filename = sys.argv[1]
text_to_search = sys.argv[2]
replacement_text = sys.argv[3]
with fileinput.FileInput(filename, inplace=True, backup='.bak') as file:
    for line in file:
        print(line.replace(text_to_search, replacement_text), end='')

```

I then updated my setup.py with the following:

```

name="packageName", 
    version="{{ __BuildNumber__ }}", 
    python_requires = '>=3.7',
    description="{{ __BuildReason__ }}", 

```

And that’s it, from their you just trigger this tile and inject the new build number into the file.
Local Hack Day: Build
Tags: majorleaguehacking, mlh, localhackday, experience
Published: 2021-01-12 02:45:31

I got very good experience in LHD:Build as i have no knowledge how to enhance my github profile like pro. Joining into LHD:Build Day 1 challenges, i maked my github look like pro with a nice readme-portfolio and a portfolio website. 

My Portfolio Web :- https://aamit2267.github.io
My Github Profile :- https://github.com/aamit2267

I never used NodeJS for any of my project but this time i does because of the amazing LHD:Build Starter Kit Challenge that leads to learn something new to me.

In last, if anyone wanna register for LHD:Build 2021 then they are open, all you have to follow below steps:
1. Make an account on mlh.io
2. Register to LHD:Build on https://organize.mlh.io/participants/events/6072-local-hack-day-build
3. If you wanna help me too, Kindly fill this form as my email address ( aamit2267@gmail.com ) in referred email: https://hackp.ac/LHDBuildReferral

I, Thank to all my guildmates and even the support staff to get me here.
Geolocalización por número con los operadores móviles
Published: 2021-01-12 02:09:02

Geolocalización por número con los operadores móviles 
Las empresas de comunicaciones ofrecen a sus abonados otra opción para <a href="https://imeicolombia.net.co/encontrar/">averiguar la ubicación</a> de una persona. Cada uno de ellos tiene un servicio especial que les permite saber dónde está el usuario en ese momento, ver el itinerario del día. Esta función de búsqueda no es gratuita y también requiere el consentimiento informado de la segunda parte. Puede utilizar los siguientes servicios básicos: 
El servicio tiene varias opciones, permite rastrear a una o más personas que han confirmado la solicitud para determinar la información de contacto. La ventaja de este paquete es la posibilidad de buscar abonados de otros operadores (MTS, Beeline) 
La posibilidad de seguirlo será después del consentimiento del usuario. Durante un mes tendrá que pagar 100 rublos y recibirá 100 solicitudes de verificación de información de contacto. Puedes recibir datos de localización por SMS, verlos a través de la aplicación en un smartphone o en un ordenador. 
Para su uso, se cobra una tarifa una vez al día (1,7 rublos) en todo el país, debe recibir una confirmación única para el seguimiento. Puedes monitorear la ubicación de hasta 5 usuarios simultáneamente. 
Tele2 "Geopoisk". La densidad de cobertura de este operador es menor que la de los demás, por lo que la precisión de la determinación también será con un error mayor. Puedes rastrear el mapa después del consentimiento del usuario, el costo es de 2 rublos por día.
Feedback on the official Gatsby tutorial?
Tags: discuss, gatsby, codenewbie, webdev
Published: 2021-01-12 01:34:04

My next big project at Gatsby is updating our [Tutorial](https://www.gatsbyjs.com/docs/tutorial/). So I'm looking for feedback from the community!

## If you've gone through the existing Tutorial:

* Which parts (if any) did you find especially helpful?
* Which parts (if any) did you find especially confusing?
* What questions did you still have after you finished?

## If you've been using Gatsby for a while:

* What are the most important Gatsby features for newcomers to learn?
* Were there any "aha!" moments from your own experience learning Gatsby? Something that finally clicked and made other things easier to understand?

If you have any other general thoughts, feel free to share those as well. Thanks for sharing your experiences!
Infinite Scrolling with Incremental Data Loading in Xamarin.Forms
Tags: xamarinforms, mobile
Published: 2021-01-12 01:29:47

[CollectionView](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/populate-data#load-data-incrementally) has the built-in ability to fetch additional data when the user scrolls through the content already loaded. As the data threshold is met, like when only 4 items remain to be displayed, the CollectionView can execute a command to fetch more data and append.

{% gist https://gist.github.com/davidortinau/1d298527ee82ab288998f3f950670e6f file=Carousel_snippet.xaml %}

{% gist https://gist.github.com/davidortinau/1d298527ee82ab288998f3f950670e6f file=ViewModel_snippet.cs %}

Check it out:

{% youtube 7jooNOmc7m8 %}

Resources:
* [Docs: Load data incrementally](https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/collectionview/populate-data#load-data-incrementally)

{% github davidortinau/FlyMe no-readme %}
Intro to Evergreen UI
Tags: react, evergreen
Published: 2020-12-22 22:14:57

Evergreen UI is another React framework that is geared towards web products. It consists of a set of components that work out of the box. Flexible & compostable. Evergreen components are built on top of a React UI Primitive for endless composability. It can also be used for enterprise-grade web apps. Evergreen’s design is light, simple, and intuitive. You can use it to get started building elegant user interfaces pretty quickly.

##Installation

In your terminal:

`npm install --save evergreen-ui`

##Usage

Example of an Evergreen UI button

Import the button in the app:

```
import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(
  <Button>I am using 🌲 Evergreen!</Button>,
  document.getElementById('root')
)
  
export default App;  
```

##Theming Examples

Wrapping in the ThemeProvider component is required for styling and in order to use the ThemeProvider component, the user must pass it a value prop that is a Theme object. 

Here is an example of the ThemeProvider overriding the default styles:

```
const newTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const ThemedApp = () => (
  <ThemeProvider value={newTheme}>
    <Spinner />
  </ThemeProvider>
)

render(<ThemedApp />)
```

An example of nested theming where it is possible to theme certain parts of the app differently by nesting the ThemeProvider components.

```
const parentTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const childTheme = {
  ...defaultTheme,
  spinnerColor: 'blue'
}

const ThemedParent = ({ children }) => (
  <ThemeProvider value={parentTheme}>
    <Spinner />
    { children }
  </ThemeProvider>
)

const ThemedChild = () => (
  <ThemeProvider value={childTheme}>
    <Spinner />
  </ThemeProvider>
)

render(
  <ThemedParent>
    <ThemedChild />
  </ThemedParent>
)
```

withTheme allows you to easily pass the theme object down to your components.

```
const theme = {
  ...defaultTheme,
  myNewButtonStyles: {
    color: 'white',
    backgroundColor: 'hotpink',
    height: 30,
    borderRadius: '5px',
  }
}

const ThemedApp = ({ children }) => (
  <ThemeProvider value={theme}>
    { children }
  </ThemeProvider>
)

const MyNewButton = ({ theme }) => (
  <button style={theme.myNewButtonStyles}>
    Custom styled button
  </button>
)

const MyNewThemedButton = withTheme(MyNewButton)

render(
  <ThemedApp>
    <MyNewThemedButton />
  </ThemedApp>
)
```
This is just a brief overview of Evergreen UI and its theming features. On the official [site](https://evergreen.segment.com/), you can read more on how to customize components layouts, typography, colors, icons and more.

**References**

- https://evergreen.segment.com/
- https://github.com/segmentio/evergreen
Enough JavaScript to get you Started : #6 Operators
Tags: javascript, beginners, webdev, 100daysofcode
Published: 2021-01-12 01:22:15

### What is Operator?
👉 An operator performs some operation on single or multiple operands (data value) and produces a result. For example `3 + 2`, where `+` sign is an operator and `3` is left operand and `2` is right operand. + operator adds two numeric values and produces a result which is `5` in this case.

### Why we use operators?
👉 to check conditions <br>
👉 to assign values to variables <br>
👉 to compare between 2 or more values<br>
👉 to perform basic operations <br>

### Operators in JavaScript
![Artboard – 4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609909393567/WSF4GApTZ.png)

#### 👉 Arithmetic
used for performing mathematical calculations like addition , subtraction , multiplication , division , modulo etc.

```
👉 Example 

var numOne = 1;
var numTwo = 5;
var sum = numOne + numTwo;
var sub = numOne - numTwo;

```
<hr>
#### 👉 Comparison
used to compare 2 or more values , returns boolean value after checking

```
👉 Example 

1 == 1 // true
2 > 1 // true
2 > 3 // false
3 <=3 // true

```
<hr>
#### 👉 Logical
The concept of logical operators is simple. They allow a program to make a decision based on multiple conditions. 

```
👉 Example 

👉 '&&' (logical AND) Operator
operator | value 1 | value 2 | result
&&       |   true  |  true   | true
&&       |   false |  true   | false
&&       |   true  |  false  | false
&&       |   false |  false  | false

👉 '||' (logical OR) Operator
operator | value 1 | value 2 | result
||       |   true  |  true   | true
||       |   false |  true   | true
||       |   true  |  false  | true
||       |   false |  false  | false

👉 '!' (logical not) Operator
!true = false
!false = true

```
<hr>
#### 👉 Ternary
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is falsy.

```
👉 Example

true ? console.log("hey"):console.log("hi");
// returns "hey"

false ? console.log("hey"):console.log("hi");
// returns "hi"


```
<hr>
#### 👉 Assignment
Assignment operators are used to assigning value to a variable. The left side operand of the assignment operator is a variable and right side operand of the assignment operator is a value

```
👉 Example

var numOne = 1;
numOne += 5; // short hand for numOne = numOne+5; value = 6
```
<br>
<p>Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :) <br>
<br>
Keep Coding ❤
</p>

#### Hey , Let' Connect👋
 [Twitter](https://twitter.com/codarsh) / [Github](https://github.com/WhoAdarshPandya/)
BindableLayout turns any layout into an item repeater in Xamarin.Forms
Tags: xamarinform, mobile
Published: 2021-01-12 01:21:43

When you need to quickly display a set of data, especially when the items are small and don't require virtualization, then with `BindableLayout` and the associated attached properties you can turn any layout into an item repeater. This is not only ideal for small sets of data content that is usually display only, but also when your UX doesn't require any of the bells and whistles provided by other controls such as [CollectionView](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/), [CarouselView](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/), or [ListView](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/).

My [custom layout](https://github.com/davidortinau/Xappy/blob/main/Xappy/Xappy/GridLayout.cs) used here is a modified version of the [UniformGrid](https://github.com/xamarin/XamarinCommunityToolkit/blob/main/src/CommunityToolkit/Xamarin.CommunityToolkit/Views/UniformGrid.shared.cs) in [Xamarin Community Toolkit](https://github.com/xamarin/XamarinCommunityToolkit). It simply (crudely?) displays a uniform grid with priority given to the orientation and count provided.

{% youtube cQBaE2JBvwY %}

Resources:
* [Docs: Bindable layouts](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts)
* [Docs: Custom layouts](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/custom)

{% github davidortinau/Xappy no-readme %}