teleren/devto huggingface dataset:
Pip Install a Git Repository
Tags: python, pip, git, tutorial
Published: 2020-10-22 10:31:06

If you would like to install the latest version of flask, you would probably use `pip install flask`. While this gives you the latest released version, it doesn't contain the latest commit to the repository. At least not most of the time. Sooo, what if I want the latest commit? Maybe some new bugfix or feature has been added which I need for my project. Let's look at how you can get the latest commit made to flask or any other open-source package.


You could clone the repository and install it using pip locally:
```sh
$ git clone https://github.com/pallets/flask.git
$ pip install ./flask
```
However, this method creates a dependency on local files, and creating a _requirements.txt_ you could share is impossible. Using `pip freeze` it would look like this for flask:
```
Flask @ file:///C:/Users/Fronkan/my_project/flask
```

Fear not, there is a better way of doing this! You can use pip to install directly from a git repository. To install flask the shortest version of the command is `pip install git+https://github.com/pallets/flask.git`.
This will install whatever is on the default branch of the project. Freezing this gives us:
```
Flask @ git+https://github.com/pallets/flask.git@bdf7083cfdeef0e0bdd0bf6d4c23b26c92b52d95
```
Notice how pip has stored the specific commit hash used when installing. This means you can share this with others and they will, for sure, get the same version as you!

As I said, that is the short version of the command. This corresponds to `pip install git+https://github.com/pallets/flask.git@master`, as master is the default branch of the flask repository. The reason I show you this is because we can change master to any other branch in the repository. Actually, we can use either a branch, commit hash, tag name, or git ref. This gives you a lot of control over what to install from the repository.

If you follow the pip documentation you would run the command as: `pip install git+https://github.com/pallets/flask.git@master#egg=flask`. The `#egg=flask` part tells pip which package it is installing before downloading and parsing the metadata and is used for the dependency logic. This seems to be the, by pip, recommended way of doing things.

