teleren/devto huggingface dataset:
VS Code Extension to Pick Relevant Emojis for Git Commit Messages 🐛
Tags: productivity, vscode, javascript, git
Published: 2022-08-19 10:43:03


## Emoji in git commit message

If you're VS Code user and also a fan of emojis, this new VS Code extension might appeal to you, especially if you've read and liked [*Emojis for Better Git Commit Messages*][emojis-post] for its exhaustive table of contextual emoji data which were gathered over years. This new extension is called **Git-Emoji**. What it does is to provide you with relevant emoji suggestions to add to your git commit messages. This short screen capture would show you how this extension works:

[emojis-post]: https://babakks.github.io/article/2020/07/03/emojis-in-git-commit-messages.html
![How to get relevant emojis for git commit message](https://babakks.github.io/img/2022-08-19-capture.gif)

To install it, search for “Git-Emoji” in the extension sidebar and click on the _Install_ button. Alternatively, you can also install it as follows:

1. Press <kbd>Ctrl</kbd>+<kbd>P</kbd>
2. Type in `ext install git-emoji.vscode-git-emoji` and press Enter/Return

## Dataset

If you’re interested in the emoji/contextual data behind this extension, you can access the underlying dataset via [git-emoji/dataset-js](https://github.com/git-emoji/dataset-js) repository on GitHub. It’s also available as a NPM package; [`@git-emoji/dataset-js`](https://www.npmjs.com/package/@git-emoji/dataset-js).

Hope you like this extension. 🍏
Custom Select Input with React
Published: 2022-08-19 10:42:00

Hi aliens 👽, I am here to share most simplest pattern for select input. If you are struggling with select input 😥,confused and facing difficulties to use pure html select input , then this blog is for you my dear. In this blog we are going to discuss controlled input without using any third party library.
lets jump into the code...💻


```
// App.js
import "./styles.css";
import Dropdown from "./Dropdown";
import { useState } from "react";
export default function App() {
  const [selected, setSelected] = useState("Choose One");
  return (
    <div className="App">
      {/* custom dropdown menu */}
      <Dropdown selected={selected} setSelected={setSelected} />
      {selected}
    </div>
  );
}

```


```
// Dropdown.js
import { useState } from "react";
function Dropdown({ selected, setSelected }) {
  const [isActive, setIsActive] = useState(false);
  const options = ["React", "Vue", "Angular"];
  return (
    <div className="dropdown">
      <div className="dropdown-btn" onClick={(e) => setIsActive(!isActive)}>
        {selected}
        <span className="fas fa-caret-down"></span>
      </div>
      {isActive && (
        <div className="dropdown-content">
          {options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
                setIsActive(false);
              }}
              className="dropdown-item">
            {option}
            </div>
          ))}
        
        </div>
      )}

    </div>
  );
}
export default Dropdown;

```
Here we are lopping through options array for option tag.
This is fully controlled component  

- We have create the isActive state for updating the option display if it is false , options will hide , and if it is true we are rendering option , this is simple conditional rendering .

- then after we are using onChange event for targeting option value 

- onChnage we are capturing event , and we are setting event.target.value to selected state 

  woah ! finish yep so simple to create your own custom controlled select input , hope you like the information , you can also check sandbox link and play around it!😺
https://codesandbox.io/s/custom-dropdown-select-oyisxm
Mistakes people do while learning programming
Tags: webdev, beginners, programming
Published: 2022-08-19 10:33:57

After training a few hundred people in coding I think I can answer this one.

In my experience many learners make one or more of the following mistakes:

1. They underestimate how hard it is to learn to code
2. They underestimate how long it will take and how much they need to learn
3. They fail to prioritize their learning, especially in terms of how much time they will need per day
4. They don’t connect with a network of other learners
5. They give up too soon

Here are my suggested solutions for each mistake, in turn.

1. Coding is difficult to learn. It will likely be the most challenging academic task that many have ever taken on. All students should absorb the idea that they WILL encounter obstacles, experience frustration, doubt their intelligence, and eventually require assistance. A much. For several months, this procedure will be repeated.

2. It will take a new developer at least a year to become an employable junior developer with four hours a day of training and practice. Longer may be needed. You have a LOT to learn; it goes beyond simple syntax. You also need to become familiar with git, databases, fundamental networking ideas, debugging, a set of programming tools, a mechanism to distribute your apps, and perhaps a lot more auxiliary technologies. Particularly in web development, this is a thing.

3. Learning to code isn’t a thing you’re doing, it is the thing you’re doing for the next year. Everyone has to know this. You have to prioritize it over friends, your favorite TV shows, sports, exercise, self-care time, etc. It requires sacrifice, especially in the beginning. Even family time needs to be sacrificed to an extent. I’m not saying don’t talk to your spouse or play with your kids, but you have to set up a schedule and stick to it. If that means leaving the house at the agreed upon times, then do it. Getting your spouse behind you while you do this is a must. Have the conversation and make a firm agreement to prioritize what you’re trying to do. It is in the nature of spouses to try to steal some of their time back from your coding. Stay strong and remind your loved one that while you still care for them deeply, you are doing this for your family and your future.

4. Don’t learn to code alone! Find a local meetup group for coders. If there isn’t one, start one. Also, find online groups like the one at Free Code Camp. Ask for help and offer it to others when they ask. This is critical. You need to start taking steps into the world of software development.

5. Quitting is a guaranteed path to failure. Please see point #1, up above. When the coding gets hard the best answer is not to give up but to persevere. Tenacity is talent.

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/channel/UCze04H5oeudQ01G9DDj-frA)
how to use data of useParams in createContext hook in functional component react js
Published: 2022-08-19 10:31:00

i want to pass data of useParams() inside the createContext() so that i can use data in different components

login component:-

[import React,{createContext} from 'react';
import {useParams} from 'react-router-dom';

export const Context = createContext(companyName);

function Login(){
const {companyName} =  useParams();  
return(
    <div>//somedata//<div?    
)
} 

export default Login]
Note:- in companyName i have data {name = "hee"}

another component:-

[import React,{useContext} from 'react';
import { Context } from './Login';
 function Component(){
const aa = useContext(Context)
  console.log("context",aa)
}]
in this component i get context undefined

i try this also

  [ import React,{createContext} from 'react';
    import {useParams} from 'react-router-dom';
    
    export const Context = createContext();
    
    function Login(){
    const {companyName} =  useParams();  
    return(
      <Context.Provider value={companyName}>
        <StateMaster/>
      </Context.Provider>

        <div>//somedata//<div?    
    )
    } ]
    
    export default Login
this time app crashed, login component not working (render), i just want to pass data of useParams into createContext. please help to accomplish this
FIS Phase 3 Project Demonstration (EMN-F Manager)
Published: 2022-08-19 10:18:00

EMNF-S Manager is a short name for Engine Manufacturing.

This is my phase 3 project at Flatiron School.

---

For any questions, feedbacks, please leave a comment.

Thank you. 


Github: https://github.com/jmjkim/fisphase3-project
How to Write High-Quality Proposals for Clients in Upwork?
Tags: freelancing, webdev, beginners
Published: 2022-08-19 10:04:10

In this article, I'll show you how to write an exceptional cover letter, you'll learn how to write proposals that get customers interested in your offers, and how to convert them into paying customers.

The most important part is to make sure you're clear on what information you'd like the client to include in their proposal. This includes:

1) What are their current processes?
2) What are their goals?
3) What do they want to change?
4) Why should they choose your services over other potential vendors?

