teleren/devto huggingface dataset:
What do you think of this SaaS template ?
Tags: react, typescript, nextjs, tailwindcss
Published: 2021-09-26 13:05:14

Got tired of having to implement auth and payment on my side-projects.

I'made this SaaS business template to focus on what really brings value to my customers.

Made with Typescript/React.js/Next.js/NextAuth.js/Prisma/Stripe/Tailwindcss/Postgresql

https://github.com/gmpetrov/ultimate-saas-ts

What features would you add to make it more useful ?
No 'Access-Control-Allow-Origin' header - Laravel
Published: 2021-09-26 13:01:29

``` php
    No 'Access-Control-Allow-Origin' header - Laravel
```

Vous rencontrez ce problème dans un projet laravel, la solution suivante peut vous être utile.
Suivez les étapes suivantes :
1. Créez un middleware appelé Cors

```php
   php artisan make:middleware Cors
```

2. Ajoutez ces lignes dans la fonction du middleware avant le return.

```php
  //header('Access-Control-Allow-Origin:  *');
    header('Access-Control-Allow-Origin:  
    http://localhost:4200');
    header('Access-Control-Allow-Headers:  Content-Type, X- 
    Auth-Token, Authorization, Origin');
    header('Access-Control-Allow-Methods:  POST, PUT');
```
3. Enregistrez le middleware dans le fichier app > Http > kernel.php, dans la partie $middleware array

```php
   \App\Http\Middleware\Cors::class,
```

ensuite dans la partie $routeMiddleware array 
```php
   'cors' => \App\Http\Middleware\Cors::class,
```

Merci, bonne suite de code.
Establishing Your Stride as a Software Developer 👨🏿‍💻👨🏻‍💻
Published: 2021-09-26 12:21:45

As developers, we are fortunate to have a craft in which we can practice and learn to our hearts' content. We can work on our projects and hone our skills all night long with just a computer and some decent internet access. It's a craft that appeals to those of us who have a growth mindset and a desire to excel at what we do.

Whatever our personal lives are like, we are all limited up to a specific amount of hours we can put in each week. Let us acknowledge that establishing your stride is critical to our success as developers.

Staying healthy and alert, as well as knowing when to take a break, will allow you to grow and be productive in ways you could never have imagined and help you establish your stride as a software developer

So keep this factors in mind and stick to it...
🥗Eat smart
🛌Get Enough sleep.
🧘🏾‍♂️Meditate
⛹🏽‍♂️Exercise
⏰Keep a consistent schedule
The [require] module of [nodejs] doesn't operate. I need some help.
Published: 2021-09-26 12:07:27


I want to use [require('node-fetch')] to use returned data from [REST API] 

The [require] module of [nodejs] doesn't operate.
The source code is only [app.js] one line.
I don't know what to do.

