teleren/devto huggingface dataset:
Instantly make and keep fixes to NPM dependencies without having to fork.
Published: 2020-04-25 08:06:51

Sometimes, you really need to make a change to a dependency to fix something, or to make a small feature for a special use case.

It is time consuming, and sometimes very difficult, to fork a dependency from its git repo, modify it, and then publish it and consume the new version.

Well, thanks to [patch-package](https://github.com/ds300/patch-package), that is now a thing of the past!

Apply patches to any dependencies right inside node_modules, and `patch-package` will track the changes in a reproducible way that you commit to your project repository, then anyone else who runs `npm install` in the same project will have the same modifications (patches) applied to their dependencies.

Oh yeah!
githubのリポジトリ名の横に `mirrored from` ってつける方法
Tags: github, settings
Published: 2020-04-25 07:49:32

githubのリポジトリ名の横に `mirrored from` ってつける方法
================================================================================
これのこと
![mirroredfrom.png](https://dev-to-uploads.s3.amazonaws.com/i/dtwamx5t92fuec0rs63e.png)


tl;dr
----------------------------------------
ない. (正確には, githubのスタッフさんにお願いする必要がある模様

>https://serverfault.com/questions/474257/how-can-i-get-mirrored-from-on-a-github-repo
>https://stackoverflow.com/questions/11370239/creating-an-official-github-mirror
>Based on communicating with GitHub's support team, I found that GitHub currently offers no direct mechanism for a user to mirror repositories in this fashion.
>
>However, one can ask GitHub to install this service for repositories which are part of an organization. GitHub then configures an existing repository as such a mirror and pulls from it in an interval that is a function of the number of overall mirrors they have.
>
>EDIT: as Stuart points out, GitHub no longer accepts requests for mirroring arbitrary repositories. The only remaining option is the solution I posted in my question, i.e., creating a post-receive hook to automatically push to your GitHub repository.
>
>shareimprove this answerfollow
>edited Sep 23 '19 at 14:28
>
>Arturo Herrero
>10.9k88 gold badges3636 silver badges7070 bronze badges
>answered Jul 10 '12 at 19:32


けど別にミラー自体はどうとでもできる ( `Mirror` は表示されないけど
----------------------------------------

### Gitlab -> Githubの方法
>https://qiita.com/hiroponz/items/b888ca49ebfee63f289e
Adding Dark / Light Theme To The Website Using Only CSS
Tags: css, beginners, tutorial, webdev
Published: 2020-04-25 07:32:17

Hello everyone 👋, I hope you are doing great.

So, Today you are going to learn **how to Add dark/light theme to your website using only CSS** 😎.

##HTML
Let's first set up our HTML.

```html
<input id="toggle-theme" class="toggle-theme" type="checkbox" checked/>

<main >
  <label for="toggle-theme" class="toggle-theme-label">
    <span>💡</span>
</label>
  <article>
  <header>Dark / Light Mode Using Only CSS</header>
  <p>...</p>
</article>
</main>
```

##CSS
Now lets set the ``background-colour`` and text ``colour`` of our HTML using CSS variables.

```css

:root {
   --bg-color: #edf2f4;
   --text-color: #011627;
}

main {
  padding: 24px;
  background-color: var(--bg-color);
  color: var(--text-color);
}
```

Now, lets set up the checkbox functionality when the checkbox is checked.

```css
/* all the magic happing here ✨*/
input[type="checkbox"]:checked ~ main {
  --bg-color: #011627;
  --text-color: #edf2f4;
}
```

That's It 😎.

Example
{% codepen https://codepen.io/bipinrajbhar/pen/PoPpmBb %}

##📚 Further Reading:
* [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
* [Checked CSS Pseudo Class](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/Bipin_1598) if you’d like to be notified about new articles and resources.
Lazy loading in Vue
Tags: vue, webpack, todayilearned, tutorial
Published: 2020-04-25 07:20:48

Today I was browsing Vue resources and stumbled upon Webpack's [code splitting](https://webpack.js.org/guides/code-splitting/) feature. Several links later, I found [this video](https://vueschool.io/lessons/how-to-lazy-load-routes-with-vue-router) that demonstrates how seamless it can be done in Vue.

## Webpack's Code splitting
Code splitting is the practice of bundling javascript files into small chunks. Lazy loading refers to how Webpack serves these chunks only when needed. When done correctly, they alleviate page loading time.

## Example
For a given `routes.js`:
```javascript
import Home from './components/Home.vue'
import MyProfile from './components/MyProfile.vue'
import About from './components/About.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/myProfile",
    name: "myProfile",
    component: MyProfile
  },
  {
    path: "/about",
    name: "about",
    component: About
  }
]

export default routes;
```
This is most likely how your basics-to-vue-router tutorial has introduced routing and there's nothing wrong with it! However, we have Webpack at our disposal so let's use it to the fullest. Time to level up!

Lazy loading in Vue is literally just one line. Let's take "/myProfile" route and lazy load it by simply modifying the `component` property and converting it to an arrow function that imports the, err, component. 
```javascript
// before
component: MyProfile

// after
component: () => import( "./components/MyProfile.vue" )
```
Hooray! :tada: Another fancy term for this is *dynamic imports*. Behind the scenes, when we visit the root route "/home", Webpack served a bundled `app.js` file but set aside `MyProfile.vue` for later use. When the user visits "/myProfile" route, that's Webpack's cue to serve it.

Let's lazy load `/about` route too. The final `routes.js` should look like:
```javascript
import Home from './components/Home.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/myProfile",
    name: "myProfile",
    component: () => import( "./components/MyProfile.vue" )
  },
  {
    path: "/about",
    name: "about",
    component: () => import( "./components/About.vue" )
  }
]

export default routes;
```
I hope you noticed that we didn't lazy load the Home component because it defeats the purpose of code splitting. As a general rule of thumb, lazy load components that aren't needed on the landing page.
Peek-able loop
Tags: typescript, javascript
Published: 2020-04-25 07:18:43

Rust has this concept of peek-able iterators, It means the ability to loop through a list and look ahead to the next item in the same iteration. Here is a generator function that makes this work, yes it's true that this can be done anyway but it's nicer this way.

***If you want this in js just remove the signature type.***
``` Typescript
function* peekable(...iterable: Array<any>) {
  let i = 0;
  while (iterable.length) {
    yield [iterable[i], iterable[i + 1] || null];
    iterable.shift();
  }
}

// usage
for (const [currPerson, nextPerson] of peekable(👩‍🎤, 🧑‍🎤, 👨‍🎤)) {
    // ignore the end item with no 'next'
    if (nextPerson) {
        currPerson.next = nextPerson;
        nextPerson.prev = currPerson;
    }
}
```

Last note before I go, shift is destructive so you could always just increment a variable instead.

Nice relationship there.
A Sample Project Using WebAssembly with Go
Tags: go, webassembly, vue
Published: 2020-04-25 07:12:43

Earlier I wrote a service with Go, doing stuff like hash text, generate random password, base64 encoding/decoding, interpret unix time, etc. When I shared it with my colleague, his first reaction was to ask me if these are executed in browser or at server side. My answer was "server side" and he was not really satisfied, which is totally understandable.

Recently I got time to try WebAssembly, and I realise this service would be a nice example for WebAssembly: I can still write almost everything in Go, but eventually executed in client-side browser (I do understand the stuff can be done with JavaScript easily, but I simply want to try something different).

Here comes the result: https://handytools.xd-deng.com, and the source code on GitHub https://github.com/XD-DENG/handytools-go-webassembly. Overall the experience was quite nice, and I do look forward to see how WebAssembly would evolve and be used more broadly in the near future.

I think this project may work as a nice minimal example for folks who wonder how WebAssembly works with Go, so sharing here.

Let me know how you find it :)
Laravel 7 and GitHub actions
Tags: laravel, github, cicd, testing
Published: 2020-04-25 06:33:44

With Github actions you can automate some specific tasks and you can execute them on a dedicated environment.

Suppose that you have a Laravel application on a Github repository and you want to execute the test suite (via phpunit) every time you push your code on master branch.

From the Github repository page, click on “*Actions”*.

![Actions tab](https://cdn-images-1.medium.com/max/3120/1*WeMppTZ1ZiEKgASf9As-RQ.png)

On *Actions* section you can create and manage your workflow.
> # A workflow is a set of steps that it will be execute once you perform a specific action on your repository, for example push your code on master branch.

To create a new workflow, in the action section, click on the “*New workflow”* button.

![Create a new workflow](https://cdn-images-1.medium.com/max/2184/1*dKzWcmcSaeHW4R70qBPrwg.png)

Github detects automatically the language and/or the framework used in your application. In this case if you have a Laravel application, you can start from the Laravel workflow template.

![You can select the Laravel Workflow Template](https://cdn-images-1.medium.com/max/3612/1*SBtX7YXYaJBhrXZPuLp-Dg.png)

This is a very simple configuration but very useful to start quickly.

Click on “*Set up this workflow”* to select Laravel basic workflow.

A new file “*.github/workflow/laravel.yml*” is created for you, in your repository. You can change your file in order to accomodate your needs.

If you want to understand better all directives in the file, I suggest you to read my Medium post: [https://medium.com/@robertodev/continuous-integration-with-github-actions-and-laravel-6-e6cb9aa5aea9](https://medium.com/@robertodev/continuous-integration-with-github-actions-and-laravel-6-e6cb9aa5aea9)

For now, you can publish your actions clicking on “*Start commit*” button.

![Commit and Push your changes](https://cdn-images-1.medium.com/max/2000/1*UX62axx6ldC49lGsJ6QX5g.png)

To see your new Workflow, click again on “*Actions*” tab.

On the left panel you can see the list of your workflows, in this case you will have just one workflow named *Laravel*.

In the main table you will see the list of workflows executed. The first workflow is the more recent.

![](https://cdn-images-1.medium.com/max/5356/1*WNinr9eh-qA6uH4gnkxk9w.png)

If you click on the workflow executed, you can access in the workflow detail page. Selecting the action you can see the log and the list of the steps executed. Green is good , red is bad ;)

![](https://cdn-images-1.medium.com/max/3976/1*TNJYvh2EVXPfAI294E6byg.png)

Now, every time you push your code on master branch, the test suite will be executed automatically. If the workflow will fail you will be notified with an error and you will receive also an email.

I created also a video tutorial for Github actions + Laravel 
{% youtube llslbekD0_M %}

Feedbacks are welcome!
Portfolio generator built with NextJS + JSON Resume
Tags: javascript, webdev, react, showdev
Published: 2020-04-25 06:30:59


Github Repository: https://github.com/jkga/me 

If you are unfamiliar with JSON Resume, it is an open source initiative to create a JSON-based standard for resumes. It allows us to share our personal information to someone else without worrying the actual design, just links and texts. It also been used by hundreds or even thousands of online resume generators out there where you can just download things in PDF format.

But is it enough? The answer is: Well it depends. 

Nowadays, a lot of recruiters are not just looking on your resume. They also look on the **projects you created or contributed to**. They are looking on our personal website! But there is a really big problem, do we have one? I bet there are so many developers that have no personal site, either because of time constraints or have no interest at all.

Now this is how this project is trying to solve. Providing you something that is ready to use and only requires a few minutes to set up,  customizable (not WYSIWYG), and could be deploy on your own hosting provider.

Let's welcome **"ME"** ! A next-gen JAMSTACK template for developers that leverage the use of `JSON Resume` in creating a web based vitae and portfolio. It is built on top of `nextJS` and `react semantic ui`

### "Me" as a service. What?!
There is a ready made portfolio that isa accessible on this [website](https://me-web.now.sh). Just make sure you do the following
- Go to this [repository](https://github.com/jkga/json-resume-template)
- Look for the green button "Use this as a template"
![screenshot](https://user-images.githubusercontent.com/10413754/80201503-d4940000-8656-11ea-9ce9-bae19f70cc00.png)
- Name your repo `about.me`
![repo name](https://user-images.githubusercontent.com/10413754/80216230-53496700-8670-11ea-87ca-64230825a666.png)
*(UPDATE: your jsonresume will now work even without renaming the forked repository, but we still recommend doing so)*
- Visit https://me-web.now.sh/your-github-username-here
- Have some tea!

![default theme](https://user-images.githubusercontent.com/10413754/79752457-e9b31b00-8346-11ea-81df-4401a5ea3773.png)

> :bulb: For those who are trying to view their profile after they `forked` the [json-resume-template](https://github.com/jkga/json-resume-template). Make sure you rename it to `about.me` otherwise your profile will not be visible.


### As a template
Are you are someone who preferred to work on scratch or minimum boiler plate? Don!t worry, you can modify existing layout and even create a new `pluggable  template`. You can also use other `react-ui framework` as you wish

Please follow the [docs](https://me-docs.now.sh/#/template/?id=creating-template) for instructions or send me a private message to guide you


### PS: :heart: :heart: Just want to thank you all who showed interest in my project! Wishing you a good and very productive day!   
https://me-web.now.sh/
6 Responsibilities of a Devops Engineer
Tags: devops, sre
Published: 2020-04-25 06:25:42

Devops Engineers and  Site Reliability Engineers are the one who are  typically responsible for building, managing, monitoring, administering,  automating  and optimising  infrastructures, application configurations, databases, CI/CD Pipelines. They are the ones who keep the lights on.  I would put their responsibilities into following 6 buckets.

  * **BUILD** : Be it cloud based or on premise infrastructure, its the Devops Engineers who are responsible for building it. And they have to consider non functional requirements  such as scalability, availability, security, disaster recovery when they do.  In addition to building infrastructures, they are the ones who typically build VM and Container Images. Most of these tasks are automatable with tools such as terraform, packer etc.

  * **INSTALL AND CONFIGURE** : This involves installation and configurations of Operating Systems (which has now become easy with cloud and containers as base images are readily available), application stack including app servers, databases, middleware and anything in between. Devops engineers typically use declarative code to manage configurations with tools such as Ansible, Chef, Puppet.

  * **CI/CD**: Instant feedback is what continuous integration provides. Devops Engineers are the ones who are typically responsible for setting up and automating CI pipelines as well as defining and implementing Release/Deployment strategies. Be it container based or on cloud. Tools such as Jenkins, Spinnaker are useful to automate CI/CD pipelines.

  * **ADMINISTER** : Infrastructure is built, application stacks deployed, now what ?  This is where the Devops Engineers spend most of their times.  This includes application operations and debugging, a bit of database and storage administration, monitoring, optimising, security etc.

  * **TROUBLESHOOT** : This is a indispensable skill for a Devops Engineer and is useful for all tasks above. You are going to have issues, be it building infrastructures, configuration management, pipelines or just as part of running this infra. A Devops Engineer must have advanced level troubleshooting skills and must master the tools of the game.

  * **AUTOMATE** : Majority of the Devops Work can be automated. When not busy with issues or setting up things, a Devops Engineer typically spends time automating the recurring tasks.




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

If you ask any Devops Engineers what they do day in and day out basis, the answer would fall in one of the categories above.  Would you agree ?

Do join my [private community of Devops Ninjas](https://www.facebook.com/groups/devopsninja) to get updates on all my  articles, videos and Devops Learning Programs.
Mini Project #1 : BATTLESHIP GAME USING PYTHON
Tags: python, java, database
Published: 2020-04-25 06:24:33

In this project you will build a simplified, one-player version of the classic board game Battleship In this version of the game, there will be a single ship hidden in a random location on a 5x5 grid. The player will have 4 guesses to try to sink the ship .To build this game we will use our knowledge of if/elif/else, conditionals and functions in Python.

Download Link :- https://www.kashipara.com/project/python/2993/battleship-game-using-python-mini-project-
Spring Boot : RestTemplate
Tags: java, springboot
Published: 2020-04-25 06:11:14

Spring Boot does not provide auto-configured `RestTemplate` bean but we can create it by 

1.) Initialize `RestTemplate`
```java
@Bean
public RestTemplate restTemplate() {
    return new RestTemplate();
}
```

2.) Using `RestTemplateBuilder `
```java
@Bean
public RestTemplate restTemplate(RestTemplateBuilder restTemplateBuilder) {
    return restTemplateBuilder.build();
}
```

## CRUD Operation on RestTemplate

```java
restTemplate.getForEntity();
restTemplate.postForEntity();
restTemplate.put();
restTemplate.delete();
```
Autodocumenting Makefiles
Tags: todayilearned, 100daysofcode, python, django
Published: 2020-04-25 06:10:53

Today was my 6th day of 100 days of code. I was working on the forthcoming [Two Scoops of Django 3.x](https://www.feldroy.com/collections/two-scoops-press/products/two-scoops-of-django-3-x) and thanks to my co-worker Fabio I learned something new about Makefiles. This is an expansion on what he provided (I added the output list and sort feature).

# Using PYSCRIPT to Print Documentation

I've seen variations of this trick but this is the best version ever. At the top of your `Makefile`, put in this code:

``` makefile
.DEFAULT_GOAL := help # Sets default action to be help

define PRINT_HELP_PYSCRIPT # start of Python section
import re, sys

output = []
# Loop through the lines in this file
for line in sys.stdin:
    # if the line has a command and a comment start with
    #   two pound signs, add it to the output
    match = re.match(r'^([a-zA-Z_-]+):.*?## (.*)$$', line)
    if match:
        target, help = match.groups()
        output.append("%-20s %s" % (target, help))
# Sort the output in alphanumeric order
output.sort()
# Print the help result
print('\n'.join(output))
endef
export PRINT_HELP_PYSCRIPT # End of python section

help:
    @python -c "$$PRINT_HELP_PYSCRIPT" < $(MAKEFILE_LIST)
```

Next, we added concise docstrings for every `Makefile` command. Here's what we did for two of the commands:

``` Makefile
code:  ## Extracts code for uploading to GitHub
    python extractor.py

rmcode: ## Removes sample code 
    rm -rf code
```

Notice how each command's docstring starts with two pound signs? The "##"? That's what the auto documenter code needs to find the docstring.

# Trying it out!

When I type just `make` without any arguments, by default that triggers the `help` function, which runs the Python script at the top of the makefile. What I get is this:

``` bash
$ make
clean                Cleans up the environment
cleandocker          Cleans up the docker environment
code                 Extracts code for uploading to GitHub
dpdf                 Render PDF in docker
mdeps                Discovers missing LaTeX deps
mint                 Production ebook rendering
print                Renders print version
rmcode               Removes sample code 
short                faster rendering with minimal index check
tiny                 even faster rendering with no index check
```

Very useful!
Virtual assistant to decrease the load on call centres
Tags: datascience
Published: 2020-04-25 06:05:01

Emergency and medical services around the globe have seen an increased call volume from people showing symptoms of coronavirus. As customer representatives and social workers are increasingly ordered to work from home, companies and countries are turning to AI to bridge the resulting gaps in service.

After realizing that many people were asking the same general questions, implementing virtual assistant seemed to be the solution. Copenhagen used a [virtual assistant bot to screen people](https://news.microsoft.com/transform/how-international-health-care-organizations-are-using-bots-to-help-fight-covid-19/) for coronavirus; the bot answered 30,000 calls on its first day of work. This frees up healthcare professionals from the need to respond to inquiries and focus their time on providing care to patients.

[Microsoft Healthcare Bot](https://azuremarketplace.microsoft.com/en-us/marketplace/apps/microsoft-hcb.microsofthealthcarebot) provides self-service symptom checker with its language understanding models tuned to understand medical and clinical terminology. This self-assessment bot is critical to provide solutions that can help patients and clinical teams in the fight against this global health crisis.