teleren/devto huggingface dataset:
StackTribe is Now Online via all the Social Media Handles Below:
Published: 2022-07-03 23:23:58


![StackTribe Social Medias](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gav6pio9gr9279hdc6dj.png)

> **StackTribe is a community for beginners, intermediates and professionals in the web development world to come together to share, learn and grow.**

**StackTribe… A tribe brought together by stack!**

Follow us now and do remember to subscribe to our YouTube Channel so as to stay updated on everything about Web Development from Front-end to Back-end!

**Facebook:** https://facebook.com/stacktribe

**Instagram:** https://instagram.com/stacktribe

**Twitter:** https://twitter.com/stacktribe

**TikTok:** https://tiktok.com/@stacktribe

**Linkedin:** https://linkedin.com/company/stacktribe

**YouTube:** https://youtube.com/channel/UChf9Ilc5Z0e04malg1FYlEA

*******************************************************************

Thank You!
AngularJS & Django with CSRF_COOKIE_HTTPONLY
Tags: django, angular, security
Published: 2022-07-03 23:06:04

In Django, if CSRF_COOKIE_HTTPONLY is enabled, javascript isn't allowed to access CSRF cookie, so it means they also can't get CSRF token inside the cookies. Here is how I handled Django authorization inside AngularJS.

## Solution
I know developers are busy, so I will put the solution on the top of posts and explain detail after that.