==== (source code) ====
#app.js
const fetch = require('node-fetch');
==== (installed module) ====
nodejs-v16.10.0
npm-7.24.0
node-fetch
==== (error code) ====
PS E:\node> node app.js
E:\node\app.js:1
const fetch = require('node-fetch');
              ^
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\node\node_modules\node-fetch\src\index.js from E:\node\app.js not supported.
Instead change the require of index.js in E:\node\app.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (E:\node\app.js:1:15) {
  code: 'ERR_REQUIRE_ESM'
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2021-09-26 12:00:14

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
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/5e1259620ca4d.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:___ Where does the pirate stash all of their digital treasures?

___A:___ RAR
 -->
🧠 My Latest 12 JS Infographics Tips In One Post 👏
Tags: html, css, javascript
Published: 2021-09-26 11:44:37

😻 I will appreciate your feedback.

 👉 For more useful content, please follow me on [@aliboukaroui](https://twitter.com/Aliboukaroui)

https://twitter.com/Aliboukaroui/status/1440861751927468045

https://twitter.com/Aliboukaroui/status/1440524083536412677

https://twitter.com/Aliboukaroui/status/1439707340148723716

https://twitter.com/Aliboukaroui/status/1439538926600036360

https://twitter.com/Aliboukaroui/status/1436794566179500033

https://twitter.com/Aliboukaroui/status/1436109370132246539

https://twitter.com/Aliboukaroui/status/1435377439350341632

https://twitter.com/Aliboukaroui/status/1434315507818274816

https://twitter.com/Aliboukaroui/status/1434321219235500034

https://twitter.com/Aliboukaroui/status/1434886621007073282

https://twitter.com/Aliboukaroui/status/1434948809558265856

https://twitter.com/Aliboukaroui/status/1435057478362976260
なぜ dev.to に hatena blog から移行したのか
Published: 2021-09-26 11:19:23

## 理由1: 中央揃えの UI が書きやすい

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

これが Hatena
左揃えで首が疲れる。

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04sqmqgpenymr3ex4cs6.png)

これが dev.to
中央揃えで非常に使いやすい。首が疲れない。

画像のアップロードも

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

Hatena は右上までカーソルや視界を持って行かないといけないが

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

dev.to はこうやって中央でやれてかなり使いやすい。

しかも upload 速度が断然早い。

## 理由2: ダークモードに対応している

上記の画像のように、dev.to は綺麗にダークモードになる。

Hatena にはダークモードはないが
Chrome Extension の Care your eyes などで強引に対応できる。

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

適用前

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

適用後

しかし、これは外部ツールなのでくすんでいて美しくない
また他のページに行ったときに強制ダークモードを解錠するのが面倒。

## 理由3: URL が綺麗

新規作成の URL も 

dev.to/new で開けて非常に美しい。
Enhance your React workflow with this new tool
Tags: react, webdev, npm, cli
Published: 2021-09-26 11:18:28

One of the most frustrating thing about developing in web frameworks is the constant boilerplate code needed each time you start a new project, component, page, etc.

The Agrippa CLI aims to solve or at least mitigate this problem for React developers.

Agrippa inherit the modularity and unopinionated approach of React with a modular, customizable CLI that help you create React components easily, and most importantly FAST.

As written in their documentation:

> Agrippa is a humble CLI, whose purpose is to assist React developers in creating components without the boilerplate. It can easily generate templates for React components of different compositions (styling solutions, prop validations, etc.) and in different environments. -Agrippa on Github

## Simple and Convenient CLI

to use Agrippa you can install it globally `npm i -g agrippa` (or `yarn global add agrippa`).

> Once installed, components can be generated using agrippa gen <name> [options]
 Some of the options supported by agrippa gen are:
`--styling`: which styling solution to use (e.g. CSS, SCSS, JSS, Material-UI).
`-props`: which prop validation/definition solution to use (e.g. Typescript interfaces, prop-types, JSDoc comments).
`--children`: whether the components is meant to have children or not.

>   Also, Agrippa automatically detects and sets other, important defaults for you, such as whether to use Typescript or Javascript, and whether to import React or not. — Article written by the creator of the package

Agrippa has more options and configuration, with the latest update adding a custom post commands, and base directories configuration.

## Conclusion

in conclusion the Agrippa CLI has become my preferred way of creating React component hassle-free, and it might be fitting for you too.

I hope you enjoyed reading this article and it would be awesome if you consider showing love to original developer of the package:

[NPM](https://www.npmjs.com/package/agrippa), [Github](https://github.com/NitzanHen/agrippa), [Dev.to](https://dev.to/nitzanhen/meet-agrippa-the-react-cli-for-component-generation-26pk).
Week Four as a TaskForce
Published: 2021-09-26 11:01:51

Hey everyone 👋

As week four is coming to an end, I'm going to share with you everything that was done.
We started off reviewing the developers' implementation of the mockups, to help them correct where they went wrong and also to help them pay attention to small details which they usually tend to miss.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2goxc2144ngu0cvfqroi.png)

Later on, we attended the design thinking session with Olaf, where we learnt about the stages of design thinking and how the completion of a good project depends on those stages. We also learnt how to create and use personas in projects by giving them as much details as possible, in order to put ourselves in the user's shoes so as to design the best user-friendly application or website. #DesignThinking #CodeOfAfrica

The next soft skill was about Client communication in an agile world, where we learnt its basics and frameworks which were very interesting to know about, and I believe it will be of great use in our future designer and developer careers.

And lastly, we attended a Time management session, which I think everyone needs mostly in our work environment, where things tend to overload us due to different reasons, such as procrastination in my case 😒 (just a few times) . 

Good thing is, I got some tips on how to overcome that by setting and keeping deadlines and organize, schedule & plan, which I promise to use in order to deliver a well done work without stressing myself due to procrastination. #SayNoToProcrastination 😊 

All in all, week four was very insightful and educative, I learnt  a lot and I am looking forward to apply all that in my everyday life and also in my work.

Super excited to start week 5. See you there guys :)
Array Of Objects - Part 2
Tags: javascript
Published: 2021-09-26 10:56:15

This is in continuation , if you haven’t read Part 1 , please go through it(2 min read) before starting this one.

In the last part we dealt with creation of Array,json, and array of objects. In this part , we’ll cover the popular array methods, how to loop through array of objects.

*Starting with using array functions on array of Object!*

For this part , we’ll be using the same array of objects, but modifying  its contents.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7s6nwnvh3kuwygeh5yt.jpeg)





Here some methods such as unshift(), push() and splice() and how they function is shown in the picture above

**A short summary :**
* .unshift(variable or object) adds a new object in the beginning
* .push(variable or object) adds a new object at the end.
* .splice({index where to start},{how many items to remove},{items to add}) can be used to insert object at any index in the array.

