teleren/devto huggingface dataset:
Simple Shopping Cart with pure Javascript
Published: 2022-05-18 10:22:33

I'm a code mentor and private programming tutor. Today, me and my student was working on event listeners on JS and I tried to teach how to make a simple and minimal shopping cart. If you are learning JS, this could be a good exercise. You can find code [here](https://github.com/tuytoosh/js-shopping-cart).
In this work we added our products like this:

```
<div class="product">
    <h3>Product one</h3>
    <p>Price: 2000</p>
    <button data-id="1" data-price="2000">Add to cart</button>
</div>
```
We know that in real world we do not this manually and we generate them with loops and we put data that we have got from database maybe.
also we have a nav-bar like this:
```
<div class="toolbar">
    <h1 class="brand">Shop</h1>
    <p>
        Cart items:
        <span id="count">0</span>,
        Price:
        <span id="sum">0</span>
    </p>
</div>
```
And in JS file we try to add event listener on add btns:
```
let btns = document.querySelectorAll(".products button");

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", add);
}
```
and then we try to add or remove the items based on the state of product in the cart:
```
function add(event) {
    let price = Number(event.target.dataset.price);

    let index = cart.indexOf(event.target.dataset.id);
    console.log(cart, index);
    if (index >= 0) {
        cart.splice(index, 1)
        count--;
        sum -= price;
        event.target.className = "";
        event.target.textContent = "Add to cart";
    } else {
        cart.push(event.target.dataset.id);
        count++;
        sum += price;
        event.target.className = "added";
        event.target.textContent = "Remove";
    }
    updateCart();
}
```
and finally we update the cart based on the current cart items:
```
function updateCart() {
    document.getElementById("sum").textContent = sum;
    document.getElementById("count").textContent = count;
}
```

