teleren/devto huggingface dataset:
Shortcut keys to print symbols, special characters, and emojis using Alt the key in Note Pad
Tags: shortcutkeys, beginners, design, computerscience
Published: 2020-09-21 17:13:42

Shortcut keys to print symbols, special characters, and emojis using Alt the
key By @DDSRY⬇️

.

Alt + 0153 - ™ Trademark Symbol

Alt + 0169 - © Copywrite  Symbol

Alt + 0174 - ® Registered Trademark Symbol

Alt + 0176 ° Degree Symbol

Alt + 0177 - ± Plus-Minus Sign

Alt + 0182 - ¶ Paragraph mark

Alt + 0190 - ¾ Fraction, Three Fourth

Alt + 0215 - × Multiplication Sign

Alt + 0162 - ¢ The Cent Sign

Alt + 0161 - ¡ Upside down exclamation point

Alt + 0191 - ¿ Upside down question mark

Alt + 1 - ☺ Smiley Face

Alt + 2 - ☻ Black Smiley Face

Alt + 15 - ☼ Sun

Alt + 12 - ♀ Female Sign

Alt + 11 - ♂ Male Sign

Alt + 6 - ♠ Spade

Alt + 5 - ♣ Club

Alt + 3 - ♥ Heart

Alt + 4 - ♦ Diamond

Alt + 13 - ♪ eighth note

Alt + 14 - ♫ beamed eighth note

Alt + 251 - √ Square root

Alt + 24 - ↑ Up Arrow

Alt + 25 - ↓ Down Arrow

Alt + 26 - → Right Arrow

Alt + 27 - ← Left Arrow

Alt + 18 - ↕ Up-Down Arrow

Alt + 29 - ↔ Left-Right Arrow
Containers: Under the hood
Tags: javascript, microservices, beginners, architecture
Published: 2020-09-21 17:05:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/95hsfuaao3zs2ia5qt46.jpg)

When we move the app across environments like Developemnt, staging and production, we would have faced compatibility issues. 

Containers solves this "dependency hell". 

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

Virtual machines virtualizes on hardware level, which takes a dig at performance.

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

Docker uses LXC - linux containers, which sandboxes processes through namespaces.

LXC also provides cgroups - control groups, developed by google, for resources accounting and limiting.

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

Docker also uses CoW strategy, where all the containers share the same file system, the moment when a process in container wants to write to the file system, it makes a copy and writes on it.

More on - https://www.rsforce.net/post/what-are-containers-under-the-hood
Laracasts: The best PHP Laravel training website.
Tags: php, laravel, javascript, vue
Published: 2020-09-21 17:02:26

---
title: Laracasts: The best PHP Laravel training website.
published: true
description: 
tags: PHP,Laravel,Javascript,vuejs
//cover_image: https://direct_url_to_image.jpg
---

For the last three months I have been comparing three backend frameworks. Django, Rails and Laravel. I read several books, blog and watch tons of videos. Here is the summary of my research: https://dev.to/rickavmaniac/django-rails-or-laravel-my-personal-journey-30lh

In my journey I came across the laracasts.com website which is intended to be a site with hundreds of videos on everything related to Laravel, namely PHP, Javascript, Vuejs, CSS and HTML.

Why am I telling you about it today? It's just that in my opinion this is the best video developer training site.

As of this writing, there are over 1,700 videos for over 300 hours of training. But in my opinion the most impressive is the quality of the content. Each video deals with a specific topic in a concise and effective manner.

Jeffrey Way, the author of these videos, is an excellent teacher.

The videos are accessible via a global search, by themes or by series.

For those who have doubts, NO I have no shares in this company :-)

I just wanted to share this with you. It is rare that I am impressed with something but I must admit that this site impresses me.
Should we specialise?
Published: 2020-09-21 15:50:43

