teleren/devto huggingface dataset:
Need our community suggestions on How my First site can become better? 
Tags: css, hugo, html, seo
Published: 2021-02-04 03:41:23

Here's the story of my first site which I built for my college students for there notes need.

I know there are many great site which provide quality content but at our college we need a single place for notes, syllabus, tutorials. 

I don't know much about web development but I started my journey by learning some HTML, CSS but it was very difficult to create a website from scratch. HTML boilerplate templates were good but it was not for me cause I'm not good at css also coloring site stuff. 

In this journey I meet with Hugo a static site generator. I read it documentation, watched some tutorial created this site https://xvishaldongre.github.io/

Basically I use Papers-mod theme and modify its homepage and some other stuff. 

I am continuously learning more about web development from mdn docs at least for now I think mdn documentation is best. 

Now form this community, I want to know How can i speed up my learning? Also some improvement for https://xvishaldongre.github.io my first site, also on How to write quality content for SEO. 

Thanks and I am not a native English speaker so kindly ignore some grammatical mistakes. 🙂
Node.js Event Loop is an Awesome concept for Developers
Tags: news, programming, technology, eventloop
Published: 2021-02-04 10:40:18

---
title: Node.js Event Loop is an Awesome concept for Developers
published: true
date: 2021-02-04 03:30:00 UTC
tags: News,Programming,Technology,eventloop
canonical_url: https://centocode.com/node-js-event-loop-is-an-awesome-concept-for-developers/
---

Asynchronous in Node.js is unpredictable and difficult to trace but nodejs event loop can handle multiple requests at a time.