Here are the steps by steps that you have to Follow to write up High-Quality Proposals for Clients

1. Start with a strong introduction: The first sentence of your proposal should introduce the client's needs, goals, and challenges; this will give them an idea of what they're hiring you to do. Make sure you can also add clients' names so it impacts more to hire you rather than other clients.

2. Give context: State where your project falls within the broader scope of their work or goals; this will help them understand why they hired you over another freelancer who might have done it better or cheaper.

3. Show off your experience: Describe how much experience you have writing similar projects and how much value it would bring to their business (for example, if they want someone to create content for their website). It can be helpful if you include links

4. The most important thing for a client is to get quality work done on time. Therefore, you should always include a timeline with your proposal so that your clients can see whether the work will be completed on time or not.

5. Upwork has a Bid feature where you can bid on projects, and the more bids you make, the higher your chances are of getting the project. You can also rank projects in this way. If you get enough bids on your project, it will show up higher on your client's list.

**Here is Some Example of the Proposal that you will write for your clients.**

```
Hi [Client name or company]

I’m [Your Name] and I’d like to help complete your project.

I understand how important timely deliverables and clear communication are to working together remotely. I have been a freelancer for 3 years now and have received strong feedback on the ability to deliver high-quality work by the deadline.

Here is a sample of my work:

[Insert link}

Additionally per your post, I understand the importance of the 3-day turnaround time and having the deliverables in the preferred format. I will definitely be able to meet your expectations for this particular project.

Please let me know if you have any questions or if I can provide more samples of my work.

Best regards,

[Your Name]
```