I remember in the early 2000s we only had limited CMS capabilities where I worked as a web developer and always used MS Access as our main database solution. But as our client base grew it was clear Access was no solution and MS SQL server was the primary option we had in the MS world. As the team leader in those days it was down to me to learn all the good things that MS SQL Server offered and build the first solution for others to use. Thanks to those days I learnt about transactions and subroutines and data integrity etc. Thanks to MS SQL Server I have become the data designer, expert and administrator I am today and only a few years later then I used my skills to design the best solution for the RBS mortgage calculators. Without my deep database knowledge I could not do that.
Now when it comes to specialising it is a difficult one. During those years I realised I have lost a lot of grip on CSS because we always had specialist UX/UI designers giving us the templates to work from. Because now I'm a freelancer CSS can be more of a challenge for me but thanks to Bootstrap and Tachyons (they seem to play nicely together) a bit of Media queries and JQuery I can create great interfaces and get a lot of problems ironed out :-) 
Thanks for reading!
School of Code Day 1
Published: 2020-09-21 16:57:29

Day 1 over and my brain is frazzled, but in a good way.  I've learnt quite a lot and feel the need to understand it a little bit more before the day is done.

Today we learn't mostly about functions although had some introductions to the data types.  (Strings, numbers, booleans, null, undefined and objects).  Functions I need to work on,  I am having trouble getting to grips with the loop functions, but i'll get there.
Read More Read Less Button… HTML vs JavaScript, which one do you prefer?
Tags: html, javascript, 100daysofcode, beginners
Published: 2020-09-21 16:53:25

Photo by Miguel Á. Padriñán from Pexels

Although I went deep into HTML, completing the www.W3schools.com free course, I somehow forgot about the great option HTML provide out of box with regards to “Read more…” button, very useful feature for lengthy articles.

HTML `<details>` and `<summary>` option:
Here comes the handy HTML tags `<details>` and `<summary>`, with summary being a child of <details>. The Summary tag has a useful attribute of "open", which will keep the modal open and display the long content `<summary open>`.

A live example below: 
`<h1> Some great headline</h1>`
`<details open>`
`<summary>Read More....</summary>`
`<p>Some extremely long content… Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quisquam odit quas vitae, inventore fugit voluptatibus ratione commodi accusamus in deserunt assumenda quis quam voluptas quod unde alias nobis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis rerum, dolore blanditiis nesciunt accusamus, debitis asperiores quis inventore sequi numquam, odio illum natus molestiae hic minima? Praesentium,quia. Cum, iusto!
</p>`
`</details>`


JavaScript  option:

The JavaScript option involves a little more code only to achieve similar result.

The HTML part:
`<h1> Some great headline</h1>`
`<p>Some extremely long content <span id="readLess">. . . </span> <span id="readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quisquam odit quas vitae, inventore fugit voluptatibus ratione commodi accusamus in deserunt assumenda quis quam voluptas quod unde alias nobis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis rerum, dolore blanditiis nesciunt accusamus, debitis asperiores quis inventore sequi numquam, odio illum natus molestiae hic minima? Praesentium,quia. Cum, iusto.</span>
</p>`
`<button onclick="readMore()" id="morebtn">Read more</button>`


Adding CSS:

`#readMore{display:none;}`

Finally, the Javascript part:

`function readMore() {
    let readLess = document.getElementById("readLess");
    let readMore = document.getElementById("readMore");
    let moreBtn = document.getElementById("morebtn");
    if (readLess.style.display === "none") {
        readLess.style.display = "inline";
        moreBtn.innerHTML = "Read more";
        readMore.style.display = "none";
    } else {
        readLess.style.display = "none";
        moreBtn.innerHTML = "Read less";
        readMore.style.display = "inline";
    }
}`

That’s all folks! That was my first article since I started learning Front End Development, I hope it will be useful for less experienced developers.

What is your favorite use in this case HTML or JavaScript? Please leave comments below.

Full example code below:
https://codepen.io/furbo1/pen/rNeQJVq
Making an animated header with Framer Motion
Tags: react, typescript, css, animation
Published: 2020-09-21 16:36:13

Hi! Recently I've watched a video about basics of Framer Motion - A ReactJS library made in order to help to make animations - and  I wanted to share a little bit of what I've learnt.