#Looping Through an Array of Objects

Knowing how to loop through the array is very important to perform search and filtering.
Let’s start with a challenge, *Find all the objects whose rating is above or equal to 50*
For that we will need to loop through each object.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9y5hz7u2bjl6i56z9u5.jpeg)





All the objects with rating >= 50 were returned. Looping through an array of objects is the same as the index of a normal array. Additionally we’ll have to add the key name for which we want the value.
Another way of searching and filtering can be done by array.find() for searching, array.filter() for filtering where in multiple conditions can be used.
Transaction Log Becoming Full Due To Replication
Tags: tutorial, sql, database
Published: 2021-09-26 10:45:27

In the video, [The transaction log for database 'DB' is full due to 'REPLICATION'](https://www.youtube.com/watch?v=kCKkrYZq1l0), we look at this error and what it means along with some possible solutions (architecture dependent).  We do not want to develop the habit of micro-managing transaction logs, so we should consider sizing before setting up any architecture such as replication, ETL solutions, etc. As a note that's not mentioned in the video: since transactional replication uses the log and involves full recovery, we cannot switch to simple recovery without first disabling replication. Thus, we must be in a situation where we can make log adjustments if we cannot disable replication.

Consider these in the context of the video:

- What is an activity that we should avoid with the log?
- Why is development around the log of a database so important?
- Considering that this is an error we may face at some point, what are some architecture considerations regarding the log when we're replicating data?

In general, everything in a database relies around the log. For this reason, we want to consider how we plan for log growth from when we first create our database. If we do not make these plans appropriate, we'll run into a myriad of problems involving the log. Our log growth will also dictate that type of transactions that we allow.  For this reason (and others), I would heavily monitor log growth for any database server where replication or availability groups are setup at minimum.  Monitoring log growth, if allowed (in some contexts), may be a requirement across the board, but it's especially true when we have availability groups and replication setup.

One regular point I like to remind my audience, especially as of recent: we can often solve the same problem with a variety of techniques.  While we look at one or two ways to solve the problem, these aren't the only ways we can approach this problem. The most appropriate solution to a problem is one in which you can troubleshoot quickly in the future and one in which you understand.  In this case, prevention is more powerful than solving a problem at the last minute: the last minute solution will come with more costs (inconvenience).  Be careful about applying solutions that solve a problem, but introduce new problems in the future.
Can you define what you do as a full-stack developer?
Tags: career, discuss, myth
Published: 2021-09-26 10:44:47

---
title: Can you define what you do as a full-stack developer?
published: true
description: The "full-stack developer" job title refers to someone competent in all parts of the software development stack. This means, in plain terms, that they have proficiency in all things technical in the development process, which it's UNREALISTIC.
tags: career, discuss, myth
//cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg6hwyyarkin2mor03yi.png
---

To begin, "full-stack" developers often find it difficult to explain what they do, "I WAS THERE!". 

## A Multitasker person

The Full Stack developer's duties will involve creating the app's user interface, writing code, managing databases, and testing the application thoroughly; doing all of that with some accuracy, which it's NOT TRUE/UNREALISTIC.

While it's correct that devs with a comprehensive set of skills are in demand, the term "full-stack developer" is often abused; in today's workplace, being a full-stack developer indicates various forms to different people.

## How Companies perceives the job

Some people see the job title carrying someone who can code anything, regardless of context or language. Others adopt "full-stack," introducing developers who have little experience in various things. In the most basic sense, the job title is employed to simply means "a combination of skill sets used broadly without a narrowed thinking."

In today's workplace, there is a strong trend towards hiring developers with a broad set of skills; this indicates that employers are looking for "full-stack" developers who know a little of everything and are ready to accommodate any type of environment quickly.

On the other side, many companies prefer to hire developers with solid/compact experience in several programming languages.

## The Summary

So, the question is, it's Good or Bad to become a Full Stack Developer?

🟨 Good for companies to launch/test/iterate fast and to spend less money.

🟨 Good for candidates to adopt it to experiment, find where their skills fit, and then stick to a narrowed skill-set and scale.

🟥 Bad for Products Quality considering the broad skill-set of the developer. 

🟥 Bad for developers in the long run because serious companies tend to hire narrow-skilled people rather than broad-skilled ones.


## My Perspective

You can choose at a certain point to become a Full Stack Developer, to experiment with your skills/wants/talent, then switch rapidly after finding where your skills/personality fit more  and stick to it in the long run.

## A Fact

🟩 Excellent people in a particular skill perform better and make Excellent products.
Beware of Colons in Yarn Scripts
Tags: todayilearned, yarn
Published: 2021-09-26 10:42:19

Let us say you have a monorepo that uses the latest Yarn with [workspace-tools](https://yarnpkg.com/cli/workspaces/foreach) plugin. There you have two child workspaces, e.g. `frontend` and `backend`. They list some linting scripts like `lint:js` and `lint:css` that use the common convention of separating the scope with a colon (`:`).

For obvious reasons, `backend` doesn't have a `lint:css` script. The root workspace exists only for grouping purposes and therefore doesn't have _any_ linting scripts.

```
- root workspace
  - backend workspace
    - lint:js
  - frontend workspace
    - lint:js
    - lint:css
```

Now you want to lint all workspaces at once using the `yarn workspaces foreach run` command that tries to run the specified script in _each_ workspace, including the root one. You will do something like this:

```shell
# Lint all JS
yarn workspaces foreach run lint:js

# Lint all CSS
yarn workspaces foreach run lint:css
```

As mentioned before, not all workspaces have the specified scripts, but that should not be a problem because [the documentation](https://yarnpkg.com/cli/workspaces/foreach#details) states the following:

> If the command is `run` and the script being run does not exist the child [or current] workspace will be skipped without error.

However, linting all JS results in a cryptic message in the root workspace (as a side note, this is already [fixed](https://github.com/yarnpkg/berry/issues/3048) in the canary version):

```
Usage Error: Couldn't find a script named "lint:js".
```

Linting all CSS is even funnier: the `lint:css` from `frontend` is executed three times, once for each workspace.

This is because Yarn has [a little-known feature](https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces) that makes any script with a colon in its name global. For `lint:js`, this means that there are two conflicting versions of this script in the root workspace, which leads to the "Couldn't find..." error (again, this is [fixed](https://github.com/yarnpkg/berry/issues/3048) in the canary version). For `lint:css`, this means that the `frontend` script is global, so it can be called from any workspace.

A script with a colon in its name implicitly "exists" in every workspace, so `yarn workspaces foreach run` will always execute it in all workspaces (if there is only one version of the script). In contrast, missing scripts without colons are properly ignored.

The issue with implicit global scripts is described in detail in [this feature proposal](https://github.com/yarnpkg/berry/issues/3424).

## Conclusions

-   In Yarn, use colons (`:`) in script names only if you want those scripts to be callable from any workspace.
-   The `yarn workspaces foreach run` command _does_ skip a workspace if the specified script is missing there. Just make sure that the script name does not contain colons.
Watch CSS3 Media Queries in JavaScript
Tags: javascript, css
Published: 2021-09-25 06:57:57

CSS3's [media queries](https://www.w3schools.com/Css/css3_mediaqueries_ex.asp) are an essential element of responsive web design.

Here's a simple media query example that increases the font size on screens with larger widths:

```css
p {
    font-size: 14px;
}
@media screen and (min-width: 768px) {
    p {
        font-size: 18px;
    }
}
```

While media queries provide a handy way for responsively updating CSS values, you might also want to perform certain actions based on the current screen width using JavaScript as well.

This is a snippet that recreates the above CSS example in JavaScript:

```js
const update = (mediaQuery) => 
    !!mediaQuery.matches
        ? document.querySelectorAll(`p`).fontSize = `18px`
        : document.querySelectorAll(`p`).fontSize = `16px`;

const query = window.matchMedia(`screen and (min-width: 768px)`);

update(query);
```

You can also listen for changes to `query`:

```js
query.addListener(update);
```

And you can of course include whatever code you want in the `update` function, and you can pass any other kind of valid media query to it as well. This is just an example.

## Getting the current screen dimensions

If you just want to get the dimensions of the browser window in JavaScript, there is a better way:

```js
const width = window.screen.width;

const height = window.screen.height;
```

The above code will return the integer value of the screen width and height, in pixels. However, the returned values won't automatically update each time the screen is resized.

## Conclusion

Anyway, I hope you found this quick little snippet useful!

It's great for running a function each time the screen is resized, among other things.
Make Todo App with Flutter and Firebase 
Tags: flutter, firebase
Published: 2021-09-26 10:41:11

Hey All,
All four videos of Cloud Firestore CRUD Operation is now uploaded 🥳🥳🥳, find the link below 👇👇👇👇
Link: https://lnkd.in/eXaush4J ( Final CRUD Video)

This playlist will help you to understand the below topics:
📌📌 Google Auth
📌📌 Phone Auth
📌📌 Email Auth
📌📌 CRUD Operation ( Creating a Todo, Reading, Editing and deleting the todo) Along with respective screens
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bdt3wsqnonz6yp71bt5.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu8dj8j3oapzhig5pcy2.png) 

Have a look at the playlist link on the first comment 👇👇👇👇

#flutterdev #flutterappdevelopment #fluttercommunity #flutterapp #flutterdevelopment #flutterdeveloper #flutterdevelopers #firebase #flutterbygoogle