teleren/devto huggingface dataset:
How to create a 404 error page in Html
Tags: html, css, tutorial, beginners
Published: 2021-03-09 14:49:42

***Hello, guys in this tutorial we will create a <a href="https://blog.stackfindover.com/404-page-not-found-page-design-2020/">404 Error Page Design</a> using HTML & CSS***

###Common Query###
1. How to create a 404 Error Page
2. how to create a 404 error page in HTML
3. How to create a 404 Error Awesome Page Design

**Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a <a href="https://en.wikipedia.org/wiki/HTTP_404">404 Error</a> Page using HTML & CSS**

###Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>404 Error Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="grid-row">
        <div class="colmun colmun-left">
          <img src="image-left.png" alt="image-left">
          <h1 class="px-spc-b-20">We can't find the page you are looking for.</h1>
          <span class="px-spc-b-20">This page has been relocated or removed.</span>

          <button class="go-home"><i class="fa fa-home"></i> Go Home</button>
        </div>
        <div class="colmun colmun-right">
          <img src="right-shape.png" alt="right-shape">
        </div>
      </div>
    </div>
  </div>
</body>
</html>
```

###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  outline: 0;
  color: #444;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
h1 {
  font-size: 50px;
  line-height: 60px;
}
span {
  display: block;
  font-size: 18px;
  line-height: 30px;
}
.container {
  width: 80%;
  max-width: 1600px;
  margin: auto;
}
.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  grid-gap: 50px;
}
.colmun-left {
  text-align: left;
}
.colmun-right {
  text-align: right;
}
.px-spc-b-20 {
  padding-bottom: 20px;
}
button.go-home {
  padding: 5px 20px;
  background: #ffa000;
  border: transparent;
  border-radius: 2px;
  box-shadow: 0 0 2px rgb(0 0 0 / 30%);
  cursor: pointer;
  margin: 20px 0;
  color: #fff;
}
button.go-home i {
  color: #fff;
}
img {
  display: block;
  width: 100%;
}
```

###404 error page design video output:####
{% youtube wRvDFn-h5Io %}
Video: Visualize the architecture of your Python app, in VS Code, in 2 / minutes
Tags: python, vscode, webdev, architecture
Published: 2021-03-09 14:43:53