We will create a simple header component, and it will work just like the below one (Pay attention to the scrollbar and the header):
![Working demonstration](https://dev-to-uploads.s3.amazonaws.com/i/l4p3d1kc8fi34hnvxaq4.gif)

In order to start, You need to create a react app and install 'framer-motion' library
```bash
  # Creating a react app
  npx create-react-app framer-header / yarn create react-app framer-header

  # Installing with NPM and with Yarn:
  npm install framer-motion / yarn add framer-motion
```

So, even though I'm still studying it, I've learnt a bit about animations throughout the page scroll, doing this would usually be kinda difficult but happily We have Framer motion + React hooks !

In order to make a simple animation that makes the header disapear, we can start by creating a basic Header component in 'src/components/Header.js':

![Header component](https://dev-to-uploads.s3.amazonaws.com/i/r5gomxyrh1ft0pv21ba2.png)

Okay, but... what are 'motion', 'useViewportScroll' and 'useTransform'?

Motion is kind of a component that You use for styling, just like 'animated' from React Spring.

useViewportScroll is a hook that returns how many % of the page has been scrolled in decimal numbers, in this case, we want to know how many % of the Y axis has been scrolled

useTransform is the hook that allows us to make some of animations, in this case, it is what will make our header leave the screen. It works at the following way: When the value of the first parameter is in the range of the second parameter, it will return a number depending on the third parameter

Confusing? Maybe, but let me show you two examples:

```javascript
  const scaleY = useTransform(
    2,
    [1, 4],
    ['0%', '100%'],
  );
```

scaleY would be ' 50% ' because 2 is in the exact middle between 1 and 4, but if the first parameter were ' 4 ', scaleY would be 100%

```javascript
  const { scrollYProgress } = useViewportScroll();

  const headerY = useTransform(
    scrollYProgress,
    [0, 0.2, 0.3],
    ['0%', '0%', '-100%'],
  );
```

When 0% of the page has been scrolled, headerY will be ' 0% ',
When 20% of the page has been scrolled, headerY will be ' 0% ',
When 25% of the page has been scrolled, headerY will be ' -50% ',
When 30% of the page has been scrolled, headerY will be '-100% ',

Now, so that we can see this component and the scrollbar, lets make some changes in 'App.js', it will be just like this one:

![App.js example](https://dev-to-uploads.s3.amazonaws.com/i/68zzyjcoygqg9yarvpj7.png)

You can check the code out in the following link: https://codesandbox.io/s/purple-lake-k33ly


That's it guys, see you!
Gemstones Explain - Solution | Javascript
Published: 2020-09-21 16:34:29

```javascript
function gemstones(arr) {
  const first = arr[0];
  const checked = {};
  let result = 0;
  for(let i = 0; i < first.length; i++) {
    if (checked[first[i]]) continue;
    checked[first[i]] = true;
    
    const regex = new RegExp(first[i], 'i');
    let temp = 0;
    for (let j = 1; j < arr.length; j ++) {
      console.log(arr[j], regex.test(arr[j]));
      if (regex.test(arr[j])) {
        temp ++;
      } else {
        break;
      }
    }
    if (temp === (arr.length - 1)) {
result ++;
    }
    
  }
  return result;
}

gemstones(['abcdde', 'baccd', 'eeabg']);

```

[Problem](https://www.hackerrank.com/challenges/gem-stones/problem?h_r=next-challenge&h_v=zen)
Another 30 Edited EuroPython 2020 Videos now available
Tags: europython, videos
Published: 2020-09-21 16:32:00

We're happy to announce another 30 edited videos available in our EuroPython 2020 Playlist: https://www.youtube.com/playlist?list=PL8uoeex94UhHgMD9GOCbEHWku7pEPx9fW

More will follow in the coming days.

Enjoy,
–
EuroPython 2020 Team
https://ep2020.europython.eu/
https://www.europython-society.org/
is-your-website-content-thematically-relevant
Published: 2020-09-21 16:24:21

All aspects of a site, from how it’s organized to the substance and even the hues, has an effect. For positioning a site, most entrepreneurs are now mindful that catchphrases are required and are a significant piece of how web crawlers perceive and rank substance.
In any case, there’s significantly more that goes into enhancing a site. Topical significance, which is now and again known as utilizing semantic SEO, can have a tremendous effect in how web indexes like Google react to content and where it positions it in light of certain hunt terms, expressions, and questions.

Understanding somewhat more about this cycle and taking into account it with substance can enable a site to destroy the opposition and increase more traffic for more hunt terms. [howtoincreasedomainauthority](https://www.howtoincreasedomainauthority.com/)

Nuts and bolts Of Thematic Relevance

Topical significance is making content for the site dependent on subjects or classes orchestrated in a plummeting progressive structure. In the first place, the class is expansive and it gets continuously more explicit as more pages and substance are made.

For example, a site may begin with a general clarification of an overall contribution. At that point, the following arrangement of pages interfacing with that primary page will be consequently more explicit, typically took into account a commercial center, at that point a client type, at that point a particular issue they have to explain, and so forth. , or an individual item, at that point sets includes and coming about abilities, etc.

Know More @ <a href="https://www.dyifo.com/what-are-thematic-keywords/">what-are-thematic-keywords</a>
Console.log for Images and Canvases
Tags: webdev
Published: 2020-09-21 16:01:39



🎉 Just published a [tiny NPM library](https://www.npmjs.com/package/console-log-img) to print images in the browser console!

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

It's like `console.log`, but for images: you can print an image from a URL, a Canvas or Image element, or an ImageBitmap.

# How to use it

```typescript
import { initConsoleLogImg } from "console-log-img"

// Run this once to initialize the library
initConsoleLogImg({
  // Optionally, disable image dimensions logging (enabled by default)
  printDimensions: true,
})

// ... later in the code ...

// Print an image from a URI, at original size
console.img("https://openclipart.org/image/800px/5661")

// Print a Canvas at 30% zoom, also log canvas dimensions
const canvas = document.getElementById("my-canvas")
console.img(canvas, 0.3, true)

// Print a CanvasRenderingContext2D
const ctx = canvas.getContext("2d")
console.img(ctx, 0.5)

// Print an ImageBitmap at 100% zoom
const bitmap = await createImageBitmap(canvas)
console.img(bitmap, 1)

// Print an Image DOM element
const imgEl = document.getElementById("my-img")
console.img(imgEl)
```

[DEMO](https://codesandbox.io/s/console-log-img-test-bti64)

The code was adapted from various sources and wrapped up in a neat TypeScript library.

Under the hood, it uses some hacks with styled console.log to set the background to the passed image. Check out the [source code](https://github.com/dmitru/console-log-img) if you want more.

## Why would you want to print images to console?

### Easier Debugging

I used it extensively when working on Canvas-heavy apps (e.g. [Inkarnate](https://inkarnate.com) – online fantasy maps editor) to make debugging of Canvas rendering easier.

I think it'll be especially helpful for those working on Canvas visualizations (e.g. generative artists) or other graphical apps like editors or generators.

### Other Uses

- **Hiring banners**. You can use it to show some fancy-pants hiring console banners to invite web devs to join your team.

- **Fraud prevention.** Ever seen anti-fraud console banner on Facebook? That's to prevent bad guys from manipulating users into pasting bad things to their browser console.

That's it! Hope you'll find it helpful. 😃
Pagination using AJAX and jQuery
Tags: javascript, ajax, jquery, php
Published: 2020-09-21 16:01:23

Create a javascript file let say pagination.js

https://dev-to-uploads.s3.amazonaws.com/i/jf19thvskq3fxczkc4uz.PNG

Inside your page called notes.php, write this JavaScript code on the bottom

https://dev-to-uploads.s3.amazonaws.com/i/xyqamzvh22tj1tcitdh5.PNG

Now, this is the load_notes.php back end for AJAX

https://dev-to-uploads.s3.amazonaws.com/i/0ev6w1ikdr43m7mg7563.PNG

Summary 

pagination(url,div_id,table_id,trigger,offset,limit) is to pagination('load_notes.php','load_here','notes','load_pagination','0','15')
Visual Studio IDE Shortcut keys: 5 cool handy tips to speed your programming
Tags: csharp, codenewbie, showdev, dotnet
Published: 2020-09-21 16:00:51

I have been coding in C# on Visual Studio for almost around 8 years and I have realized using some of the keyboard short keys while writing the code is just so fast than using a mouse and going around options to click. Using shortcut keys is not just cool but also increases productivity. And one more cool fact about these is you don't have to do anything in the settings to enable it. They are there already, configured by default when you install a fresh copy of Visual Studio (any version).  

Keyboard shortcuts are my favorite and there just so many I love. But I'm going to list down the 5 shortcut keys that I use the most to increase my programming speed.

## 1. Power of DOUBLE-TAB
If I want to write a class, a constructor, a for-loop, etc, I just type the keyword and **hit TAB twice**. Tada! The snippet is generated. 

![Snippet generator](https://gist.githubusercontent.com/pradeepradyumna/f6c85257fe5a071898f5df64c4abab80/raw/c3c8c00951528761aadae01c1838b1389a7ec131/KeyboardShortcut.gif)


## 2. Switch-Case: Case generator  
If I want to write a switch-case for all values present in a very tall enum (an enum with a huge list of entries), I just generate the switch-case template using my trick of Double-Tab, enter the enum name in the switch-on place and **Click on the default keyword just once**. Tada!

![switch case generator](https://gist.githubusercontent.com/pradeepradyumna/f6c85257fe5a071898f5df64c4abab80/raw/3344d33575ddfad1cbe7ef149094731fd9deb723/SwitchCaseGenerator.gif)

## 3. Commenting uncommenting game
Often writing code, I would like to make tweaks while testing. And this requires commenting-uncommenting the lines. So, I just use
**Ctrl + K + C** for commenting and **Ctrl + K + U** for uncommenting. It is so quick!  

![Commenting uncommenting](https://gist.githubusercontent.com/pradeepradyumna/f6c85257fe5a071898f5df64c4abab80/raw/d87cf3d26bc1516e1f0dea2b16fcf77a89b28d81/CommentingUncommenting.gif) 

## 4. Code alignment
Often writing code, it tricks me if my code is not aligned properly at all. It is difficult to identify which part belongs to other parts of the code. So, I just do **Ctrl + K + D** after writing the code and it is aligned. And also, if you are generating code snippets using the double-tab method, most of the code will auto-aligned. So cool!

## 5. Member references and definition
If I'm working on a gigantic codebase with multiple project files in a solution and I want to see all the references of a particular member like Class, Method, Variable, or Properties, I just click on that member and do **Shift + F12**. That's it! The reference window will be open.

And, if I'm going through code and want to know the definition of a member like Class, Variable, or a Method, I just click on it and hit **F12**. It takes me to the original place where it defined.





These tricks are always so fun to use. I hope you find this article useful. If you know any cool shortcut that's cool, please let me know in comments.
All about Destructuring
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-09-21 15:33:01

Destructuring was introduced in ES2015/ES6. The following things can be done on an object/array:
1. **Extract values**
2. **Provide a default value**
3. **Extract value and rename the variable**

Let's go with the following data and see 6 examples. All the examples are based on this data.

```
const response = {
  msg: "success",
  tags: ["programming", "javascript", "computer"],
  body: {
    count: 5,
    data: ["File 1", "File 2"],
  },
};
```

The basic syntax is: 
```
const { 
  destructuredKey: newNameForDestructuredKey = "defaultValue"
} = obj;
```

1 - **Destructuring the key `msg`**

```
const { msg } = response;
```

2 - **Destructure the 2nd element (i.e., `javascript`) from `response.tags`**
```
const {
  tags: [, secondElement],
} = response;
```

3 - **Destructuring the key `msg` and renaming it to `message`**
```
const { msg: message } = response;
```

4 - **Destructuring a key which does not exist with a default value**
```
const { searchString = "programming" } = response;
```

5 - **Destructuring the nested key `count` from `response.body`**
```
const {
  body: { count },
} = response;
```
Here, first **body** gets destructured, then **count** is again destructured from **body**.  

*Pitfall 1* - What if the `body` key did not exist in the data? It would throw an error while destructuring `count` because `body` is `undefined`.  
*Solution*: - Provide a default value to **body** (`{}`)
```
const { body: { count } = {} } = response;
```

*Pitfall 2* - What if response was undefined? 
```
const { msg } = undefined; // error
```

Super simple,
```
const { msg } = response || {};
```
If response is falsy (undefined or null), then it takes it as an empty object.

6 - **Destructure `File 1` from `response.body.data`**
```
const {
  body: {
    data: [file1],
  },
} = response;
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**