I hope you Like our Posts and If you find some important tips then Please Follow me on LinkedIn for More Like these Posts.

**Credit Goes to:** 

**This Posts is First written in LinkedIn by Me:**

https://www.linkedin.com/pulse/how-write-high-quality-proposals-clients-upwork-blog-triggers/
當Vue Array資料變動如何做到即時渲染
Tags: webdev, vue
Published: 2022-08-19 10:01:00

## 前言

在Vue中，Reactivity(響應式)是Vue的一大特色，但由于 JavaScript 的限制，有些情況Vue不能檢測array或object的變化來及時渲染頁面，這篇主要針對array來迴避這個問題，以及如何讓他及時渲染。

## Array數據變動 ⇒ 甚麼情況不會Reactivity

Vue不能檢測以下數據變化:

1.  直接賦值
    
    ```jsx
    vm.items[indexOfItem] = newValue
    ```
    
2. 修改數組長度
    
    ```jsx
    vm.items.length = newLength
    ```
    

## 如何Reactivity

舉例

```jsx
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是****Reactivity****
vm.items.length = 2 // 不是****Reactivity****
```

以下兩種方法都可以實現和vm.items[indexOfItem] = newValue同樣效果，同時也會在****Reactivity System觸發狀態更新****

```jsx
vm.$set(vm.items, indexOfItem, newValue)
```

```jsx
vm.items.splice(newLength)
```
Vue | v-bind:class&style 不同的表示法
Tags: webdev, vue
Published: 2022-08-19 10:00:30

## 1. 物件的表示 Object Syntax

```html
<div v-bind:class="{a: isA, b: isB}"></div>
```

```jsx
data: {
  isA: true,
  isB: false
}
```

這裡對 a 和 b 這兩個名稱的class，分別指定 isA 和 isB 的 Vue屬性名稱，改變這兩個屬性的value(bool)，即可以控制這個div標籤套用哪個class樣式，輕鬆實現toggle class。

## 2. 陣列的表示 Array Syntax

```html
<div v-bind:class="[activeClass, errorClass]"></div>
```

```jsx
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
```

如果想實現toggle class

```html
<div v-bind:class="[isA ? activeClass : '', errorClass]"></div>
```

又或者結合物件

```html
<div v-bind:class="[{ activeClass: isA }, errorClass]"></div>
```

---