Pip also supports other version control systems like Mercurial and SVM. If you use these instead of git or just want to read up on pips support for version control systems in general, check out the docs [right here](https://pip.pypa.io/en/stable/topics/vcs-support/).

This isn't something you will use every day, I have used it once. I needed a version of a package available on the master branch which wasn't yet released, like with this flask example. However, you could also use this to install packages that aren't available on PyPI at all, for example, an internal project at work. I hope you found this as interesting as I did and if you see any other uses for this, please leave a comment!:smile:
Windows BLUE SCREEN
Tags: graphql
Published: 2020-10-22 10:28:39

I got windows blue screen with different status 

STATUS_ACCESS_VIOLATION
STATUS_HEAP_CORRUPTION
dpc watched violation


 multi times I thought there are an issue with the laptop hardware like memory but I noticed this because infinity loop occurs after made graphql mutation!!

so I'm searching how to avoid this behavior.

this is my second time I face this situation first time was https://dev.to/moatazabdalmageed/machine-freeing-while-developing-react-app-4919
What is CSS Flexbox
Tags: css, flexbox, frontend
Published: 2020-10-22 10:13:38

CSS flexboxes are modern css layout that help us to order elements vertical and horizontal.
## Why flexbox?
It is easier to make responsive our website with flexbox.
Flex structure is simple.
Flexbox supported by all browsers today.
![Browser](https://dev-to-uploads.s3.amazonaws.com/i/jlpvcptv5e8njck48pae.png)

**How to use Flexbox:**
There are 2 main item in flexbox. First Container , second Items.
![flex](https://miro.medium.com/max/566/1*0-QCq54RgzEw5gQZv408iQ.png)
![flex](https://miro.medium.com/max/566/1*mpQBsNDFmzcBEL8QpzrtgQ.png)

Display
Using display:flex we make our container flexible.

```
.container{display: flex /* or inline-flex */}
```
## Flex Direction
![flexcontainer}(https://miro.medium.com/max/490/1*s-G7MS21vXkAgI1gTBzeBg.png)

Flex direction used to determine how items arranged in layout(horizontal or vertical) and applied to the **container element**.

![gif](https://miro.medium.com/max/480/1*T2axhnhD2oA92pCjfT_m7g.gif)

```
.container{
display: flex /* or inline-flex*/
flex-direction: row /* or  | row-reverse | column | column-reverse */;
}
```
* row (default): standard layout from left to right
* row-reverse: reverse layout from right to left
* column: From top to bottom layout
* column-reverse: From bottom to top layout

## Flex-wrap
Flex-wrap mostly used for creating responsive layouts. The flex-wrap property is specified as a single keyword chosen from the list of values below.
* nowrap (default): All elements are in 1 row.This is the default value.
* wrap: The flex items break into multiple lines.
* wrap-reverse: Behaves the same as wrap but it have reverse order.

## Justify-content
It defines the alignment along the main axis.
![justify](https://miro.medium.com/max/490/1*PbtvzsyNHBOZyTMUhJQoPA.png)

## Align-items
It help us alignment of items in y-axis.

![align items](https://miro.medium.com/max/490/1*VYpyfIQDwGtIrMsg53c3hQ.png)

![align](https://miro.medium.com/max/700/1*dHiZbNwrQokYFKXY0JH_0g.gif)

For more dev posts : [Link](https://medium.com/simuratli)
Design and development of a minimalistic fashion photography website
Tags: startup, vue, design, writing
Published: 2020-10-22 09:53:01

Our design team continuously strives to develop, grow, and be ready to change. So they are constantly learning and trying new things. In 2020, Evrone designer Natasha Yankelevich decided, as an exercise, to create the concept of a personal website for an individual who inspired her - photographer Elizaveta Porodina.

Natasha published the concept on social networks and tagged Elizaveta. She almost immediately received a message from the photographer praising the site concept. Elizaveta wanted us to fully develop the site and turn it into a representation of herself and her style. We reached an agreement on all the documentary details, discussed the nuances of the fashion photography website project, and got down to work.

Full case study: https://evrone.com/porodina
Online mode: How to successfully host a virtual conference
Tags: techtalks, motivation, writing, career
Published: 2020-10-22 09:45:22

Until recently, it seemed that working remotely, and, especially, holding public events virtually, was something completely new and fresh. Something from the future. Now it is becoming the daily reality, and it is exciting to observe the evolution of the idea of holding events remotely. 

We are living in a world where technology allows you to exchange information and communicate with others around the globe, without ever leaving your home. It is time for conferences to adapt to this new way of life. Remote user conferences are the future.

Full article: https://evrone.com/running-successful-virtual-event-2020
What I learned and gained from Hacktoberfest 2020?
Tags: hacktoberfest
Published: 2020-10-22 09:44:08

## What I Learned From Hacktoberfest

Here are few points I will like to share about What I learnt from Hacktoberfest2020:
* Learnt about open source, version control system and git.
* I learnt how to collaborate with other people's, on open source projects.
* I gained a lot of experience from the projects that I contributed to.
* It helped me to understand open source development community as whole and how it is reshaping the software development.
* It gave me a good reason to be a part of the open source community, and how can I contribute to it to make a change.
Running RuboCop only on modified files, in a project with no RuboCop
Tags: ruby, rails, rubocop
Published: 2020-10-22 09:39:30

---
title: Running RuboCop only on modified files, in a project with no RuboCop
published: true
description:
tags: ruby, rails, rubocop
//cover_image: https://direct_url_to_image.jpg
---

I like using RuboCop. I think using a linter is a good idea, especially for team projects.

However, I ran into a situation where the people I was working with had opinions against installing RuboCop in the Rails project, and asked me to use it locally for my own code if I wanted.

I couldn't run RuboCop on the entire project, because it would try to fix a mountain of errors for existing unlinted code. So I ended up installing the relevant gems into my system, and running a command that only checks modified files. Here are the steps involved.

# 1. Install gems with `gem install`
Since we can't add the gems to the `Gemfile`, install the necessary gems into your system with `gem install` instead.

```
gem install rubocop rubocop-performance rubocop-rails
```

# 2. Create `.rubocop.yml` in the home directory
Usually, the config file is placed in the project root folder to be shared by everyone in the dev team. In our case, we can create one in the home directory instead: `~/.rubocop.yml`.

Docs: https://docs.rubocop.org/rubocop/configuration.html
> The behavior of RuboCop can be controlled via the .rubocop.yml configuration file. It makes it possible to enable/disable certain cops (checks) and to alter their behavior if they accept any parameters. The file can be placed in your home directory, XDG config directory, or in some project directory.

Go ahead and configure the YML file as you normally would. Configuration instructions can be found in the docs linked above.

# 3. Run RuboCop on modified files
We can run the following command to run RuboCop on unstaged changes.

```bash
git add -N .; git diff --name-only | xargs rubocop
```

- `git add -N .` is necessary for including new files that are not tracked by git
- `git diff --name-only` gives you a list of files with changes
- `xargs rubocop` runs RuboCop on those files

[Optional]
Since the line above is a lot to type, I added it to my git aliases. Now, I can just run `cop` in my command line.
```bash
# ~/.gitconfig
alias cop="git add -N .; git diff --name-only | xargs rubocop"
```

---
Thank you for reading!
My Story of Hactoberfest 
Tags: hacktoberfest
Published: 2020-10-22 09:32:08

Hi there,
I have participated in hactoberfest last year too, in which I couldn't give my 100% and later after the fest I regretted. This year I made full use of it , and learnt how to use git effectively and helped to the projects to solve issues, which gave me satisfaction.
 

I have to thank my classmate Mr.Ketan and also my college IIIT Sricity , who introduced me to Hactoberfest. And special thanks to my friend V.Rishitha, who directed me and helped me.

There are many ways,many platforms to learn new things, but only some will gain your interest and reach all your expectations, I would say this fest has been such a platform to me, Which also developed interest in me to explore git.

I hope to participate in future too !


Thanks DigitalOcean Intel Corporation DEV Community for the fantastic fabulous opportunity for learning and contributing to open source !
A beginners guide to CSS flexbox - part two
Tags: beginners, codenewbie, css, webdev
Published: 2020-10-22 09:30:27

In the first part, I wrote about flexbox properties that affected the flex container. In this second part, I'll be giving you flexbox properties that affect the flex items along with how they work.

I'll be using the same pen that I used for part one.

```html
<div class="container">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
   <div class="four">4</div>
</div>
```

```css
.container{
display: flex;
}

.one, .two, .three, .four {
  background-color: #f5f  
  padding: 2rem;
  font-size: 2rem;
}
```

The main properties are:

- Order
- Flex-grow
- Flex-shrink
- Flex-basis
- Flex
- Align-self

### Order

This property specifies the order in which the flex items will be displayed. By default, the items are displayed in the order in which they were written in the source code but with this property, you can change the order of the items.

```css
.one{
 order: 4
}

```

![Order property of the first item is set to four](https://dev-to-uploads.s3.amazonaws.com/i/i2wnffu7r4xnhv3ozukv.png)

### Flex-grow

This property specifies how much an item should grow or expand to fit the space available. If you give an item the flex-grow value of 2, that will item will take up twice as much space as the other elements in the container.

```css
.one{
 flex-grow:2
}
```

![Flex-grow property of the first item is set to two](https://dev-to-uploads.s3.amazonaws.com/i/c4ov1vtr7s1khbl01e7r.png)

### Flex-shrink

This property unlike flex-grow will specifies how much an item will shrink to fit the space available.

```css
.one{
 flex-shrink: 5
}
```

![Flex-shrink property is set to five](https://dev-to-uploads.s3.amazonaws.com/i/cszug5rh9exumxyugjfy.png)

As you can see in this image, the first item is much smaller than the rest of the items.

### Flex-basis

This property specifies the initial or default value of an item before the space in the container is distributed.

```css
.one{
 flex-basis: 10rem;
}
```
![Flex-basis property of the first item is set to ten rem](https://dev-to-uploads.s3.amazonaws.com/i/rz72iewfghzux4apxrep.png)

### Flex

This is the shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

```css
.one{
 flex: 0 0 10rem;
}

```

![Flex property of the first item is set to not grow, not shrink, and have an initial length of ten rem](https://dev-to-uploads.s3.amazonaws.com/i/sogccx5mk58zmr0iop0f.png)

The first element will not grow, will not shrink, and will have an initial length of 10rem.

### Align-self

This property works like align-items but is only applied to one item instead of the whole container.

```css
.one{
 align-self: flex-start;
}
```

![Align-self property of the first item is set to flex-start](https://dev-to-uploads.s3.amazonaws.com/i/bsa0wl93q1kt7pq95vwe.png)

That's it! This concludes this mini-series about CSS flexbox for beginners. Hope it helped you understand flexbox better. If you have any questions or comments do it down below.
Design Systems now have CODE with the new XD extension for VS Code
Tags: design, productivity, codenewbie, vscode
Published: 2020-10-22 09:16:02

# Introduction

There's a new Adobe XD update here. So, what Adobe has brought us is a new extension for VS Code and a new file format called DSP (Design System Packages). This will bring designers and developers close and make them work together to build functional design systems.

There's a teaser video that will sum it all up.
{% youtube q6cx3t1P0cE %}
This teaser video was mainly for the VS Code extension.

# DSP
It is a new open format standard for building design systems in an effort to normalize the way we use design systems. Most of the design tools expose design systems in their own way which is not very universal across organizations.
![Design systems of various organizations](https://dev-to-uploads.s3.amazonaws.com/i/rvdwpn0re4ad5gv513p1.png)
When a design system is normalized into a formal like DSP it helps companies share their design systems in a way that developers can take advantage of it. It is a bit similar to how PDF was made a standard for sharing pages and content. 

![DSP documentation Github page](https://dev-to-uploads.s3.amazonaws.com/i/ppxepls8oag6xyalmzaz.png)
DSP is a new open-format folder-structure created to help teams share design system information across tools. From designers to developers tools that are compatible with this format can exchange 
design data and stay in sync.
DSP is a collaborative effort and open-sourced so it's not owned by Adobe although they were a huge player in this initiative.

# Extension for VS Code
This extension allows you to create and consume DPSs visually with code-completion features. If you import from Creative Cloud libraries with colors and character styles and components new DSPs can be created in seconds.

Hence, coming to how this extension works is that designers are creating their own sticker sheets and design system libraries in XD as they normally would and after publishing the library the link can be shared inside VS Code to get a head start in the design system package. This creates colors, character styles, and component tokens. The extension will then create a skeleton for our DSP but the developer will have to create the code snippets that will generate the code. 

Documentation can be added with each component including images, gifs, and other media like iframes to actually coded components.

# Where to learn?
You can learn more at [https://letsxd.com/vscode](https://letsxd.com/vscode) with their videos on "Getting Started with Design Tokens", "Consuming a Design System Package (DSP) in VS Code", "Design System Packages (DSP) Importing Assets from Libraries".
You can also get some publicly available DSPs & tools to get started immediately.

# Team behind it
The team behind this was headed by [Demian Borba](https://twitter.com/demianborba) who is XD's product manager focused on developer workflows.
Completed Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-22 09:12:45

## What I Learned From Hacktoberfest
Through this challenge a have leaned more about the open source, though it was my first participating am glad I was able to submit my PRs, am glad I could participate,
I was able to add my code to the python-scripts repo 'Geo-ip tracker' and others am glad I was apart of the team in 2020.
PRISTON GLOBAL
Tags: industry, steel, kerala, india
Published: 2020-10-22 09:12:03

STEEL STRUCTURE CONSTRUCTION
Structural Steel has evolved over the decades to be the building material of choice for everything from small residential homes to skyscrapers. When architects and contractors make the decision to use structural steel over other materials such as concrete or wood, they do so because of steel’s overwhelming benefits when compared to many other building materials. For freedom of design, the strength of integrity and ease of maintenance, structural steel is a smart choice.
<a href="http://pristonglobal.com/steel-structure-construction.html">steel structure construction kochi,steel structure construction kerala</a>
PRISTON STRUCTURAL SYSTEMS
Tags: startup, industry, structural, kerala
Published: 2020-10-22 09:09:45

PRE ENGINEERED STEEL BUILDING PEB
Pre-engineered buildings are buildings being pre-fabricated in a factory in accordance with the design specifications and they are shipped & erected at site, joined together using bolts. PEB (Pre-engineered Building) has made revolution in the construction market using built up sections in place of conventional hot rolled sections. A large column free area is the utmost requirement for any type of industry which is provided by PEB. The prefabricated structural members are usually “I” sections.
<a href="http://pristonglobal.com/Pre-Engineered-Steel-Building.html">peb kochi,peb kerala,pre engineered steel building kochi,pre engineered steel building kerala</a>
A Little Break & Dream-Coding
Tags: devjournal, womenintech, codenewbie, react
Published: 2020-10-22 09:05:04

_This post was originally published on October 22, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Prescribing myself a day of rest from a certain tough problem I'm facing in one of my projects.

I'm building a React app but I want to use a third-party API to pull in data. The only thing is that I want to hide my API token, and it still ends up being shown in the 'Network' tab of Chrome dev tools.

I know I need to create a server that the app can communicate with and run a function server-side to return my API token, but the idea of that is breaking my brain a little bit.

A little break from that could really help, I think.

In other news, I had a dream that I rebuilt Twitter on my own, from the ground up.

Does dream-coding count as progress?



----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
Open Source is Awesome - Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-22 08:51:59

## It was fun contributing to open-source. This is What I Learned from Hacktoberfest 2020

Being a web developer my contributions were mostly on website projects. Here are a few of those highlighted contributions.

## Picture In Picture 

![Picture In Picture](https://dev-to-uploads.s3.amazonaws.com/i/pcceqk7gd98in55kq44t.png)

Picture In Picture uses Browser's getDisplayMedia Method to capture the screen and then request Picture In Picture Feed.

Here are my contributions -

1) Trigger getDisplayMedia() Method only on button click instead of page start.
2) New easy to understand interface with proper step by step explanation.

## What I Learned
Learned about browser's getDisplayMedia and requestPictureInPicture() method. 
Learned more about CSS flexbox and its techniques.

[View PIP App](https://akshaybhopani.github.io/PIP/)
[Visit GitHub](https://github.com/AKSHAYBHOPANI/PIP)

## Keikocorp Website

![Keikocorp](https://dev-to-uploads.s3.amazonaws.com/i/w5wq14gdaaq1eyfcee2x.png)

Incredibly, Bruno the CEO of Keiko Corp has built the fastest-growing tech start-up in Silicon Valley, without ever having launched a website. Bruno's marketing team is insisting that they need a website. The design is totally open to interpretation and modification during the first iteration of development.

Here are my contributions -

1)Adding Padding to sections as required by the mockup given by Keiko Corp.
2)Fixing Weird Spacing Below Navbar caused by CSS override. 

## What I Learned
Learned about Figma design and making most of it and using its CSS in our own projects. Learned about how CSS Overrides can cause several issues and troubleshoot the same.

[View Keiko-Corp Website](keiko-corp.netlify.app/)
[Visit GitHub](https://github.com/AKSHAYBHOPANI/Keiko-Corp)

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


These are some of my contributions to Hacktoberfest 2020. It was a fun learning experience. Thanks to Digital Ocean, GitHub, and Dev Community for combined efforts to make Hacktoberfest 2020 a real success.
How to take the backup of Gmail Account?
Tags: gmailbackuptool, backupgmailemail
Published: 2020-10-22 08:49:25

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

If you don't know how to take backup of Gmail data files then don't worry I have a solution for your that will help you to take the backup of Gmail data file without any data loss risk. This Regaintechnologies <a href="https://www.regaintechnologies.com/gmail-backup.html">Gmail Backup</a> software able to save your Gmail backup in many different file formats like: PST, MSG, MBOX, EML, EMLX, HTML, MHTML, PDF. This Software supports all the versions of Windows OS. You can also try this software free demo version before buy it.