Following [Django document](https://docs.djangoproject.com/en/4.0/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-or-csrf-cookie-httponly-is-true), AngularJS or any javascript could get the CSRF token from the DOM instead of cookie if cookie is http only.

**Step 1**: Put a tag in static html so Django middleware can put token to the HTML DOM.

```html
# Django put CSRF token to DOM
{% csrf_token %}
```

**Step 2**: Implement an interceptor to get CSRF token from the DOM

```javascript
import { Injectable } from '@angular/core';
import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DjangoCSRFInterceptor implements HttpInterceptor {
  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = (
      document.querySelector('[name=csrfmiddlewaretoken]') as HTMLInputElement
    ).value;
    return httpRequest.clone({ headers: httpRequest.headers.set('X-CSRFToken, token) });
  }
}
```
**Step 3**: Put HttpInterceptor to your Angular module providers

```javascript
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: DjangoCSRFInterceptor, multi: true }
]
```

Now your angular code should be able to get CSRF token and put in any request.

## Django CSRF_COOKIE_HTTPONLY
CSRF_COOKIE_HTTPONLY is a flag that enables http only for CSRF cookie. Although http only is a best practice for security, Django foundation points that it doesn't offer any practical protection and encourage developer to turn this flag off.

However, there are many reasons that force us to enable http only with CSRF cookie. One of the reasons in my case is my security auditor report that it is a risk and should be fixed.

## What is Angular HttpInterceptor
In Angular, interceptor allows us to intercept a http request or response. By intercepting request/response, we can modify its context as we want.

Ideally, we can implement an interceptor to add `X-CSRFToken` to headers. And Django will accept this request.

## Conclusion
In conclusion, I would like to note that this post just a note of how I handled the angular request when CSRF_COOKIE_HTTPONLY is enable. In most of situation, we should leave this flag as default value (False). But if you have to enable it, hopefully this post can save your time.

Happy sharing, happy Code with Beer🍺🍺🍺!!!
How to Implement a WFM Tool
Published: 2022-07-03 23:03:39

Introduction: Introduce the concept of WFM tools and what they are used for. A WFM tool is a great way to keep your office organized and efficient. This article will teach you how to implement one in your office.

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

The Types of WFM Tools: There are three main types of WFM tools: scheduling, forecasting, and contact center performance management (CCPM) tools.  Each tool has its own benefits and can be used together or separately to improve the workforce.

Scheduling is used to create shift schedules and approve time-off requests. Scheduling software helps managers optimize staff levels by considering worker availability, skills, and workloads.

Forecasting is used to predict future customer demand and plan for staffing needs. Forecasting software uses historical data to create models that predict future demand.

Contact center performance analytics track agent activity and customer interactions to identify areas for improvement. Analytics software identifies wait times, average handle time, and other key metrics.

How to Choose a WFM Tool: When choosing a WFM tool, there are a few factors to consider. The first factor is the price of the tool. Make sure that you are getting a tool that is affordable for your company. The second factor is the features of the tool. Make sure that it has all of the features that you need. The third factor is the usability of the tool. Make sure that it is easy to use so that you can get the most out of it.

How to Implement a WFM Tool: After selecting a WFM tool, the next step will be [WFM system implementation](https://axsiumgroup.com/glossary/implementation-integration/). Here are a few things to keep in mind during the impementation.

1. Define your goals and objectives. Make sure that everyone involved in the project understands what you are trying to achieve and how the WFM tool will help you meet your goals.

2. Gather your data. The WFM tool will be most effective if it is tailored to your specific needs, so make sure you have accurate data on which to base your decisions.

3. Train your staff. The best way to get the most out of a WFM tool is to train your staff on how to use it correctly. This will ensure that everyone is using the tool effectively and meeting your business objectives.

Common Issues with WFM Tools: Workforce management (WFM) tools offer businesses a range of advantages, such as improved forecasting, optimized staff schedules, and increased efficiencies. However, many companies experience common issues with these tools that can limit their effectiveness. One such issue is inaccurate data entry, which can lead to inaccurate forecasts and schedules. In addition, WFM tools can be difficult to use and require considerable training. They can also be expensive, which can be a challenge for small businesses. Finally, some businesses find that the benefits of WFM tools are not always worth the investment.
SolidJS Intro in 5 minutes (for React Developers)
Published: 2022-07-03 22:48:56

SolidJS is a "new" (5 years old) UI library with an API very similar to React that is gaining more and more popularity on Twitter and GitHub (20k stars), and which, in my opinion, is exactly how React should work:

➡️  no "weird" double renders (see  React.StrictMode)
➡️  no need to manually handle dependencies in (lifecycle) events
➡️  no need to memoize functions to avoid re-renders
➡️  everything is clear as it should

[Watch the second part of this video](https://dev.to/fabiobiondi/solidjs-2-state-management-and-custom-components-1k0e)

--
SOLID WEBSITE
🔗 [solidjs.com](http://www.solidjs.com)

SOURCE CODE:
https://stackblitz.com/edit/vitejs-vite-nfgcpt?file=src%2FApp.jsx 

---
🔗  Follow me on:

➡️   LinkedIn: https://www.linkedin.com/in/fabiobiondi/
➡️   Twitch: https://www.twitch.tv/fabio_biondi
➡️   Facebook (italian): https://www.facebook.com/groups/fabio...
SolidJS #2: state management and custom components
Published: 2022-07-03 22:48:23

In most of modern front end frameworks When our components have a very complex template, a good practice to organize it is to break it down into additional components. 
And SolidJS also works in this way.

But how can we share a state between components? 
There are patterns, state managers and SolidJS offer several interesting tools and APIs to handle the problem.

In this video we will create custom components, we will analyze a couple of patterns to share the state between components and we will refactor the application that was created in the first video about Solid.

Source Code:
https://stackblitz.com/edit/vitejs-vite-ln8znw



🎥 [Watch Part 1: SolidJS Intro in 5 minutes (for React Developers)](https://dev.to/fabiobiondi/solidjs-intro-in-5-minutes-for-react-developers-3dh1)



---
🔗  Follow me on:

➡️   LinkedIn: https://www.linkedin.com/in/fabiobiondi/
➡️   Twitch: https://www.twitch.tv/fabio_biondi
➡️   Facebook (italian): https://www.facebook.com/groups/fabio...
TinyStacks | Made with Next JS
Published: 2022-07-03 22:43:08

![TinyStacks | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1656338567/large_tiny_stacks_made_with_next_js_4ed8ec277e.png "TinyStacks | Made with Javascript | Next JS")


### Code to cloud in minutes

> Build, operate and scale your backend on AWS
> 1. Build prod-ready infrastructure with CI/CD, security, auto-scaling
> 2. Operate with transparency without the weeds
> 3. Scale with stages and ephemeral stacks
> 4. Evolve your architecture with the full cloud catalog


Read More here about TinyStacks and find the link to view the showcased website

[TinyStacks | Made with Javascript | Next JS](https://madewithjavascript.club/posts/tiny-stacks-made-with-next-js)

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [TinyStacks on Twitter](https://twitter.com/withjavascript/status/1543725955151282178?s=20&t=YbPqRFW0sCmQWyValkf2hQ)
 |
| Medium | [TinyStacks on Medium](https://medium.com/@madewithjavascript/tinystacks-made-with-next-js-bb5f211dcab5)
 |
| Facebook | [TinyStacks on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0yQoN21bnn1v2UjLy2mQrBobbfaiPBTS5aVHnbpvze4jVYR8RrYcH1HGVnUUowD5Jl)
 |
| Tumblr | [TinyStacks on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/688796998288211968?source=share)
 |
| LinkedIn | [TinyStacks on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6949491769319276544)
 |
| Pinterest | [TinyStacks on Pinterest](https://pin.it/2MdVhRe)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Introduction to TensorFlow 2
Published: 2022-07-03 21:48:04

## Hello TensorFlow!

### How to import tensorflow.
`# Import TensorFlow
import tensorflow as tf`
# Loading the image
`print('Loading data...\n')
(x_train, y_train), (x_test, y_test) = tf.keras.datasets.mnist.load_data()
print('MNIST dataset loaded.\n')`

# creat the model
`x_train = x_train/255.
model = tf.keras.models.Sequential([
  tf.keras.layers.Flatten(),
  tf.keras.layers.Dense(16, activation='relu'),
  tf.keras.layers.Dense(10, activation='softmax')
])
`
# make compile for the model
`model.compile(optimizer='adam',
              loss='sparse_categorical_crossentropy',
              metrics=['accuracy'])`

## Make Fit foe the model
`print('Training model...\n')
model.fit(x_train, y_train, epochs=3, batch_size=32)
print('Model trained successfully!')`
Learning, Staying Focused, Motivation and Determinance
Tags: programming, productivity, motivation, devjournal
Published: 2022-07-03 21:44:44

Hello my friends. Today i will talk to you about a different subject. It's none other than our mental health of course.

Throughout my dev journey i learned many things, either by trial or recommendation. This one, was mostly trial.

It is very easy for most of us to just lose motivation, or patience at times. And i will try my best to give advice from my experience, that's why i will seperate it into two parts, long-term and short-term.

What do i mean by that? Well, short-term is basically your motivation for that day. And long-term is your general attitude and desire to program things.

I won't talk about them seperately of course, as both is very very tightly coupled to each other, but we need to know the difference to help understand our brain better. Now let's take a look at a couple things that might harm our developer journey.

Most of the times, the reason you stop doing things is simple. You don't do it one day, for any reason, that is important or not. Maybe you just wanted to rest that day. But as soon as you start getting too comfortable, it starts to snowball and gets out of hand very quickly.

And most of the times the reason you don't do it the next day is you just feel bad because of the other day and feel like you've already lost, so might as well just stop another day as well.

Although it is great to take a break sometimes, if we let the feeling of "I can't do this" get to our head, we might stop altogether.

So next time you feel this way, just try to think to yourself: "Oh, i just felt tired the other day, and losing one day of work isn't a big deal". And keep pushing.

And sometimes, you just feel like you understand nothing, and feel like maybe you're not cut out for this job.

But as always, this is most of the times just a trick played to us by the brain. When that happens, take a break, breathe, maybe get yourself a coffee, work a bit on another thing. Don't try to force it again immediately. Come back the next day and try again, and again, and again.

This will surely help you learn whatever you want. Nothing comes in a day. And it never will, you always have to work hard for the things you get as a developer, and you will actually come to like this when your work bears fruits.

Nothing feels better than the moment you say "Oh, i can actually do this!", trust me.


Thank you for reading my article this far! I hope i helped you in any way possible, if you think any part of my recommendations were wrong or possibly harmful, just let me know in the comments!

Have a great day!
Checkout or switch?
Tags: git
Published: 2022-07-03 21:21:22

Switching branches with Git is simple with `git checkout <branchname>`. So what are so what are use cases for `git switch` instead?

As of Git version 2.23, `git switch` along with `git restore`, are here to make use of checkout in non-related ways in order to achieve the same purpose. While `git checkout` is able to perform tasks that involve such as running down to a specific commit on a detached head, switch cannot without specifying the `--detached` flag: `git switch --detached <commit-or-branchname>`.

With `git restore`, many of the same functions can be performed in a similar fashion with flags for given tasks the same as `git checkout` would have done.

The main purpose for `switch` and `restore` to have been created in the first place was to simplify switching to a branch and for restoring/undoing a commit.

According to the source [documentation](https://git-scm.com/docs/git-switch), this is an experimental feature and could be possible that some of it is changed.

Which command should be used? Ideally switch/restore should be used as they perform the same functions as checkout would. Perhaps it depends on what the individual has in mind or what they have gotten used to. Either way, at this time `git checkout` is not slated for deprecation, and there is no warning noting such an action is coming for checkout.

Both switch and checkout will do the same thing, with switch having fewer related options than what checkout will have access to.
Get Lookover
Tags: webdev, css, newcss, newframeworks
Published: 2022-07-03 21:16:00


## Get Lookover
**Get Lookover** is a new open source CSS framework.
We've add some new utilities in **Get Lookover**, and here is the full features:

> `Navigation Bar`, `Containers`, `Colors`, `Jumbotrons`, `Alerts`, `Margin`, `Padding`, `Display`, `Inputs`, `Forms Controls`, `Borders`, `Border's radius`, `Notes`, `Columns`, `Grids`, `Accordions`, `Spacers & Horizontal Lines`, `Tabs`, `Opacity`, `Typography`, `Z-index`, `Icons` 

> N.B: We included [Google Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) for icons

Add **Get Lookover's CSS** link in the `head`  tag :

```

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/get-lookover/cdn@v0.5/css/get-lookover.min.css">

```
To use all **Get Lookover**'s features add jQuery/get-lookover.js at the end of the `body` tag :

```

<!-- jquery.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- get-lookover.js -->
<script src="https://cdn.jsdelivr.net/gh/get-lookover/cdn@v0.5/js/get-lookover.min.js"></script>

```
Here is a simple tutorial to add navigation bar :
```

<!-- Centred Navbar -->

<header class="navbar center-navbar bg-dark">

<h4 class="logo"><b>Brand</b></h4>

<nav class="navbar-nav">

<ul class="navbar-links">

<li class="navbar-items">

<a class="navtab active">Home</a>

</li>

<li class="navbar-items">

<a class="navtab">Download</a>

</li>

<li class="navbar-items">

<a class="navtab">Docs</a>

</li>

<li class="navbar-items">

<a class="navtab">About</a>

</li>

</ul>

</nav>

<span class="navmenu">☰</span>

</header>

```
The following picture showing different navigation bar ( left / center / right )


![Get Lookover Navbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mru540t3w18ggya0hnsa.jpg)

Website : [Get Lookover](https://get-lookover.github.io)

Copyrights &copy; **Get Lookover™**, 2022
Hosting your sinatra backend(API) with heroku
Tags: heroku, ruby, sinatra, api
Published: 2022-07-03 21:10:43

I was recently tasked with a full-stack project that incorporated the use of a react front end and ruby backend. The backend would use Sinatra and active records for migrations, database handling, and endpoint creation. Then host it to get the API to be consumed by our react front-end. The most challenging part of this project was hosting the API and that is what I will talk about today.
[Here's](https://github.com/CKawara/Little-lavender-log-backend) the repository to this project

Assuming that you have your project set up,

**Create Heroku Account**
This is a pretty straightforward process, and can be done [here](https://signup.heroku.com/)

**Create a new app**
 Once the account is set up, proceed to create a new Heroku app. You can do this in many ways, but the easiest is using the GUI. Give the app the name you'd want your API to be called.

**Connect your project to Heroku**
There are various ways to do this, as you can find [here](https://blog.heroku.com/six-strategies-deploy-to-heroku), but for this example, we will use the CLI, for simplicity.

- Install Heroku CLI with `npm install -g heroku`
- Log in to your Heroku account `heroku login
`
-  clone your project's source code to your local machine

```
heroku git:clone -a your-project 
cd your-project
```
- Make some changes to the code you just cloned and deploy them to Heroku using Git.

```
git add .
git commit -am "make it better"
git push heroku master
```
**Configure database**
In your database.yml file, set the adapter to the sql language of your choice. Postgres, sqlite3,MySQL or oracle. note that using sqlite3 will be problematic if you want to use this API in production.
I would suggest using Postgres

**Add Postgres gem to your gem file**
Add this using `gem 'pg'` so it will be included when installing the gems

**Add procfile**
In your file set up, add a file called **_Procfile_** this is in charge of running the entry points in any Heroku web app. In our case, the config.ru

**Add command to profile**
Add this to your profile so that when you push your work to production, it can be executed first.

```
web: bundle exec rackup config.ru -p $PORT
release: bundle exec rake db:migrate
```
the first line will run our config.ru
the second line will run to run migrations and execute the schema.

**Add a Postgres extension on Heroku**

On your Heroku account,

- Go to resources
- Search Postgres, and pick the first suggestion (Heroku Postgres)
- Add extension and submit the order form
This extension will be managing your database in production


And we're done, once all this is set up, push your code to Heroku, check your logs and test out your API.

Till next time, Happy coding ✌
Η δυσκολία ορισμού του σωστού MVP (Minimum Viable Product)
Tags: product, mvp, opinion
Published: 2022-07-03 20:48:50

Σαν προγραμματιστής, όταν βρίσκω ένα πρόβλημα και θέλω να το λύσω, περνάω από μια διαδικασία σκέψης όπου σκέφτομαι την καλύτερη λύση (και ενδιαφέρουσα τεχνικά) και μετά προσπαθώ μέσω αυτής να δημιουργήσω ένα roadmap, μέσω του οποίου θα βγάλω ένα λειτουργικό MVP. 

Αυτό το λάθος το έκανα γιατί σκεφτόμουν το πρόβλημα του hot dog. Ένα hot dog, αποτελείται από ψωμί, λουκάνικο, κρεμμύδια και μουστάρδα. Εάν έχεις ψωμί και λουκάνικο έχεις ένα hot dog, το οποίο είναι λιγότερο νόστιμο, αλλά με ψωμί, κρεμμύδια και μουστάρδα δεν έχεις hot dog!

Η λογική του hot dog, είναι να προτεραιοποίησεις τα features σου με βάση την σημαντικότητα και να μην καθυστερήσεις το προϊόν με δευτερεύοντες δυνατότητες. Παρόλα αυτά, θα πρέπει να γίνει μια σκέψη όπου θα ορίσεις πως θα είναι το προϊόν σου.

Στο βιβλίο [inspired](https://www.goodreads.com/book/show/35249663-inspired) αναφέρει πως ερωτευόμαστε την λύση και όχι το πρόβλημα. Εάν το πρόβλημα μας είναι πως ο χρήστης θα μετακινηθεί από το σημείο Α, στο σημείο Β, οι περισσότεροι πέφτουμε στο λάθος στο να ορίσουμε σαν MVP ένα αυτοκίνητο που δεν θα έχει σασί! 

Σίγουρα κανείς δεν θέλει να οδηγήσει ένα αυτοκίνητο που θα μοιάζει κάπως έτσι, ακόμη και εάν πληροί όλους τους κανόνες του hot dog.

![Αυτοκίνητο χωρίς σασί](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnzj7gvgo6j9k5z2urtt.png)
 
Το MVP μας θα έπρεπε να οριστεί σαν ένα πατίνι!

![Patini](https://media.giphy.com/media/Plb5ZJF15CLHq/giphy.gif)

Είναι πιο οικονομικό, ευέλτικο, γρήγορο στην κατασκευή λύνει το πρόβλημα της μετακίνησης των χρηστών, ίσως να φαίνεται cool και είναι ένα ολοκληρωμένο προϊόν!

Μετά αφού ορίσουμε ότι το σωστό MVP που λύνει το πρόβλημα των χρηστών είναι το πατίνι, τότε θα σκεφτούμε εάν αξίζει να αργήσουμε να βγάλουμε το προϊόν για να βάλουμε ένα κοντέρ που να δείχνει στον χρήστη τα χιλιόμετρα.

## Λόγοι που ίσως πέφτουμε στην παγίδα αυτή

- Η ματαιοδοξία να γίνουμε οι επόμενοι που δημιουργούν αυτοκίνητα, ενώ οι χρήστες ζητάνε γρηγορότερα άλογα.

- Η τεχνική πρόκληση του να λύσεις ένα πιο δύσκολο πρόβλημα, από ότι χρειάζεται.

- Όταν μπερδεύουμε το όραμα και την ιδέα, με το MVP. Μπορεί, το όραμα να είναι να δημιουργήσουμε το γρηγορότερο αυτοκίνητο, παρόλα αυτά, πρέπει όσο πιο γρήγορα γίνεται να επιλύσουμε το πρόβλημα των χρηστών.