teleren/devto huggingface dataset:
🚀10 Trending projects on GitHub for web developers - 23rd October 2020
Tags: javascript, typescript, webdev, testing
Published: 2020-10-23 14:26:57

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Svelte

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

{% github sveltejs/svelte %}

---

### 2. Headless Recorder

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. 

{% github checkly/headless-recorder %}

---

### 3. dragmove.js

A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzipped.

{% github knadh/dragmove.js %}

---

### 4. Webiny

Webiny is a platform for building serverless applications and APIs. Out of the box, we provide a complete plugin based admin interface and a set of ready-made apps. It is built for self-hosting on AWS, but we do consider multi-cloud deployment in the future.

{% github webiny/webiny-js %}

---

### 5. Appsmith

Build apps by connecting UI widgets to database queries or APIs. Write any logic in JS.

{% github appsmithorg/appsmith %}

---

### 6. Admin Bro

AdminBro is An automatic admin interface which can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.

{% github SoftwareBrothers/admin-bro %}

---

### 7. Awesome-Cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

{% github LeCoupa/awesome-cheatsheets %}

---

### 8. All Contributors

This is a specification for recognizing contributors to an open source project in a way that rewards each and every contribution, not just code.

{% github all-contributors/all-contributors %}

---

### 9. PixiJS

PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.

{% github pixijs/pixi.js %}

---

### 10. Froala

Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.