Complete code is available in this [github repo](https://github.com/tuytoosh/js-shopping-cart). If you find it useful give it a star please :)
Fix Laravel app not reading values from .env file
Tags: laravel, php, webdev, tutorial
Published: 2022-05-18 09:53:08

I have been working on an application for a while now, and somehow one morning I noticed the application was no longer reading the Google recaptcha key from the .env file thus preventing me from gaining access to the system.
I thought I had tampered with my code somewhere, I looked back at the recent changes I made and none of them were related to the login aspect of the app.

Here is how I fixed it (I'm putting this out to help other developers as well as an easy access to my solution should I ever run into this kind of error again). 

I initially ran the following commands but none of them fixed the issue.
```
php artisan optimize:clear
php artisan route:clear
```

To fix the issue, I simply had to clear the configuration cache by running the following command:

```
php artisan config:clear
```

and that was it, my application was reading the environment variables from the .env file. 

If you found this article helpful, don't forget to leave a like. 
Thanks for reading.
How to gradually add an eslint rule
Tags: development, eslint, javascript, node
Published: 2022-05-18 09:51:38

---
title: "How to gradually add an eslint rule"
published: true
description: Sometimes you decide to add a new eslint plugin or rule to your javascript project. To not do 2000+ files change you may try to gradually change files with lint-staged.
tags:
  - development
  - eslint
  - javascript
  - nodejs 
cover_image: https://strdr4605.com/how-to-gradually-add-an-eslint-rule.jpg
canonical_url: https://strdr4605.com/how-to-gradually-add-an-eslint-rule
---

As your javascript project grows and new engineers are joining the team, you may try to add new eslint plugins and rules to make the code base more rigid.

The problem is that often these new eslint rules may require changes in all project files, and as your project is big enough, you may have a situation when eslint rules require changes in [2000+ files](https://strdr4605.com/how-i-found-a-bug-in-2000-files).

What if you could gradually enforce an eslint rule, without breaking the CI of your project.

We can do this using [lint-staged](https://github.com/okonet/lint-staged), [husky](https://typicode.github.io/husky/), and some changes in the `.eslintrc.js` file.

I hope you are already using `lint-staged` with `husky`. If not, please set up it.

Your `.lintstagedrc.js` file may look something like this:

```js
// .lintstagedrc.js
module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};
```

You may also have a script in your `package.json` file, that you run in CI to make sure eslint rules are followed:

```json
...
"scripts": {
  "eslint:run": "eslint --ext=.js,.jsx,.ts,.tsx --quiet .",
}
```

Now let's say you want to enforce the removal of all console logs using the eslint rule `no-console`.

In your `.eslintrc.js` file, set the rule to warning:

```js
// .eslintrc.js
module.exports = {
  ...
  rules: {
    'no-console': 'warn',
  ...
```
Now running `npm run eslint:run` will just show a bunch of warnings but will pass the check.
Next, you need to create a new eslintrc file that will be used only by `lint-staged`. Let's name it `eslintrc-staged.js`. 
There you need to extend the default eslint config and override the rule to error.
```js
// .eslintrc-staged.js
module.exports = {
  extends: './.eslintrc.js',
  rules: {
    'no-console': 'error',
  }
};
```
The last change needs to be done in `.lintstagedrc.js` to tell lint-staged to use another config file when running eslint.
```js
module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint -c eslintrc-staged.js --no-eslintrc --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};
```
Now, when doing changes to the project, eslint will throw errors only to the files that were changed before the commit.
Static Files in Django Explained
Tags: python, django
Published: 2022-05-18 09:17:02

When adding styling or interactivity to your website using CSS or JavaScript, you need to understand the concept of static files in Django.

**Static files** includes files like CSS, JavaScript, and images that you may want to serve alongside your side. Before adding static files in your `settings.py` file. 

```python
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0.0/howto/static-files/

STATIC_URL = '/static/'
```

This configuration makes static files available at `localhost:8000/static/` when the server is launched. We need now to tell where Django can find the static files in the project. 

```python
STATIC_URL = '/static/'

# Add these new lines
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
```

The `STATICFILES_DIRS` file tuples tell Django where to look for static files. In this case, the static files are stored in a folder called `static` at the root folder.

Django also comes with a mechanism for collecting static files into one place so they can be served efficiently. This is the goal of `STATIC_ROOT`. 
When using the `python manage.py collectstatic` command, Django looks for all static files in the apps and collects them in the `STATIC_ROOT` path, then in the `staticfiles`. 

This feature is handy for serving static files, especially in production settings.

You can learn more about static files in Django [here](https://docs.djangoproject.com/fr/4.0/howto/static-files/).



*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
How fix Jmeter on a Mac ? Could not initialize class org.apache.jmeter.gui.util.FileDialoger
Tags: jmeter
Published: 2022-05-18 09:14:38

[](https://david.raleche.com/web-consulting/how-fix-jmeter-on-a-mac-could-not-initialize-class-org-apache-jmeter-gui-util-filedialoger/)
A Simple counter using javascript
Published: 2022-05-18 08:42:10

---
title: A Simple counter using javascript
published: True
description: This is a simple counter app using html, css and js
tags: 
//cover_image: https://direct_url_to_image.jpg
---

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

CSS:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  background-image: linear-gradient(to left, #d89537, #4e944f);
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Counter {
  background-image: linear-gradient(to left, #b4e197, #4e944f);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 700px;
  border: #b21010 solid 3px;
}

h1 {
  background-image: linear-gradient(to right, #02abff, #9041da);
  color: #fff;
  margin-top: 50px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  font-weight: 400px;
  font-size: 20px;
  margin-top: 30px;
  color: beige;
}

p span {
  color: orange;
  font-size: 30px;
}
.Buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
#triggerButton {
  color: #ca7002;
  height: 40px;
  width: 75px;
}

#triggerbtn {
  color: #ca7002;
  height: 40px;
  width: 75px;
}


JavaScript:
    window.addEventListener("load", () => {
  const counter = document.querySelector("#counter");
  const triggerButton = document.querySelector("#triggerButton");
  const triggerBtn = document.querySelector("#triggerbtn");

  triggerButton.addEventListener("click", () => {
    counter.textContent = parseInt(counter.textContent) + 1;
  });
  triggerBtn.addEventListener("click", () => {
    counter.textContent = parseInt(counter.textContent) - 1;
  });
});
Resolution error laravel, cannot process vue file
Tags: laravel, vue, loader, compiler
Published: 2022-05-18 08:41:52

I you enconter this error in larevel when executing npm run dev with vue files : 

> currently no loaders are configured to process this file .vue

go in webpack.mix.js add .vue() like 
`mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', []);`
Rerun npm run dev
If there is still an error run `npm i vue-loader@latest`
Run npm run dev and all should be okay
Guide to Front End Developer Career Paths
Tags: devops, career, webdev, programming
Published: 2022-05-18 08:21:00


Wondering how to become a Front End Developer? What skills are required for a Front End Engineer and what is the career path for Front End Developer?

In this [article](https://blog.getace.io/all-posts/front-end-developer-career-paths), you will find Front End Developer levels descriptions, what skills you need to be a Front End Developer and Front End Engineer career goals examples.

## Front End Development Career Path Templates

Click on the role & get the list of career path levels (or grades) for Front End Developers and top Front End Developer skills on each level.

- [React Developer](https://www.getace.io/)
- [Vue Developer](https://www.getace.io/)
- [Angular Developer](https://www.getace.io/)
- [Front End Developer](https://www.getace.io/)
## 50+ tech roles
Need more roles? Go to [Ace’s career path templates](https://www.getace.io/templates) for 50+ tech roles.

You’ll find career paths for Backend Developer, Game Development, Software Testing (QA), Data Science, Design, Management roles, and more.
Javascript Objects
Tags: javascript, objects, cleancode, webdev
Published: 2022-05-18 08:14:44

Consider using a lookup map object instead of `if else` or even worse, a `switch`; when you need to check for a specific condition then get some defined proprieties on that condition!![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lnrkgmnqns75h4eww00.jpeg)
Launching the State of the Appwrite Community Survey
Tags: appwrite, community, feedback, opensource
Published: 2022-05-18 08:13:23

As Appwrite is pushing forward towards v1.0 and the Cloud Launch, we want to ensure that Appwrite is truly enabling our developer community 👨‍👩‍👧‍👦 in the way we have envisioned it will 🤝. We want to put the community first and provide a better experience for everyone.

As a result, we’re launching the **State of the Appwrite Community** survey to gather inputs and feedback from members of the Appwrite community and beyond 🥳. 

We hope to use this survey to understand better: 

* Who is our community? 👨‍👩‍👧‍👦 
* What tools are you building with? 👨‍💻👩‍💻
* Sharing your experience on building with Appwrite 🏗️
* Your experience (if applicable) contributing to Appwrite 🫂

To participate, please [fill out the survey here](https://7nxwryuitoy.typeform.com/soac-survey)! 🙌 The Survey will close on **3rd June, 2022** at **11:59 PM UTC** ⏰

We will be selecting **5 random survey submissions** to win a  **$100 Amazon Gift Card** (or equivalent Appwrite swag credits), so make sure to fill out the survey as soon as possible! 🔥
Zero-Runtime Scoped Component Styling Made Easy!
Tags: css, javascript, solidjs, react
Published: 2022-05-18 07:18:29

## Background

I have traditionally been a Vue user, though recently I have decided to write an app in Solid. Unfortunately, turns out Solid doesn't have anything like `<style scoped>` in Vue. I saw some recommendations for CSS-in-JS solutions, but I didn't really like adding additional runtime just for styling, and integrations with tooling were painful a lot of the time. I needed something with better compatibility and less runtime preferably.

## CSS Modules are (almost) perfect

As in, they seem to address the problem I have almost perfectly. One small issue though: making a CSS module for every new component gets tedious! Imagine having a new CSS file for every component sitting in the same folder!

## Introducing: `vite-plugin-inline-css-modules`

So, I wrote a simple Vite plugin that lets you write CSS modules inside of your components. It's blazingly fast due to its simplicity, and features **no additional runtime** since it transpiles directly to a CSS module.

Let's see it in action:
```js
import { css } from 'vite-plugin-inline-css-modules'

const classes = css`
  .root {
    background-color: #1f1;
    @apply rounded-md;
  }
`

export const Root = () => <div class={classes.root}>Hello world</div>
```
Transforms to:
```js
import classes from 'virtual:inline-css-modules/App-0.module.css'

export const Root = () => <div class={classes.root}>Hello world</div>
```

No runtime!

Also, side note: this also can help with messy tooling such as integrating Tailwind/UnoCSS, since I've experienced problems in the past with CSS-in-JS solutions and using `@apply`. The rule is simple: any valid CSS module syntax is going to also be valid inside of a inline CSS module. Because that's what it transpiles to.

Also, this'll work with any framework without any sort of special integration because CSS modules are standard across all frameworks. Just declare a template string with styles and it should just work. :)

[Check out the plugin here](https://github.com/Bluskript/vite-plugin-inline-css-modules)
Wednesday Links - Edition 2022-05-18
Tags: java, jvm, spring, soap
Published: 2022-05-18 08:12:37

Who You Gonna Call? Behind the Scenes of JVM Method Invocations (11 min)🛎️
https://www.guardsquare.com/blog/behind-the-scenes-of-jvm-method-invocations

New in Spring Framework 6: HTTP Interfaces (11 min)🆕
https://www.youtube.com/watch?v=A1V71peRNn0

Debugging a JVM Crash for LinkedIn – Part 1 (8 min)💥
https://devblogs.microsoft.com/java/debugging-a-jvm-crash-for-linkedin-part-1/

SOAP: (not really) Simple Object Access Protocol (3 min)🧼
https://nurkiewicz.com/74

Time-series compression algorithms, explained (14 min)🕰️
https://www.timescale.com/blog/time-series-compression-algorithms-explained/

Toying with Kotlin's context receivers (4 min)🧸
https://blog.frankel.ch/kotlin-context-receivers/
What if the world connects with unlimited data at the speed of light?⚡
Tags: news, discuss, web3, talktime
Published: 2022-05-18 08:01:10

## I learned a new thing today while reading about 5G technology.

---

In that, **people think that 5G means carrying more data at the higher speed. But it is not so, it is about carrying less information at a higher speed**.

Then a thought occurred to me🤔

**What id the world could connect with unlimited data at the speed of light❔ And it is always free for everyone.**

This would be an amazing feat, and may be possible in the future💭

This would revolutionize how we live and work!

- What innovations will happen if such a thing happens?
- And what will you do using it?

I love watching high-resolution films😃
Today's Daily Humor For Devs - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-05-18 08:00:19

---
title: "Today's Daily Humor For Devs - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596739999.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why couldn't the React component understand the joke?

___A:___ Because it didn't get the context.
 -->
ICO development services
Tags: blockchain, crypto, coindevelopment, icodevelopment
Published: 2022-05-18 07:40:14

ICO ( Initial Coin Offering) is a smart way of raising funds in the crypto generation. This help the business owners in effective fundraising for their crytocurrency projects from the investors.
Launch your crypto token in various blockchain platforms like Ethereum, Tron, and Binance smart chain with the help of our efficient [ICO development services](https://www.bckodes.com/ico-development/) that is carefully built with custom blockchain development.
Bckodes offers the pre and post ICO services for a profitable ICO process to reach the global markets effectively. Approach our team of blockchain experts for seamless crowdfunding of your business.
Use jsx as server side html template
Tags: node, javascript, web
Published: 2022-05-18 07:33:10

---
title: Use jsx as server side html template
published: true
description: a tiny library to render html using jsx/tsx
tags: node, javascript, web
//cover_image: https://direct_url_to_image.jpg
---

source code: https://github.com/taowen/incremental-html/tree/main/packages/jsx-to-html

```tsx
// filename: newsletter.tsx
import { jsxToHtml } from '@incremental-html/jsx-to-html'

// server is an express router
server.get('/newsletter', async (req, resp) => {
    const html: string = await jsxToHtml(<div>hello</div>);
    resp.status(200).set({ 'Content-Type': 'text/html' }).end(html);
})
```

The `tsconfig.json` should configure like this to translate `*.tsx` using jsxToHtml

```json
{
    "compilerOptions": {
//...
        "jsx": "react",
        "jsxFactory": "jsxToHtml.createElement",
        "jsxFragmentFactory": "jsxToHtml.Fragment",
//...
}
```

## async context

We can use jsxToHtml as an alterantive to node.js `async_hooks`. 
There is no runtime trick, works in any environment (including deno, cloudflare workers, etc)

```tsx
test('component with context', async () => {
    const C1 = async (props: {}, ctx: { msg: string }) => {
        await new Promise<void>(resolve => resolve());
        return <div>{ctx.msg}</div>
    }
    const result = <context msg="hello"><C1 /></context>
    expect(await jsxToHtml(result, { msg: 'original msg' })).toBe('<div>\nhello\n</div>');
})
```

The context will be automatically passed down the tree. 
`<context>` is a built-in component to alter the context in the middle.
How to install the mysql2 Ruby gem on a Mac M1
Tags: ruby, rails, tutorial
Published: 2022-05-18 07:27:27

The Mac M1 family has been presented more than two year ago and I still encounter a new issue every time I try to install the mysql2 Ruby gem.
But... I think I've finally found a set of commands to fix all these  issues!

First of all, install the required dependencies:
```
brew install gcc zstd openssl mysql
```
now export all the libraries paths which we need to build the gem:
```
export LDFLAGS="-L/opt/homebrew/opt/openssl@3/lib"
export CPPFLAGS="-I/opt/homebrew/opt/openssl@3/include"
export LIBRARY_PATH=$LIBRARY_PATH:$(brew --prefix zstd)/lib/
```
aaaand now install the mysql gem:
```
gem install mysql2 -v '0.5.4' -- --with-opt-dir=$(brew --prefix openssl) --with-ldflags=-L$(brew --prefix zstd)
```

woila', I'm 100% this will succed, if don't please leave a comment so we can figure out a new solution to help who will read this post 🚀
How to Start Programming in C++ and Why Learn C++?
Tags: cpp, programming
Published: 2022-05-18 07:23:12

If you want to learn low-level programming, C++ is the ideal choice for you. Embedded programming, gaming, server-side applications, and even high-frequency trading are just a few of the fields where C++ programming is used. The majority of complex software, such as operating systems, database management systems, and powerful trading platforms, is written in C++.

While many of us have learned to program in C and C++, I will agree that C++ is challenging to master. Many concepts, such as points, are tough to grasp, but with the help of these free C++ classes, you will progressively learn them.

Learning C++ will undoubtedly present you with numerous opportunities. C++ programmers are in high demand, particularly in the sector of high-frequency trading, where every microsecond counts, and C++'s power is critical.

C++ is the language that allows you to utilize OOP to handle software complexity while also allowing you to get near to your machine and access all of your computer's hardware, something that other object-oriented languages like Java or Python do not. If you get stuck with any c++ homework help, you should seek professional assistance.


## Should I learn C++ In 2022?

According to the TIOBE index and the IEEE spectrum, the [C++ programming language](https://www.codeavail.com/C++-Programming-Help) is currently the world's fourth most popular language. C++ is a widely-used programming language for back-end development. It is a very fast and effective language. Many tools and frameworks use C++'s speed and efficiency. Because of its dependability, performance, and efficiency, it is in high demand now and will stay so in 2022.

If you're a coder who wants a comprehensive understanding of how computers work, C++ is a wonderful language to learn. C++ allows you to practice low-level programming ideas while also helping you grasp how computers think and work. After learning C++, you may find that other languages and programming concepts make more sense.

Your personal and professional goals will determine whether or not you wish to learn C++ in 2022. Learning C++ will provide you with more possibilities as a developer overall.


## Final words…

C++ is still one of the most widely used programming languages in software engineering and computer science. Despite its high learning curve, it's a widely used low-level programming language used to develop many relevant applications. Learning a language that is near to bare metal has numerous advantages, including a greater understanding of how computers work.