[AppMap](https://marketplace.visualstudio.com/items?itemName=appland.appmap) is a VSCode extension which helps you improve your code by showing you how it really behaves, feature by feature, as you work. It does this by automatically generating beautiful, interactive maps of architecture and code behavior right in your editor.

This 2 ¹/₂ minute video shows how install the AppMap extension, how to configure it to map both your code and the Django framework, and how to navigate your code using the interactive diagrams.

It uses the [website code of the Chicago Python Users Group](https://github.com/chicagopython/chipy.org) as an example. Try it yourself!

For a textual walkthrough, check out https://github.com/applandinc/vscode-appland/blob/master/doc/TUTORIAL-PYTHON-CHIPYORG.md
Day 71 Of 100DaysOfCode: Web Scraping
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-03-09 14:18:26

This is my 71th day of #100daysofcode and #python learning. Like daily today also learned from [Datacamp] (https://campus.datacamp.com/courses/web-scraping-with-python/xpaths-and-selectors?ex=15) regarding to the topic web scraping. Today I learned about simple xpath, slasher double feature, (At)tribute, content with contains, extracting data from a selector list, inspecting the HTML.

Here is python code to extract data from selector list.
#Python code

```python
# Import a scrapy Selector
from scrapy import Selector

# Import requests
import requests

# Create the string html containing the HTML source
html = requests.get( url ).content

# Create the Selector object sel from html
sel = Selector( text = html )

# Print out the number of elements in the HTML document
print( "There are 1020 elements in the HTML document.")
print( "You have found: ", len( sel.xpath('//*') ) )
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 71 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Web-Scraping From [Datacamp](<a href="https://t.co/6UM9B22c7f">https://t.co/6UM9B22c7f</a>)<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/A5vd6ID1mE">pic.twitter.com/A5vd6ID1mE</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1369287624490283008?ref_src=twsrc%5Etfw">March 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Adding VS Developer Command Prompt To Windows Terminal (VS 2019)
Tags: productivity, windowsterminal, visualstudio, dotnet
Published: 2021-03-17 08:29:29

---
title: Adding VS Developer Command Prompt To Windows Terminal (VS 2019)
published: true
date: 2021-03-09 14:02:58 UTC
tags: Productivity,WindowsTerminal,visualstudio,dotnet
canonical_url: https://yer.ac/blog/2021/03/09/adding-vs-developer-command-prompt-to-windows-terminal-vs-2019/
---

In an effort to be using Windows Terminal for everything Powershell/Command related these days it occurred to me that I hadn’t moved my VS2019 Command Prompt to Windows Terminal. This meant having to open VS all the time (as well as make sure that the command was mapped in external tools!) (If you need help on that I cover that partially in the post on [Unshelving TFS changes into another branch (VS 2017)](https://yer.ac/blog/2019/05/14/unshelving-tfs-changes-into-another-branch-vs-2017/))

This guide will assume you already have Windows Terminal on your system. If you don’t you can get it from the [Windows Store,](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701) or on GitHub.

## Editing Your Terminal Settings

Open up Windows Terminal, and go to settings (Ctrl + ,)

This is the JSON that controls the Terminal. Find the `list` array.

Add a new JSON object to this array, as per below

```
{       
        "commandline": "cmd.exe /k \"C://Program Files (x86)//Microsoft Visual Studio//2019//Enterprise//Common7//Tools//VsDevCmd.bat\"",
        "cursorColor": "#EEEEEE",
        "cursorShape": "bar",
        "fontFace": "Consolas",
        "fontSize": 10,
        "guid": "{5ee0706e-b015-46b2-98a3-2122a8e627d3}",
        "historySize": 9001,
        "icon": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2019\\Enterprise\\Common7\\IDE\\Assets\\VisualStudio.70x70.contrast-standard_scale-80.png",
        "name": "Developer Command Prompt for VS2019",
        "padding": "0, 0, 0, 0",
        "snapOnInput": true,
        "startingDirectory": "%USERPROFILE%"
    }
```

This will tell Terminal to start cmd.exe and run the VS developer command line tools.

Now go back to Windows Terminal and you should see a new entry in the dropdown list which when selected should launch the VS prompt.

![](https://i2.wp.com/yer.ac/blog/wp-content/uploads/2021/03/image.png?resize=633%2C295&ssl=1)<figcaption>Windows Terminal with new option selected</figcaption>

![](https://i1.wp.com/yer.ac/blog/wp-content/uploads/2021/03/image-1.png?resize=580%2C221&ssl=1)<figcaption>VS command prompt within Windows Terminal</figcaption>

## Adding An Icon

I added an Icon object that VS already had on the system so that it will look nicer in the dropdown. You can point it to _any_ image on your system, but for reference the images that VS uses are stored permanently at:

`C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\Common7\IDE\Assets`

The post [Adding VS Developer Command Prompt To Windows Terminal (VS 2019)](https://yer.ac/blog/2021/03/09/adding-vs-developer-command-prompt-to-windows-terminal-vs-2019/) appeared first on [yer.ac | Adventures of a developer, and other things.](https://yer.ac/blog).
The {Zero, One, Two, Many} Tip For Better UX
Tags: design, productivity, codequality, react
Published: 2021-03-09 14:18:20

*(image from [pexels](https://www.pexels.com)) 

**Being consistent with your code designs is hard**, you need to be careful to watch out for all possible states that your code might fall into and take care of those, but where do we start?

When creating a new component I usually find myself having already created the data necessary to populate the component. This means I am usually starting my design with one to two copies of the specific component.

```jsx
todoItems.map( todoItem => {
    <TodoItem todoItem={todoItem} />
})
```

Sometimes the lazy part of ourselves takes control and just lets this component like this and moves on to the next subject. But there is a problem with this approach.

### Zero Items case

In case there are 0 todo items the page will look ugly and empty. What should there be instead?

- Help the user navigate and add a new to-do item.
- Inform him that there should be something there instead of nothing.

The other case that we should take care of is the MANY items case. What happens if we got 1000 items? 

### Many items case

In that case, we need to have considered how these elements will look like.

- Add a "see more" button.
- Load data asynchronously if possible for best UX.
- Let the user minimize it after opening it.

Following this {zero, one, two, many} tecnique you will never have to encounter these nasty empty designs again!
How I can execute a command at a specific date and time in laravel 5.8?
Tags: help, php, laravel
Published: 2021-03-09 14:17:53

As I ask bellow:
{% stackoverflow 66548565 %}

I try to schedule the execution some command on a specific date and time only once. 

But laravel's options allow me to schedule only at a specific frequency over and over again, which I find it wastefull for only once command executon.

So can you offer me an idea how I can schedule a command execution only once at a specific date and time?
TIL sub for A if X else B
Tags: python
Published: 2021-03-09 14:16:52

Welp, today instead of the usual
```python
value = a if condition else b
```
on the internet I saw
```python
value = condition and a or b
```
It shall be noted that those are not equivalent - 
if `condition` is `False` we do get `value = b`, but if `condition` is `True` we get `value = a or b`, which is `a` only under certain circumstances.
So this method really only works for simple cases with `a` not being an "empty" version of its type - since `0 or 5 == 5` and `'' or 'qwe' == 'qwe'`.

Still, looks fancy and works sometimes. I am not a huge fan of how the construct `a if c else b` looks like, so I might start doing this in my code.
Setting The Default Terminal In VS Code
Tags: tutorial, beginners, devjournal, todayilearned
Published: 2021-03-09 14:09:53

Sometimes you want a tutorial that is straight and to the point. You want the _how_, not the who, what, where, when, why. 

Today's quick lesson: setting the default terminal in VS Code. 

# Steps

1. Open VS Code
2. Press `CTRL+Shift+P` / `⇧⌘P`  and search for `terminal select default shell`
3. Make your selection and press enter (In my case I chose `Git Bash`)

All of your new terminals will now default to your choice 🎉 

I hoped this helped you. If there are other quick tips you'd like, or more in depth topics you'd like me to cover, leave a comment or reach out to me, [@giannelli.tech](https://twitter.com/GiannelliTech)

Thanks for reading! 👩‍💻

> Photo by [Pixabay](https://www.pexels.com/@pixabay?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from [Pexels](https://www.pexels.com/photo/blur-bright-business-codes-207580/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)
File Transformation (variable substitution) and issues faced in Azure Devops  -  YAML
Published: 2022-07-05 10:51:42

---
title: File Transformation (variable substitution) and issues faced in Azure Devops  -  YAML
published: true
date: 2021-03-09 14:06:57 UTC
tags: 
canonical_url: https://lkgforit.com/file-transformation-variable-substitution-and-issues-faced-in-azure-devops-yaml-3556a92de0b2
---

Following this document used file transformation task in Azure Devops to substitute variables in json and xml files:

[https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/file-transform?view=azure-devops](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/file-transform?view=azure-devops)

Video Explanation

[https://youtu.be/\_iPfzH3ENAk](https://youtu.be/_iPfzH3ENAk)

```
# File transform
# Replace tokens with variable values in XML or JSON configuration files
- task: FileTransform@1
 inputs:
 #folderPath: $(System.DefaultWorkingDirectory)/**/*.zip 
 #enableXmlTransform: # Optional
 #xmlTransformationRules: -transform **\*.Release.config -xml** \*.config-transform **\*.$(Environment.Name).config -xml**\*.config # Optional
 #fileType: # Optional. Options: xml, json
 #targetFiles: # Optional

```

When using this you will get following error message: _changes already present message_.

Got the _changes already present message_ when directly targeting the source folder. The idea is that the build package is edited by this task, so configuration is updated before test or deployment.

This worked for me (note the \*\*/):

steps:

```
task: FileTransform@1
displayName: File Transform: appsettings.json
inputs:
folderPath: $(System.DefaultWorkingDirectory)
fileType: json
targetFiles: **/appsettings.json

```

To prevent another error that will be experienced if doing variable substitution for non-windows app : _Cannot perform XML transformations on a non-Windows platform_

you need to specify an empty `xmlTransformationRules`. This works against a Linux app service:

```
task: FileTransform@2
  inputs:
    folderPath: $(Pipeline.Workspace)/path-to/my-package.zip
    jsonTargetFiles: appsettings.json
    xmlTransformationRules: '' # disabled

```

Referred this issue in GitHub repo hope it helps someone:

[https://github.com/MicrosoftDocs/azure-devops-docs/issues/6563](https://github.com/MicrosoftDocs/azure-devops-docs/issues/6563)

Refer videos in my channel for live explanations.

[https://youtu.be/QxJ\_y6pV6No](https://youtu.be/QxJ_y6pV6No)

[https://youtu.be/dGLWBWZavhw](https://youtu.be/dGLWBWZavhw)

[https://youtu.be/C8t4EUV6yok](https://youtu.be/C8t4EUV6yok)

YouTube Channel

[https://www.youtube.com/channel/UCnYzqHl\_und412jN2RTjJVA](https://www.youtube.com/channel/UCnYzqHl_und412jN2RTjJVA)
Text Summarization with Google AI's T5 in Python
Tags: python, machinelearning, datascience, tutorial
Published: 2021-03-09 14:04:06

{% youtube egDIqQIjDCI %}

Easy text summarization using Google AI's T5 model using HuggingFace transformers and PyTorch in Python.

Automatic text summarization allows us to shorten long pieces of text into easy-to-read, short snippets that still convey the most important and relevant information of the original text.

In this video, we’ll build a simple but incredibly powerful text summarizer using Google’s T5. We’ll be using the PyTorch and HuggingFace’s Transformers frameworks.

This is split into three parts:

1. Import and Initialization
2. Data and Tokenization
3. Summary Generation
Flask and .env
Tags: flask, python, env
Published: 2021-03-09 14:00:43

To learn how to dockerize react application visit - [https://lagandlog.com/logs/how-to-dockerize-react-app](https://lagandlog.com/logs/how-to-dockerize-react-app)

env files allow you to put your environment variables inside a file. It actually looks like,
```
REDIS_ADDRESS=localhost:6379
MEANING_OF_LIFE=42
MY_SECRET="helloworld"
```
Creating .env files in your projects help you to manage all secrets or variable in a file and in a secret place. It's not recommended to push the env file to the git repository.

In our post, we are using the .env file inside the Python Flask application.

Inside your virtual environment of the project,
```
pip install python-dotenv
```
Reads the key-value pair from the .env file and adds them to the environment variable. It is great for managing app settings during development and in production using [12-factor](http://12factor.net/) principles.

The most common usage consists of calling load_dotenv when the application starts, which will load environment variables from a file named .env in the current directory.

Create your **.env** file along-side your settings/config file.

```
.
├── .env
└── config.py
```
Inside your config file, enter the following lines,

```
from dotenv import load_dotenv
load_dotenv()
```
Now all your key=value pairs will be loaded into your application. You can use the variable as,
```
import os
SECRET_KEY = os.getenv("MY_SECRET")
```
That's it you can now create .env file and use it across the flask application.

To learn how to dockerize react application visit - [https://lagandlog.com/logs/how-to-dockerize-react-app](https://lagandlog.com/logs/how-to-dockerize-react-app)

# Happy coding 👾
A freeCodeCamp Challenge Done (Breaking out of the learning phase)
Tags: webdev, showdev, html, css
Published: 2021-03-09 13:51:54

I've been stuck learning how to code for 2 months.
I am not sure how to put(or summarize) this in writing but I've been stuck in this loop where I learn, forget then go back to re-learn. I just felt like I didn't know enough and did not know how to go about knowing enough(🤦).

After talking with a few friends and seniors, I came to the decision to start a blog to document what I learn and build tiny projects along the way. I then came across this <a href="https://dev.to/marulucenat/working-on-my-first-projects-would-love-some-feedback-2dib">dev.to blog post by Maru </a>where she documented her projects done on freeCodeCamp. Feeling inspired I went there(freeCodeCamp) too.

<h1>What I learned?</h1>
<ul>
<li>
<h3>You don't need to learn <i>everything</i> to start with projects</h3>
<p>I always had this overwhelming urge to study a voluminous amounts of work before trying to do some practice on my own. That's where the forgetfulness comes in (and then I go back to re-learn😅)</p>
</li>
<li>
<h3>Tutorial sites which end projects/challenges are dope!</h3>
<p>I found it to be like preparing for an exam, that is not peeping during the test 😅 but more importantly it gives a sense of purpose to what I learn. Knowing I will be tested at the end of the course kept me focus and <i>non-lazy</i>🤭</p>
</li>
</ul>

<h1>What I did(Project worked on)</h1>
The first project after the RWD(Responsive Web Design) course is the <b>Tribute Page</b>. I did this: A Helen Keller Tribute
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvhd4qsw1p43pl1jhv5n.png)
<a href = 'https://codepen.io/babi-b/full/mdOzzZj'>CodePen link</a>
<ul>
<h2>Feedback:</h2>
The project was relatively not as hard as I feared it'll be(as expected giving that is it the very first project) and I actually had fun doing it😊.<br>
However,
<li>I took up a lot of time deciding what colors were good and would work in harmony. I hope to get better at this with time</li>
<li>The <code>footer</code> did not come out as I desired. I can't seem to be able to get it aligned properly</li>
<li>I had some difficulties deciding what screen size to start responsiveness</li>
</ul>
That said, I am open to advice, reviews and <i>constructive</i> criticism (😏). I hope by this, I would learn faster (and surer😂).

There are more projects I will embark on(hopefully) and I hope to have to with me every step of the way😁

<b>PS:</b> I am open to advice on learning strategies too!
Tugas Mesin Listrik 2
Published: 2021-03-09 13:48:07

Nama: Kristian T. Suebu
Nim: 201864039


1. Paralel generator saling menghubungkan diantara dua buah generator atau lebih. Generator akan dinyalakan secara bertahap satu persatu terlebih dahulu untuk menghasilkan daya awal yang rendah. Ketika beban meningkat dan daya dari generator tidak mampu, maka generator lain akan dinyalakan dan dioperasikan paralel terhadap generator yang telah beroperasi sebelumnya. Proses kerja paralel generator atau sinkronisasi dapat dilakukan secara manual ataupun otomatis.

2.Jatuh tegangan adalah selisih antara tegangan ujung pengiriman dan tegangan ujung penerimaan, jatuh tegangan disebabkan oleh hambatan dan arus, pada saluran bolak balik besarnya tergantung dari impedansi dan admitansi saluran serta pada beban dan faktor daya.
$500 USD developer bounty! 
Published: 2021-03-09 13:40:29

Who? Fullstack Javascript developer

When? Anytime from now

What? Integrating fair streaming platform, Audiotarky, within Kendraio Player – a proof-of-concept media player interface for aggregating and streaming multiple services, incorporating web monetisation technology, built within [Kendraio App](https://www.kendra.io/kendraio-app). 

Kendraio App is a general framework for creating low-code applications. Kendraio App was originally created to service the creative/music industry to enable easy asset and rights management both locally and on third-party platforms. But what we've ended up creating is a generic data browser that plugs into remote APIs and enables highly configurable low-code interfaces to be built. As part of our project for Grant for the Web, we developed [Kendraio Player](https://app.kendra.io/player/all), an end-to-end reimagining of the interactions between streaming services, artists and consumers and how we can monetise music on the web to create the healthier, more open and fair internet that Grant for the Web strives to see built. Audiotarky are building a "new music streaming platform, that puts privacy and fairness in front of algorithms and shareholders".

We have an existing audio player that supports Web Monetization with Coil login - with or without a browser extension - but not yet with Audiotarky. Candidates should have some existing experience with Javascript and web API’s. Your task will be to enable a user to retrieve artist and track metadata from Audiotarky’s API using a Kendraio Flow. Bonus points for enabling an artist to import tracks to Audiotarky including payment pointers using Kendraio App. 

Learn more and get in touch via our GitHub issue below. {% github https://github.com/kendraio/kendraio-app/issues/169 %}