The post [Node.js Event Loop is an Awesome concept for Developers](https://centocode.com/node-js-event-loop-is-an-awesome-concept-for-developers/) appeared first on [CentoCode.com](https://centocode.com).
Code Smell 61 - Coupling to Classes
Tags: webdev, tutorial, codenewbie, programming
Published: 2021-02-04 03:23:42

*Classes are handy. We can call them and invoke them any time. Is this good?*

# Problems

- Coupling

- Extensibility

- Hard to mock

# Solutions

1. Use interfaces or traits (if available).

2. Use Dependency Injection.

3. Favor Loose Coupling.

# Sample Code

## Wrong

{% gist https://gist.github.com/mcsee/e805e3d4540de21d6c1c3ff0341aac5a %}

## Right

{% gist https://gist.github.com/mcsee/0358951abbf771f2b63a3ae6833ea210 %}

# Detection

We can use almost any linter to find references to classes. We should not abuse since many uses might be false positives.

# Tags

- Coupling

# Conclusion

Dependencies to Interfaces make a system less coupled and thus more extensible and testable.

Interfaces change less often than concrete implementations.

Some objects implement many interfaces, declaring which part depends on which interface makes the coupling more granular and the object more cohesive. 

# Relations

{% post https://dev.to/mcsee/code-smell-30-mocking-business-3glm %}

# More info

[Coupling](https://maximilianocontieri.com/coupling-the-one-and-only-software-design-problem-ckejcs8u700w02ss14hey2ffu)

[Wikipedia](https://en.wikipedia.org/wiki/Loose_coupling)

# Credits

Photo by <a href="https://unsplash.com/@marcobian">Marco Bianchetti</a> on <a href="https://unsplash.com/s/photos/hug">Unsplash</a>

* * *

> When your code depends on an interface, that dependency is usually very minor and unobtrusive. Your code doesn’t have to change unless the interface changes, and interfaces typically change far less often than the code behind them. When you have an interface, you can edit classes that implement that interface or add new classes that implement the interface, all without impacting code that uses the interface.

> For this reason, it is better to depend on interfaces or abstract classes than it is to depend on concrete classes. When you depend on less volatile things, you minimize the chance that particular changes will trigger massive recompilation.

_Michael Feathers_
 
* * *
Automatically Restart Your Node.js App Using Nodemon
Tags: nodemon, node
Published: 2021-02-04 02:55:12

In this instructional exercise, you see while building up your node.js application, When you change something in your code then you need to begin the worker to see it, that is, each time we change the code, so often we need to begin the worker, to keep away from this we use Nodemon. Nodemon is a CLI (order line interface) utility that can wrap your node.js application. the most effective method to utilize Nodemon It can watch the documents in your worker envelope and naturally restart your application when changes are recognized.

**[Automatically Restart Your Node.js App Using Nodemon](https://www.phpcodingstuff.com/blog/automatically-restart-your-nodejs-app-using-nodemon.html)**


Use This Command

```
npm install nodemon --save-dev
```
Empowering female developers!
Tags: empowerment, support, womenintech, career
Published: 2021-02-04 02:06:42

Hello Dev Community!

I'd like to introduce [Our Time For Tech](https://ourtimefortech.org), my nonprofit tech-empowerment initiative founded to help women-in-Tech level up professionally.

Right now, we support **female aspiring, career-changing or early-career developers**. We offer two 12-week programs:

- **CodeCollab:** *Real-world experience building web applications* as part of a team, with a senior engineer guiding the process
- **BetterPrep:** Accountability, mock interviewing, live-coding practice and structured support *while job-hunting*

[Applications are now open](https://ourtimefortech.org/#apply) for Cycle 2 (which starts in March).

The cost is a one-time $250 enrollment fee. We have limited scholarships for applicants who can demonstrate financial need.

Please inbox me or [DM me on Twitter](https://twitter.com/aritamana) if you have questions. I hope to see you in Cycle 2. And share with your networks, thanks! :pray:
Gotta Go Fast: Playing YouTube Videos Faster
Tags: youtube, bookmarklet, chrome, javascript
Published: 2021-02-04 01:10:17


Do you enjoy consuming your media at 3x or 4x speed and you're bummed that you can only speed up your YouTube videos up to 2x?
Many people choose learning in an online, self-paced environment.  I find myself frequently diving into training at 2.5x or 3x speed -- and I've found it dissapointing that YouTube tops out at only 2x speeds.  

This Chrome Bookmarklet will help you speed up your YouTube video beyond the 2x speed limit!

## Gotta Go Fast

This is a Bookmarklet for Chrome and may not be suitable in other browsers.  Your mileage may vary.

1. Right click on the bookmark bar.
1. Click "Add page..."
1. Name: "Play 3X Speed"
1. In the URL bar, paste this:
```
javascript:(function(){document.getElementsByTagName("video")[0].playbackRate = 3})();
```
![2021-02-03_19h58_12.png](https://readthis.info/assets/2021-02-03_19h58_12.png)
1. Click Save.
1. Next time you watch a youtube video, click this bookmark and it'll speed up to 3X.


If you'd like a different variable, you can change the `playbackRate = ` number to something other than 3.  You can try .25 or .5 increments, too!



### Alternatives

If you like this idea, but you'd like a little more flexibility, you can use this code to ask for a prompt:


```
javascript:(function(){document.getElementsByTagName("video")[0].playbackRate = prompt("Please enter the speed you wish to watch the video", "1")})();
```


#### Other Notes

The YouTube video GUI will not update with the new speed, but as soon as you adjust it to a different value, it will return to normal functionality.


:smiley:  I hope this helps someone out there who likes to go fast!
Merge object or array ของ JavaScript ด้วย spread (...) operator
Tags: javascript, programming
Published: 2021-02-04 00:48:02

เนื่องจากว่าไม่ได้ใช้ JavaScript เป็นงานหลัก นานๆได้มาอ่านทีก็ได้รู้เรื่องใหม่ๆที่ไม่ค่อยได้รู้มาก่อนบ้าง อย่างเช่น เมื่อวานเจอโค้ดนึงเขียนแบบนี้

```javascript
options = {...options, ...plugins}
```

ดูงงๆว่ามันทำอะไรใน statement นี้ พอไปค้นดูก็เจอว่า ... เนี่ยมันคือ [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) เอาไว้กระจายของใน Object (key:value) หรือใน Array ออกมาเป็น element นึงใน object ใหม่ หรือใน array ใหม่

ทีนี้แบบข้างบนมันเลยคือเอา options มารวมกับ plugins แล้ว assign กลับไปที่ options อีกที ก็คือการ merge สอง object เข้าด้วยกันนั่นเองโดยถ้า plugins มี key ซ้ำกับ options มันก็จะเอาของใน plugins มาทับไปแทน

ก็อย่างที่บอกว่ามันใช้กับ Array ได้ด้วย ตัวอย่างเช่น

```javascript
array1 = [10, 20, 30]
array2 = [40, 50, 60]
result = [...array1, ...array2]
```

นี่ก็เป็นตัวอย่างหนึ่งของการเอา spread syntax มาช่วย merge Object หรือ Array ถ้าอยากดูรายละเอียดมากกว่านี้ลองดูได้ที่ document ของทาง MDN Web Docs ที่นี่ครับ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏
My journey into the  IT space
Tags: wikimedia, outreachy21, internship
Published: 2021-02-04 00:36:13

> “When you discover your mission, you will feel its demand. It will fill you with enthusiasm and a burning desire to get to work on it.” — W. Clement Stone 

**How it all started...**

It all started after my National Youth Service Corps when I got accepted into the six(6) months [Interswitch Developer Academy](https://medium.com/interswitch-engineering-blog/introducing-the-1st-cohort-of-interswitchs-developer-academy-8569fda1bd21). The first three months into the program was an intensive classroom training on data structures, algorithm, Software architectural design patterns, distributed systems, Database design, Java, ASP.NET and lots more. This was facilitated by various experts who have been in the fields for years. At the end of the first three months, we were assigned into groups to carry out a project(voucher-service) to make meaning to all what we have learnt from the experts.

The last three month(3) of the internship we integrated into the Engineering team, I worked with the DevOps team, assisted in managing the on-Prem  CI/CD integration pipeline, process automation and monitoring. This was achieved using stack like Jenkins, Kubernetes, Docker, ELK, grafana, Prometheus, Chef, Ansible, Python, ruby and a lot more.

This internship built my interest around scripting and process automation. It played a major role in my interest with the Lua Scripting task in Wikimedia. I am so excited about the opportunity given to contribute to the [Lua documentation on meta and mediawiki](https://phabricator.wikimedia.org/T254956), it has greatly improved my communication skills and remote working experience. The continuous guidance and follow-ups from my mentors have made the journey as easy as possible.

I am open for a full time/part-time job, internship, remote work, a grant or a volunteer position. I want to continue developing the skills of automation to aid continuous delivery and monitoring process.
TAWIL: How to write tests with Jest 🃏
Tags: testing, node, javascript, jest
Published: 2021-02-04 00:14:00

Hello world. Today at work I learnt how to do the above. It's never too late to begin increasing your confidence in your code. In four steps, we'll have a small testing suite up and running. **Let's start!**

### Step 1 - Dependencies

These 3 steps should be similar for all editors from VS Code to Notepad.

* Check that you have Node.js installed by running
`node -v` in your terminal. You should see something like this:
```
v14.9.0
```
* CD to a folder of your choice (even Desktop, I won't judge), then run `npm init` then `npm i jest --save-dev`

* Finally, in the package.json file that appeared out of nowhere, add `jest --verbose` under scripts in the key titled 'test' like so:
![edit-pkg_json](https://dev-to-uploads.s3.amazonaws.com/i/jy1w6c282plju4lp4glk.gif)
   
### Step 2 - Functions to test

Let us create a file titled **countr.js**. In it, we shall write a set of functions for a counter app. The functions will accept a number as an argument then increase or decrease its value by 1.

```
const increase = (a) => ++a;
const decrease = (b) => --b;

module.exports = { increase, decrease };
```

### Step 3 - A test for our functions

Now we shall write some tests! In the same directory, create a file titled **countr.test.js**. In here, add the following bit of code:

```
const { increase, decrease } = require('./countr');

test('Increaase yah noww', () => {
  expect(increase(3)).toBe(4);
});

test('Beg yuh one nuh', () => {
  expect(decrease(4)).toBe(3);
});

```
##### Teching Things Apart

This `expect(increase(2)).toBe(3)` bit of code does the actual work for us. The **expect()** function accepts as an input the value that our code ( increase(3) ) outputs. The **toBe()** *matcher* function accepts the value we hope our code will output.

### Step 4 - Testing 123..

Finally, in your terminal, run the command `npm test` anddd 🥁 🥁 🥁 🥁 
You should see these beautiful messages appear before your very eyes:
![Screenshot 2021-02-03 at 7.03.37 PM](https://dev-to-uploads.s3.amazonaws.com/i/u5og77j6rgfhycw1p7ht.png)
 
That's it! Welcome to the club!

#### Attributions
Header - <a href='https://www.freepik.com/vectors/design'>Design vector created by macrovector - www.freepik.com</a>
How to scroll to the top of a webpage using JavaScript?
Tags: javascript
Published: 2021-02-04 00:00:00

---
  title: How to scroll to the top of a webpage using JavaScript?
  published: true
  tags: JavaScript
  date: Thu Feb 04 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/scroll-to-top-of-webpage-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-6171f2f34fb6afaf0542c066bfb96d68.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/scroll-to-top-of-webpage-javascript)
  
To scroll to the top of a webpage using JavaScript, you can use the `scrollTo()` method in the global `window` object and pass `0` as the first and second argument to the method.

```js
// Scroll to Top of webpage
window.scrollTo(0, 0);
```

- The first argument is the `X Coordinate` or the value you want to scroll in the horizontal direction.
- The second argument is the `Y Coordinate` or the value you want to scroll in the vertical direction.

In our case, we are setting the first and second arguments as `0` to scroll to the top and to scroll to the left of the webpage.

See this example live in [JSBin](https://jsbin.com/sutecafeze/2/edit?html,js,output).

### Feel free to share if you found this useful 😃.

---
Visualize Git Log Tree
Tags: git
Published: 2021-04-12 20:53:16

---
title: Visualize Git Log Tree
published: true
date: 2021-02-04 00:00:00 UTC
tags: git
canonical_url: https://tech.serhatteker.com/post/2021-02/git-log-tree/
---

The `git log` is a powerful command which shows commit history.

```bash
$ git log
```

![git log](https://tech.serhatteker.com/img/content/2021/git-log-normal.png) 

However since I am a more `visual thinking` person I need some visually appealing form to see my commits.

## Tree

Here is the solution for my need:


```bash
$ git log --oneline --decorate --graph --all
```

which will give the format like below:


![git log](https://tech.serhatteker.com/img/content/2021/glt.png)

Absolutely easier to grasp what is going on with the history.

## Tree with date and author

If you also want to see `date` and `author` use this:

```bash
$ git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset'\'' --all
```

The output:

![git log](https://tech.serhatteker.com/img/content/2021/glta.png)



## Aliases

It will be beneficial to use aliases for them:

```bash
alias glt='git log --oneline --decorate --graph --all'
alias glta='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset'\'' --all'
```


All done!




[git-log]: https://git-scm.com/docs/git-log
Shutdown Routine
Published: 2021-02-16 11:37:56

---
title: Shutdown Routine
published: false
date: 2021-02-04 00:00:00 UTC
tags: 
published: true
canonical_url: https://joshghent.com/shutdown-routine/
---

In the current pandemic, it’s even more challenging to switch off from work. With many working from home, it can seem impossible to “leave” work in a physical and mental sense.

I introduced a shutdown routine to help combat this. It’s a practise touted by many “productivity guru’s”, which made me skeptical at first. But, the basic idea is to create a short checklist of things to do before you “finish” your day. The goals are as follows:

- Realise how much you’ve accomplished that day
- Be clear about what you need to do tomorrow
- Tie any loose ends

I usually allot anywhere from 10-20 minutes to do this process. Yours may vary but here is my list and the reasons why:

1. Close any open tabs
2. Write down tomorrows time block plan
3. Reply to any messages (Signal, Text, Slack) - I’ve uninstalled slack from my phone as well as leaving it on my desk in DnD after 5pm. This task helps me to get rid of those niggles to check my phone after this.
4. Zero my inbox - Even if it means snoozing mail to the next day, I don’t want it in my inbox. It all needs to be dealt with.
5. Clear my todo list - After I’ve finished work, I’ve finished and I want to spend time with my family. This helps me to stop feeling productivity guilt about things I haven’t done. It also saves all the tasks rolling over to the next day.
6. Clean my desk - Sounds obvious but it’s nice to not return to a stale coffee cup in the morning.

These steps may seem reductive. But, I have found the process mindfully winds me down from work and helps me get into the “relax” flow for the evening. I hope you too can leave your stress at work for the next day. There is always more work.
Unit testing algorithms
Tags: java, testing
Published: 2021-02-03 23:28:54

In the last weeks, I’ve been improving my computer science knowledge by solving programming problems. Since these problems have multiple solutions, I find myself writing duplicated unit tests. And refactoring these tests is cumbersome (if find&replace doesn’t work).

To make the point clear, I’m going to pick a problem with many possible implementations: sorting an integer array. Let’s keep things simple and solve the problem using heap sort, insertion sort, merge sort, quick sort, and selection sort. When the time comes to write the tests, all of the tests will be duplicated between implementations. If, in the future, I come up with a new test case, I have to write (copy&paste) that test to the test class of each implementation. This is far from optimal.

After doing a bit of digging, I found a convenient solution to removing the duplication: JUnit5’s @ParameterizedTest and @ValueSource. I had to do a bit of refactoring: I created a new interface that declares the sort method, and I made sure that all *sort classes implement the interface properly (you did create one class per implementation, right?). After that, it was just a matter of wiring up the tests.

{% gist https://gist.github.com/treaz/24187eda54093c4a70baf68f4c1f295f %}

Cool! 🙂 Before, the unit tests were all over the place, and not all implementations had all the corner cases tested. Soon enough, I found that the QuickSort implementation throws StackOverflowError when the input array contains duplicate values. You can find the source code [here](https://github.com/treaz/algorithms/tree/master/src/main/java/com/horiaconstantin/sorting/bycompare).
How to reinstall phalcon switching from php 7.1 to php 7.2
Tags: php, ubuntu, explainlikeimfive, beginners
Published: 2021-02-03 23:15:19

Hello, I have a trouble using php and phalcon and this is my story. I installed in a server php 7.1 and phalcon 3.4.5 and phalcon-dev-tools in a server with Ubuntu 16.

So, now, we have issues from dependencies installed, in this case is Cross-Origin error header using Twilio, from composer.json file. The only way to resolve this is upgrade php 7.2 (because Twilio doesn't launch error when I was writing code in localhost).

After upgrade php, I create the following files
```
$ vim /etc/php/7.2/apache2/conf.d/30-phalcon.ini
$ vim /etc/php/7.2/fpm/conf.d/30-phalcon.ini
$ vim /etc/php/7.2/cli/conf.d/30-phalcon.ini
```

all of them with:

```
extension=phalcon.so
```

Then, I delete `vendor` directory, next I typed `composer install` to install dependencies from `composer.json`; and finally, in my console displays the following message:

```
root@starnet-clks:/var/www/clicksseeker/server# composer install
PHP Warning:  PHP Startup: Unable to load dynamic library 'phalcon.so' (tried: /usr/lib/php/20170718/phalcon.so (/usr/lib/php/20170718/phalcon.so: cannot open shared object file: No such file or directory), /usr/lib/php/20170718/phalcon.so.so (/usr/lib/php/20170718/phalcon.so.so: cannot open shared object file: No such file or directory)) in Unknown on line 0
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Your requirements could not be resolved to an installable set of packages.
```

So, finally, in conclusion, I have to reinstall phalcon from my server and reinstalling again. Someone have a guide with steps to reinstall phalcon and phalcon-dev-tools in ubuntu?

Thanks.

### Updated

To update phalcon, I had to go to `~/cphalcon/build` directory (This is the phalcon repository downloaded from github cphalcon page, I switch to 3.4.x branch), then I had to type the following command `./install` if you doesn't have privileges type `sudo ./install`.
Pairing with Community Member Dan Ott
Tags: devstream, pairprogramming, css, html
Published: 2021-02-03 22:50:55

On <time datetime="2021-02-03">February 3rd</time>, DEV Community member Dan Ott joined Christina and I on the pairing stream to work on a CSS issue related to Flexbox gap not being supported in Safari.

{%youtube iVMPwTETH3Q %}

Here is the issue that we were working on:

{%github https://github.com/forem/forem/issues/12452 %}

### On this stream, we covered:

* Replacing flexbox with CSS grid in certain areas of the site so that grid gap could be used
* CSS grid features
* How awesome CSS is

<center>

![Magician throwing glittery confetti](https://media.giphy.com/media/s2qXK8wAvkHTO/giphy.gif)

</center>

Thanks again for coming on the stream, Dan!

### You can also find the three of us all over the web here:

Dan:

* [Twitter](https://twitter.com/danieltott)
* [Website](https://www.dtott.com/)

Nick:

* [Twitter](https://twitter.com/nickytonline)
* [Website](https://iamdeveloper.com/)
* [livecoding.ca](https://livecoding.ca)
* [YouTube](https://youtube.iamdeveloper.com)

Christina:

* [Twitter](https://twitter.com/coffeecraftcode)

* [Dan on Twitter](https://twitter.com/danieltott)
* [Dan's Website](https://www.dtott.com/)
* [Virtual Coffee](https://virtualcoffee.io) where Dan and I are members
* [Nick's Twitch Stream](https://www.twitch.tv/nickytonline)
* [Nick's YouTube Channel](https://iamdeveloper.com/youtube)
* [Nick on Twitter](https://twitter.com/nickytonline)
* [Christina on Twitter](https://twitter.com/coffeecraftcode)

Looking forward to seeing you on future streams! If you're interested in pairing, fill out [this form](https://iamdeveloper.com/pair). We’d love to tackle an issue with you that the whole community could learn from!

P.S. [Follow DEV on Twitch](https://twitch.tv/thepracticaldev) to be notified when future streams begin and catch old streams on [YouTube](https://www.youtube.com/c/thepracticaldevteam)