{% github froala/wysiwyg-editor %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
How to use Preact with Laravel Mix
Tags: laravel, preact, laravelmix, react
Published: 2020-10-23 14:02:36

---
title: How to use Preact with Laravel Mix
published: true
description: I share my simple configuration to use Preact with Laravel Mix
tags: laravel, preact, laravelmix, react
//cover_image: https://direct_url_to_image.jpg
---

> **Update 2023**: I highly advise using Vite with their official [preset](https://github.com/preactjs/preset-vite), as it's much easier to configure and miles faster than Webpack.

In this article, I share my configuration for **Preact** usage with **Laravel Mix**.

Install these dependencies before you get started:

- `preact`
- `@babel/plugin-proposal-class-properties`
- `@babel/preset-react`

You can do it with this command:

```bash
npm install preact @babel/plugin-proposal-class-properties @babel/preset-react
```

Next, add this content to your `webpack.mix.js`

```js
// webpack.mix.js
const mix = require('laravel-mix');

mix.webpackConfig({
    "resolve": {
        "alias": {
            "react": "preact/compat",
            "react-dom": "preact/compat"
        }
    }
});

mix.babelConfig({
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ],
});

mix.react('resources/js/app.js', 'public/js');
```

And here is an example app component, you can store it in `resources/js/app.js` file:

```js
// app.js
import { h, render, Component } from 'preact';

window.React = require('preact');

class App extends Component {
    render() {
        return <h1>Preact from Laravel Mix</h1>;
    }
}

render(<App />, document.body);

```

**Note:** As we set out rendering node as `document.body`, you should place your script tag inside `<body>` tag. If you need to place `<script>` tag in the `<head>` section - you will need to add `defer` attribute.

```blade
<body>
<script src="{{ mix('js/app.js') }}"></script>
</body>
```


That's all, happy coding! :)
Cloud Native - KubeCon + CloudNativeCon North America 2020 Virtual 
Tags: cloudnative
Published: 2020-10-23 14:21:29

JOIN US at #KubeCon + #CloudNativeCon NA Virtual, Nov 17-20! There will be TONS of amazing talks and ways to network with #TeamCloudNative. 

[REGISTER](https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/register/)

[Cloud Native Computing Foundation Releases Schedule for KubeCon + CloudNativeCon North America 2020 Virtual 🌟☁️📽️](https://www.cncf.io/announcements/2020/10/01/cloud-native-computing-foundation-releases-schedule-for-kubecon-cloudnativecon-north-america-2020-virtual/?fbclid=IwAR0q0J7o-p_4kvmW8d3-QjnzXR13IiH-s7pJpFpd7YgDFfk2pLV_fad29tQ)
How to Open a New Tab or Window using Javascript?
Tags: javascript, webdev
Published: 2020-10-23 14:02:02

It is a very general use case to open a link in another tab or in a separate window. We prefer to use `target="_blank"` attribute in HTML to open a link in new tab.

Sometimes we need to open a link in new tab only by javascript. Here are the code snippets to open a link in a new tab or new window by pure Vanilla Javascript.
## Open New Tab Using Javascript
```
 window.open("https://holycoders.com/", "_blank", "noopener")
 ```
 The [open method](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) is very useful to open a new tab or window in the browser.
## Open New Window Using Javascript
 ```
 window.open('https://holycoders.com', '_blank', 'noopener,height=600,width=960,scrollbars=yes'); 
```
 Let me warn you that it is very annoying and never recommended to open a new window on the user's system just for your own purpose (I am talking about those ads).
 If you liked this article you will also like **[Pure Javascript Modal](https://holycoders.com/vanilla-javascript-popup-modal/)**
Unsubscribe all YouTube channels at once!
Tags: javascript, tutorial, codenewbie, showdev
Published: 2020-10-23 14:00:13

Without any boring intro, let me get straight to the point. 

1. Go to [this](https://www.youtube.com/feed/channels) link

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


2. Right-click and go **inspect** then go to **console**


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

3. Now copy the below script and paste it on the console

```js
function youtubeUnsubscriber() {
    var count = document.querySelectorAll("ytd-channel-renderer:not(.ytd-item-section-renderer)").length;
    var randomDelay = 500;
    
    if(count == 0) return false;

    function unsubscribeVisible(randomDelay) {

        if (count == 0) {
            window.scrollTo(0,document.body.scrollHeight);
            setTimeout(function() {
                youtubeUnsubscriber();
            }, 10000)
        }

        unsubscribeButton = document.querySelector('.ytd-subscribe-button-renderer');
        unsubscribeButton.click();

        setTimeout(function () {
            document.getElementById("confirm-button").click()
            count--;
            console.log("Remaining: ", count);

            setTimeout(function () {
                unsubscribedElement = document.querySelector("ytd-channel-renderer");
                unsubscribedElement.parentNode.removeChild(unsubscribedElement);
                unsubscribeVisible(randomDelay)
            }, randomDelay);
        }, randomDelay);
    }

    unsubscribeVisible(randomDelay);
}

youtubeUnsubscriber();
```
4. Hit enter and wait for some time to see the magic

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


After all are done, refresh the page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ms5zt333eh07us7deuej.png)
webpack compiles node_modules
Tags: javascript, webpack, typescript, babel
Published: 2020-10-23 13:53:22

I found out an interesting use case as we import a module (just call it `foo`) which supports both node and browser. But with the same import of `foo`, `webpack` would end up a different result in the browser. Let's have a look at the following example:

Firstly, assume to have a package `foo` like below:
```sh
- dist
-- index.js (cjs)
-- index.module.js (esm - mostly for browser)
```
The content of `foo` would look like in both modules:

```javascript
// dist/index.js 
// the content can be `cjs` or `umd`, for example:
module.exports = 1;

// dist/index.module.js
export default 1;
```

Next, write a simple snippet to import `foo` in `cjs` style:

```javascript
const foo = require('foo');

console.log(foo);
```

Then run on Node:
```javascript
const foo = require('foo');

// since above line of code ref to dist/index.js so will work as expected
console.log(foo); // 1
```

Finally, run on browser via `webpack` after having been transformed:
```javascript
// webpack auto select `esm` module by default
var foo = __webpack_require__("./node_modules/foo/index.module.js");

// __webpack_require__ will turn the foo object to be like: 
// { default: 1 }

// As a result of that, this code won't work as expected
console.log(foo); // undefined
```

To sum up, we have to be careful with the package (`foo`) which supports running on node/browser to avoid unexpected result as above. As I know most of packages are now being implemented that way. If you write code in Typescript or Esnext style, you can enable the configuration `{ esModuleInterop: true }` to import helper to sort out the issue in case of Typescript.

Thanks for reading!
Relational Database Specialty
Tags: alibabacloud
Published: 2020-10-23 13:45:20

The Alibaba Cloud Relational Database Specialty Accreditation Learning Path covers Alibaba Cloud’s two primary database systems: RDS and PolarDB. 

In addition, the course covers daily operations and maintenance best practices, including day-to-day operations in both DMS (Data Management Service) and DBS (Database Backup Service). After completing this course, you will have a full understanding of Alibaba Cloud’s database product portfolio and will be able to carry out day-to-day database operations and maintenance tasks on Alibaba Cloud.

[Register Here](https://edu.alibabacloud.com/course/333)
How to Change the Message of Older Git Commits
Tags: git, vsc
Published: 2020-12-28 12:16:03

---
title: How to Change the Message of Older Git Commits
published: true
date: 2020-10-23 00:00:00 UTC
tags: git, vsc
canonical_url: https://tech.serhatteker.com/post/2020-09/changing-old-git-commit-messages/
---

If you need to change the message for multiple commits or an older commit, you can use *interactive* `rebase`:

+ α. Use `git rebase -i HEAD~n` command to display a list of the last n
   commits in your default text editor.

```bash
# Displays a list of the last 5 commits on the current branch
$ git rebase -i HEAD~5
```

The list will look similar:

```git
pick 9a55d9f Fix #3472
pick c174ecc Update README
pick b1c10fb Bad commit message
pick be26909 WTH
pick b723070 WIP

# Rebase 8de6748..b723070 onto 8de6748
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out
```

+ β. Replace **pick** with **reword** before each commit message you want to change. As an example I'm going to change my last 3rd, 4, 5th commit messages:

```git
pick 9a55d9f Fix #3472
pick c174ecc Update README
reword b1c10fb Bad commit message
reword be26909 WTH
reword b723070 WIP
```

+ γ. Save and close this file.

+ δ. In each related commit file, type the new message, save the file and close it.

+ ε. Push your changes with `--force` flag to force push:

```bash
$ git push --force <branch>
```

All done!
How can i conditionally load taxonomy-{taxonomy}.php template files through functions.php

Tags: wordpress, php, taxonomy, template
Published: 2020-10-23 13:35:14

I have a movie review site, i would like to conditionally load the taxonomies of actors and directors only if a option of my theme is active. At the moment in the root theme folder I have these 2 files

taxonomy-actors.php
taxonomy-directors-php
I would like them to be used only if the function is active for example

if ($theme_comments == 1) 
{ 
 //load taxonomy-actors.php
} else {
//don't load taxonomy-actors.php
}
My hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-23 13:33:31

### Background

How did i got there?
So i've been learning programming for about 3 years.
I recently (2 months) got hired for junior web develeoper position ( fullstack basically ).
When i was trying to grow in my free time as developer i found out about hactoberfest and thought that i will give it a shot!

### Progress

I've completed 4 pull requests so as of today i've completed Hacktoberfest challenge and I'm patiently waiting for shirt!
Solving issues for others was fun even though i personally don't think it was that hard ( maybe next year i will have chance to get my hands on bigger projects ) so if you hesitate on trying because you are scared of failing, just do it, you can find task that you will for sure be capable of solving ;D

### Reflections

My overall experience was great. I've learned how to contribute to open source projects and actually helped someone to solve their issue. I will for sure participate again!
Integration test with xUnit
Tags: xunit, unittest, integrationtest
Published: 2020-10-23 13:30:13

Tests is one of those thing that people get interested in and forget again. I don't know why. Maybe in the field of custom software development, software engineers do not need high quality. Another guess is that, it make the software more expensive. Do not forget that some people believe in magic. They do not think a not-tested software will fail somewhere down the road. A more reasonable excuse, in my point of view, is that in a given society you seldom can work up the common standards. When things on other industries are not checked against failures enough, you will not be interested to have better quality in your software.

I (we) am not an exception. Either in personal projects or team projects, I start testing seriously, but after a while, all the plans fade. The project comes in a critical point in which client wants it soon. Or, another project gets started while no new developer is available. Then what happens is that tests are not continued any more.

In the recent years, once [I used JMeter for load testing](https://dev.to/afsharm/jmeter-acquaintance-and-installation-36ag). It did not continue forever, however it revealed some serious flaws. Also helped re-generating the error so colleague were able to resolve the problem. In the past, I used to utilize old school [NUnit](https://en.wikipedia.org/wiki/NUnit) to do unit tests. Those days, DI/IoC was not common, even so interfaces or mocking, so it was hard to test every corner of the code.

These days, in the era of .Net Core 3.x, I have explored [xUnit](https://en.wikipedia.org/wiki/XUnit.net) which is very similar to NUnit. Using xUnit, I do both unit testing and integration testing. The good news is that I can use [Entity Framework in memory](https://docs.microsoft.com/en-us/ef/core/providers/in-memory/?tabs=dotnet-core-cli) for a far better performance. In the past I use SQLite for the same requirement, but now it does the work good. There is also a [Test Server](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.testhost.testserver?view=aspnetcore-3.0) which I am not familiar enough. But, I hope I can fully utilize it soon.

With these tools I do both unit test and integration test. I feel, people are better convince with the integration tests.
Luxhy's Anime
Tags: codepen, html, css, jav
Published: 2020-10-23 13:24:16

<p>Hi my name is Luxhy I am making this site for people who want to learn more about anime and find more anime shows and mangas. For more info dm me on instagram @Yang_debenci</p>

{% codepen https://codepen.io/luxhy/pen/OJXyEGR %}
Sześć rodzajów polimorfizmu
Tags: haskell, scala, rust, scheme
Published: 2020-10-23 13:19:20

"Jest sześć rodzajów polimorfizmy" usłyszałem kiedyś i spróbowałem je w wszystkie policzyć. Jest to trudne ponieważ prawdopodobnie w żadnym z języków programowania nie występują wszystkie rodzaje polimorfizmu
https://writeonly.pl/polymorphism
Don’t fall for these tricks in your Slack developer chats 😈
Tags: career, beginners, codenewbie, watercooler
Published: 2020-11-01 02:17:39

---
title: Don’t fall for these tricks in your Slack developer chats 😈
description: I'll show you a couple of the scams I've seen going around lately. If you get contacted by someone with one of these asks, you probably want to avoid them.
published: true
date: 2020-10-23 13:18:00 UTC
tags: career,beginners,codenewbie,watercooler
canonical_url: https://raddevon.com/articles/dont-fall-for-these-tricks-in-your-slack-developer-chats/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/odipaydletfa4z0t8b4c.jpg
---
I’m not as active in my developer Slacks as I once was. I find most of the direct messages I’m getting these days are not people I know or people who found me online somehow and are curious to learn more about me. It’s people who want to quickly become my “friend” so they can extract some resource I have.

I’ll show you a couple of the scams I’ve seen lately. Well, one may not qualify as a scam, but it’s still suspect. If you get contacted by someone with one of these asks, you should probably just avoid them.

{% youtube 7OOW-548I6E %}

Thanks to Tequask for [the great thumbnail image](https://commons.wikimedia.org/wiki/File:TP%27ing_In_California-02.jpg)!

When I recorded this video, I thought it would go live after Halloween. You’ll hear me reference that fact a couple of times in the video. It ended up going live early, so the light Halloween theme is just in time!
Pharmacy eCommerce websites: How are things going here?
Published: 2020-10-23 13:16:17

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

During this period of global digitalization every business, which tends to grow, should consider an eCommerce approach. And pharmacy is not an exception.

Building an eCommerce website for your drugstore could become insanely profitable. In this article you’ll know how exactly to perform that your digital arena will be completely sold-out. 

When your launch your online pharmacy store, first of all it’s better to pay attention to the following features:

* **Favorites.** This feature fits pharmacy websites a lot, because medication is such a type of product that can be consumed by course. In this case a customer visits your store and, skipping the searching stage, attends favorites list and reorders required meds. So simple;

* **Online prescriptions.** This solution is very convenient for customers, who are unable to reach a physical pharmacy due to different reasons: state of health or even living abroad. So it’s a very forward-looking feature, which will be highly-appreciated by your buyers;

* **Mobile App.** Having the whole pharmacy store in your pocket could sound like a fairy-tale before. With mobile application it’s possible to fasten an ordering process or just to receive a reminder “Baby, did you forget to take your meds?”. This feature is a great technique to show a customer that your company takes care of him and, thus, to increase his loyalty;

* **Information updates and promotions.** Updates are a strong tool to bring your client back to your store. Also you can communicate with a consumer by means of sending him enlightening articles on the subject of health with some tips and advice or even creating a separated pharmacy blog in an app or website. In this way you’ll show attention as well, and your subscriber will be very grateful.  

Indeed, pharmacy is a very promising field. Anyhow, it needs professional management to meet the expectations. Currently it’s possible to partially shift responsibility to modern technologies and enhance different spheres, which still demand human intervention. 

Wish you good luck with your upcoming drug store and promise it will become even better if you get acquainted with an article [How to create a pharmaceutical website.](https://dinarys.com/blog/how-to-create-a-pharmaceutical-website)
🧙‍♂️❤️🤑 Invite to become a DOVU developer champion [Open Source Bounty]
Tags: contributorswanted, blockchain, a11y, startup
Published: 2020-10-23 13:15:07

👋 Good day DEV community! 😁

Matt here, Chief Technology Officer from [DOVU](https://dovu.io/).

Just wanted to reach out to all and send out an invite to join our open-source [bounty program](https://blog.dovu.earth/dovu-bounty-program/).

You'll be paid in DOV tokens (minimum 2,000,000 DOV per project) for building open-source contributions that we have spec'd out. [This is our current list](https://github.com/orgs/dovuofficial/projects/7) we are initially looking at creating a [Laravel](https://github.com/orgs/dovuofficial/projects/8) and [NextJS](https://github.com/orgs/dovuofficial/projects/8) client for our API.

We have examples for both projects on how to implement the project in terms of structure and testing.

Why should you care?

- We aim to provide opportunities for new devs.
- All of your fully credited work will be advertised through our distribution channels.
- We will provide direct on-one-one mentorship if you have any questions or queries.
- We welcome and recommend that you add this experience to your resume and LinkedIn.
- Connections to our personal network for possible future contracts and jobs.
- Our tokens can be traded on [Uniswap](https://info.uniswap.org/pair/0x610382c1968aa065a662e34e5a258cc64048324f) for Ethereum.
- Get involved in innovative and tech-for-good carbon offsetting solution using Ethereum, DeFi, and Hedera Hashgraph.

An ideal person in our mind is a driven individual that is trying to break into the industry but is finding it difficult, perhaps due to personal circumstances or the current economy. 

Interested? [Find out more on this link](https://blog.dovu.earth/dovu-bounty-program/) and you can complete a Typeform and I will be in touch with you! 🤗

Thank you