[https://vuejs.org/v2/guide/class-and-style.html](https://vuejs.org/v2/guide/class-and-style.html)
JavaScript Function Definitions 函式定義種類
Tags: javascript
Published: 2022-08-19 09:52:00

1.  一般含名字類型
    
    ```jsx
    function myFunction(a, b) {
      return a * b;
    }
    ```
    

1. 匿名函式
    
    ```jsx
    const x = function (a, b) {return a * b};
    ```
    

1. 建構函式、建構式、建構子:
被 使用new來實體化物件的函式。
    
    ```jsx
    function person(name, age) {
    	this.name = name;
    	this.age = age;
    }
    
    let me = new person("David", 23); //此地的 person()就是個建構子
    ```

    
在建立 new這個實例(instance)的過程，new這個運算子做了幾件事:
    
    - 建立新的記憶體空間與物件
    - 將this指向新的物件
    - 執行函式
    - 回傳這個物件
    
建構式 (Constructor) 通常是使用在初始化物件，因為會執行函數，並且要自訂物件的屬性，例如上面範例的name和age屬性。
X++ & ++X 差別與其中的涵義
Tags: javascript
Published: 2022-08-19 09:51:49

## 前言

在學習閉包時看到一段程式碼的輸出覺得不解:

```jsx
function aFunc(x){
  function bFunc(){
    console.log( x++ )
  }
  return bFunc
}

const newFunc = aFunc(1)
newFunc()
newFunc()
```

output:

- 1
- 2

為啥不是輸出 2和3呢?

查了一下x++這個看過無數次的語法後，才發現對他有多不熟悉，

++x increments the value of x and then returns x
x++ returns the value of x and then increments

原來 x++代表 先返回 x 再x+1

假如 x是 3，那 ++x 將把 x 設定為 4 並回傳 4，而 x++ 會回傳 3 ， 接著才把 x 設定為 4。

完整點的例子:

```jsx
var x = 5;

console.log( x++ ) // output x=5
console.log (x) //output x=6
console.log(++x) //output x=7
console.log(x) //output x=7
```

參考文章:

[https://www.sololearn.com/Discuss/727179/x-x-i-cant-understand-it](https://www.sololearn.com/Discuss/727179/x-x-i-cant-understand-it)

[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators)
Monokle 1.10 improves on cluster inspection
Tags: kubernetes, devops, opensource, gitops
Published: 2022-08-19 08:32:16

We're happy to announce Monokle 1.10 - now adding a bunch of interactive features to help you inspect your k8s clusters:

- Open a shell directly to a pod from the UI
- Follow pod logs in the UI
- Scale / Restart actions
- See object age/status directly in the k8s navigator

We've also added a terminal to help you run your fav cli tools from inside the UI - and improved the integrated OPA validations, global search-and-replace, Docker Image inspector, Cluster-compare, etc. etc.

Lot's of goodies to make your everyday GitOps / Kubernetes configuration workflows so much easier!

As before - Monokle is 100% OSS/MIT licensed and free to download from GitHub - no registration required.

If you have any feedback - good or bad - we'd love to hear it!

Download the latest release from GitHub: https://github.com/kubeshop/monokle

Release announcement is at https://kubeshop.io/blog/monokle-v1-10-release-notes

Oh - and it's Monokles' 1 year anniversary - Happy Birthday!
JS | 使用事件keypress遇到的問題
Tags: webdev, javascript, vue
Published: 2022-08-19 09:47:14

## 前言

使用vue，做輸入框過濾字的功能時，規定使用者只能打中文數字英文，不能打標點符號和空白字元。然而，不曉得甚麼原因抓不到文本框最新的value

```html
<textarea 
  v-model="Msg" 
  name="text" 
  id="comment" 
  placeholder="Please Enter Characters." 
  maxlength="100"
  @keypress="Msg.replace(/[^0-9a-zA-Z\u4E00-\u9FA5]/,''), 200);"
  >
  </textarea>
```

因為規定能打中文但不能打標點符號，但是打中文時都會按到標點符號按鍵，就會觸發到事件函數，要解決這個問題，就必須用keypress事件，如果是輸入中文字(注音)的話，使用 keypress 事件都不會被觸發。

## 原因

js的鍵盤事件有三種，keydown、keypress、keyup，keydown是按下鍵盤觸發，keypress跟keydown類似，差別在於keypress只針對可以輸出文字符號的按鍵有效，按ESC、backspace、方向鍵等就無效，最後keyup是鍵盤放開的那霎那觸發。

**而只有keyup事件是可以拿到最新的value。**

所以使用keypress或keydown時，就需要用setTimeout函數，讓事件函數執行的晚一點，就可以了。

```html
<textarea 
  v-model="Msg" 
  name="text" 
  id="comment" 
  placeholder="Please Enter Characters." 
  maxlength="100"
  @keypress="setTimeout(()=>{Msg.replace(/[^0-9a-zA-Z\u4E00-\u9FA5]/,'')}, 200);"
  >
  </textarea>
```
JS | 整理無關鍵字、let、var的不同
Tags: webdev, javascript
Published: 2022-08-19 09:41:00

var是全域變數宣告?

這句可能你覺得很對的一句話，實際上是個的錯誤...

無關鍵字賦值、var 宣告、let 宣告最大的差別在於**生存區域的不同**。無關鍵字賦值意味著全域變數的宣告，當然你在全域範圍使用 var/let 宣告也是全域的。

原文網址:

[https://tw.alphacamp.co/blog/javascript-var-let-const](https://tw.alphacamp.co/blog/javascript-var-let-const)

裏頭有相當多詳細觀念

整理:

1.  無關鍵字賦值: 意味著全域變數的宣告
    
    ```jsx
    function printG(){
      g = 1
      console.log(`printG: `, g)
    }
    
    printG() // => printG: 1
    console.log(`Global G:`, g) // => Global G: 1
    ```
    
2.  var宣告: 其生存範圍存在於函數內
    
    ```jsx
    function printV1(){
      var v = 2
      console.log(`printV1:`, v)
    }
    
    printV1() // => pritnV1: 2
    try{
      console.log(v)// error  
    } catch {
      console.log('not find v');
    }
    ```
    
3. let宣告: 變數是屬於區塊的(block)

## 提升(**Hoisting)**

> JavaScript 僅提升宣告的部分，而不是初始化。如果在使用該變數後才宣告和初始化，那麼該值將是 undefined。
> 

下面code我一開始看以為是Output

9

2

但因為提升的關係，JS在執行printV0函式時，會優先將v1變數放入記憶體，但尚未初始化，所以第一個會log出undefined。

```jsx
var v1 = 9

function printV0(){
  console.log(`printV2:`, v1) // undefined
  var v1 = 2
  console.log(`printV2:`, v1) // 2
}

printV0()
```
Pricing page and currencies
Tags: discuss, pricing
Published: 2022-08-19 09:41:00

Prakash Natarajan wrote an interesting post on IndieHacker on June 20 (Experimenting with /pricing?), where he mentions the issue for non-USD people to have a clear understanding of their cost.

It's true that if you aren't aware of the currency value between USD and the one in your (non-USD) country, you need to do a quick Google search, which isn't ideal and can break your potential user from signing up.

Now, Prakash suggests a simple script that checks the user's country based on his IP, and converts the amount into the local currency, removing the barrier.

But offering your service in multiple currencies can have a big drawback in the future: Imagine the relation between USD and EUR is at 0.7. Your user subscribes in EUR for 7 EUR instead of 10 USD.
A few months later, the relation between USD and EUR changed and is now close to 1. That user will still pay 7 EUR whereas a new user will pay 10 EUR per month.

To avoid this, you can adjust their monthly billing according to the currency value, which is not great for your end user that will never know if they'll pay 7 or 10 EUR.

Having the local currency displayed is a great idea as it can help your user make the decision faster. But instead of changing the currency, and offering multiple currencies, a good alternative would be to show the price in your unique currency (USD for instance), and show the price in their local currency next to it, either as a tooltip, or well-integrated in the design.

That way, your user will know the price is in USD, but will also quickly know how much it will exactly cost for them if they subscribe that day.

What do you think? Those who offer multiple currencies, are you facing this often? Do you consider the variation between the currencies an issue?

Thanks for sharing your thoughts.
How to create a relations between primary key and foreign key in Django models and POST values into DB
Tags: django, python, database
Published: 2022-08-19 09:31:44

I have a Django app which is basically an Online shopping. Right now I have two models: User_details and Extend_user_deatils.

In User_details I have(Username, Firstname, lastname, email, etc..). Now after that i need to extend User_details Model with Other Fields so I have Created another Model Extend_user_deatils consisting of (Mobile , Age) columns.

Now i need to Link those Two Models, for that I have written an `logic with Foreign Key Reference


```
class User_details(models.Model):  #Table 1
    id = models.AutoField(primary_key=True, db_column='user_id')
    username = models.CharField(max_length=50)
    first_name = models.CharField(max_length=50, blank=True, null=True)
    last_name = models.CharField(max_length=50, blank=True, null=True)
    email = models.CharField(max_length=50)


class Extend_user_details(models.Model):    #Table 2
    user =models.ForeignKey(User_details, on_delete=models.CASCADE,db_column='user_id')
    mobile = models.BigIntegerField(blank=True, null=True)
    age = models.IntegerField(blank=True, null=True)
```

When I Open Django admin Page and Post the Data it is Working Fine and Values are posting into DB.

When I register as a User from register page . ForeignKey Column(user) from Table2 is showing Null .apart from that all the inputs is posting into DB as shown 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a4pextlru0sm5rnpr9a.JPG)

Is there any way to solve this issue

Thanks in Advance
Chief Marketing Officer
Tags: hiring, career, cmo
Published: 2022-08-19 09:27:24

Need someone expert with Internet Marketing with 10+ years experience 1. Google Marketing tool like - Google Analytics 4, Data Studio, Google Optimize, Google tag Manager 2. Webmaster tools - Google Search console, Bing, Yahoo, Yandex etc. 3. PPC Online Ads- Facebook ads, google ads, digital Ads, Remarketing 4. Analysis - Competitor Analysis, AB testing 5. SEO - Local SEO, technical SEO, Content , Link building, Landing Page Creation 6. Outbound/Inbound Marketing - Email, social media
Apply on http://prefr.co/team/hiring

**Responsibilities**

Content Creation
1. Understanding of product messaging
2. Technical writing ability
3. Ability to match writing to personas
4. Copyrighting all marketing communications
5. Press Release

Client acquisition, lead generation, and retention/engagement
1. PPC
2. SMM
3. Email marketing
4. Website 
5. SEO
6. Events & Tradeshows
7. Building partnerships
8. Business relationships

Research, Analytics & Strategy
1. Market analysis
2. Product market Fit
3. Branding
4. Public Relations
Translator
Tags: hiring, career, workfromhome, hinditranslator
Published: 2022-08-19 09:14:27

Translator jobs available. New translator careers are added daily on prefr.co.
Apply on http://prefr.co/team/hiring/

Requirements
Need translators who know various languages.
The translator must know 4 languages
Hindi
English
One Indian regional language
One international language.
The copy should be well transliterated using the appropriate grammar and punctuation.
The job will be home based.
Job will include
Translate written text
Phone calls
Transcription
Build & deploy tailwindcss, nextjs & nodejs app on cpanel
Tags: javascript, tailwindcss, nextjs, node
Published: 2022-08-19 09:21:48

In this video tutorial, we 'll build and deploy a tailwindcss, nextjs, nodejs application and host it  on cpanel using namcheap shared shared hosting package. Technologies used include; react js, next js, javascript, cpane, vscode, node js, tailwindcss.