teleren/devto huggingface dataset:
How to Solve it
Tags: books
Published: 2022-08-10 00:41:00

I have always wanted to become better at problem-solving, but I never had a concrete plan on how I could be better. 

I came across "How to Solve It" by G. Polya, written in 1945 by a mathematician who gave 4 simple steps to solve any type of problem.

## 1. Understand the problem

This step seems so trivial, but it is also easy to neglect the importance of it because it is trivial. I personally have tried to solve problems without fully understanding them. I wasted many hours developing a solution that did not solve the initial problem, or missed an easier way to solve the problem.

To make sure you understand the problems, ask yourself:

- Do you understand all the words in the problem?

- Can you restate the problem?

- Can you visualize the problem?

- What is the unknown?

- What is known?

- What is the connection between the known and the unknown?

## 2. Devise a plan

When we understand the problem, we need to come up with a plan to find the unknown. This step may take a long time!

To come up with a plan, ask yourself:

- Do you know a related problem? Can you use it?

- Can you solve a related or smaller problem?

## 3. Carry out the plan

Carrying out the plan is much easier than devising a plan. 

While carrying out your plan, you should check each step. If the plan does not work, go back to devising a plan.

## 4. Look back

After you have solved the problem, it is important to look back and examine the solution. 

Ask yourself:

- Can you check the result?

- Can you derive the solution differently?

- Can you use the solution for some other problem?

## Conclusion

Even though the steps are somewhat obvious, we often neglect these steps. I have known these steps for a while now, but I still don't spend enough time on the first two steps, just out of laziness or impatience. But in the end, lack of planning almost always leads to disaster. Follow these steps and focus on the first two steps to become better at problem solving.
I founded ITAMAESAN org with SushiJS project! 🎉
Published: 2022-08-10 00:38:21

[ITAMAESAN](https://itamaesan.org) or [SushiJS](https://sushijs.org) Support us on [Twitter](https://twitter.com/itamaesanorg)

Itamaesan Org is a TypeScript and Javascript foundation to freely code with MIT License, with SushiJS framework.

# SushiJS

SushiJS is a Typescript, NextJS, TailwindCSS and Motion Framer project to help developers build great tools!
 
 ✨  We are proud to announce, ITAMAESAN, a project to help developers, exclusive working with Open Source MIT License on our code.
 
 ✨ ITAMAESANは、オープンソースのMITライセンスで開発する開発者を支援するプロジェクトです。


# Project Organizer

- [Features](#features)
- [Project structure](#project-structure)
- [Getting started](#getting-started)
- [License](#license)
- [We run on](#we-run-on)


## Features

    ✨ Typescript
    📘 NextJS
    🌗 CSS
    😶‍🌫️ Framer Motion
    🦄 Favicons
    📱 Responsive Nav
    🍱 Easy, git clone & npm install/run
    🎉 Folder organized structure


## Project Structure

    🍣 SushiJS
    ├──⚖️ LICENSE
    ├──👩‍⚖️ Code_of_Conduct.md
    ├──🍱 components
    │   ├──🥡 BigText
    │   │   ├──🔵 BigText.tsx
    │   │   └──🟦 index.ts
    │   ├──🥡 Container
    │   │   ├──🔵 Container.tsx
    │   │   └──🟦 index.ts
    │   └──🥡 Footer
    │       ├──🔵 Footer.tsx
    │       └──🟦 index.ts
    ├──🍱 lib
    │   └──🟦 classNames.ts
    ├──🟦 next-env.d.ts
    ├──🟡 next.config.js
    ├──🟨 package-lock.json
    ├──🟨 package.json
    ├──🍱 pages
    │   ├──🔵 404.tsx
    │   ├──🔵 _app.tsx
    │   ├──🔵 _document.tsx
    │   ├──🥡 api
    │   │   └──🟦 hello.ts
    │   └──🔵 index.tsx
    ├──🟡 postcss.config.js
    ├──🍱 public
    │   ├──🥡 fonts
    │   │   └──🅰️ inter-var-latin.woff2
    │   ├──🤖 robots.txt
    │   └──🥡 static
    │       └──🧃 favicons
    │           ├──🎆 SushiJS-icon - Copy.png
    │           ├──🎆 SushiJS-icon.png
    │           ├──🎆 android-chrome-192x192.png
    │           ├──🎆 android-chrome-512x512.png
    │           ├──🎆 apple-touch-icon.png
    │           ├──🐘 browserconfig.xml
    │           ├──🎆 favicon-16x16.png
    │           ├──🎆 favicon-32x32.png
    │           ├──⭐️ favicon.ico
    │           ├──🎆 favicon.png
    │           ├──🎆 icon-192.png
    │           ├──🎆 icon-512.png
    │           ├──🎆 mstile-270x270.png
    │           ├──🎇 safari-pinned-tab.svg
    │           └──🟡 site.webmanifest
    ├──🍱 styles
    │   └──#️⃣ globals.css
    ├──🟡 tailwind.config.js
    ├──🟦 tsconfig.json
    ├──🟨 vercel.json
    └──🟦 yarn.lock


## Getting started
 
    ⬇️ git clone https://github.com/itamaesanorg/SushiJS.git
    🔄 npm install
    ➡️ npm run dev
    ✨ Enjoy


## Getting started

    🐣 Twitter: https://twitter.com/itamaesanorg
    🌐 Homepage: https://itamaesan.org redirects to https://SushiJS.com


## License

    ⚖️ MIT at: https://github.com/itamaesanorg/SushiJS/blob/main/LICENSE


## We run on
    Vercel 🍣 Thanks Vercel if you read that!
New Video: Coding Shorts - Output Caching in ASP.NET Core 7
Published: 2022-08-14 23:02:01

---
title: New Video: Coding Shorts - Output Caching in ASP.NET Core 7
published: True
date: 2022-08-10 00:00:00 UTC
tags: 
canonical_url: https://wildermuth.com/2022/08/10/coding-shorts-output-caching-asp-net-core/
cover_image: https://wilderminds.blob.core.windows.net/img/2022/08/10/cover.jpg
---

In continuing my discussion of middleware in my Coding Shorts videos, I have a new one that talks about a change to .NET 7 that brings back Output Caching. If you didn’t see that overview of middleware, you can see it here: [How ASP.NET Core Middleware Works](https://wildermuth.com/2022/07/17/coding-shorts-asp-net-core-middleware-explained/). If you didn’t use Output Caching in [ASP.NET](http://asp.net/), you should definitely take a look and prepare to use it in your [ASP.NET](http://asp.net/) Core apps:

<iframe src="https://www.youtube.com/embed/kReNMzHj6ro" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

> [Subscribe to my YouTube Channel](https://shawnl.ink/yt)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
Cross-site Scripting (XSS) and ways to prevent it in PHP applications
Tags: php, webdev, programming, security
Published: 2022-08-09 23:37:00


Web application security is a key component of any web-based application. 
Due to security flaws in web browsers, XSS was first known as cross-site. If you had the windows for both sites active in your browser, you could use XSS to move information/data from one site to the other.
In this post, I will walk you through the details about the XSS and how you can prevent  XSS attacks on your PHP web app.
## **Cross-Site Scripting (XSS)**
**What is XSS?**
It is the unintended execution of remote code by a web client. An attacker can use XSS to send a malicious script to an unsuspecting user.
Any web application might expose itself to XSS if it takes input from a user and outputs it directly on a web page.

**How do XSS Occur**
XSS is typically added using a web form or hyperlink on a webpage. Any client-side language, including JavaScript, PHP, HTML, and VBScript, can use this code.

Data inputs coming from a client should never be trusted. GET, POST, and COOKIE values can be anything at all, and should therefore be validated before outputting them.
PHP provides a few ways to do this.

## 1️⃣HTML Encoding:
PHP htmlspecialchars function will convert any HTML special characters into their HTML encodings, meaning they will then not be processed as standard HTML
**SYNTHAX**
```php
<?php
 // GET
 $input = htmlspecialchars($_GET['input']);
 // POST
 $input = htmlspecialchars($_POST['input'])
?>
```
## 2️⃣URL Encoding:
When outputting a dynamically generated URL, PHP provides the urlencode function to safely output validated or sanitized URLs.
SYNTHAX
```php
<?php
 $input = urlencode($_GET['input']);
?>
```
Any malicious input will be converted to an encoded URL parameter.

## 3️⃣THIRD PARTY PHP LIBRARIES:
There are several third party PHP libraries which are commonly used to assist in XSS prevention. 
Examples👇
HTML Purifier – <a href="http://htmlpurifier.org">here</a>
PHP Anti-XSS – <a href="https://code.google.com/p/php-antixss/">here</a>
htmLawed – <a href="http://bioinformatics.org/phplabware/internal_utilities/htmLawed/">here</a>

## 🗝Using PHP Filter Functions.
This function Sanitizes or Validates data sent to the PHP script in many ways.

## Note✍
The PHP STRIP_TAGS() should NOT be used exclusively for sanitizing data. strip_tags() removes content between HTML tags and cannot prevent XSS instances that exist within HTML entity attributes. strip_tags() also does not filter or encode non-paired closing angle brackets.

## Conclusion
Cross-Site Scripting is a versatile attack. It could be used to steal highly sensitive data, including user credentials, cookies, and data that has economic value.

What other ways can we prevent XSS. Kindly Share your ideas in the comments below👇

You can support me to keep writing more for you🚀❤
<a href='https://www.buymeacoffee.com/qbentil' target="_blank">
![buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf2285oqld8zpevvsqvt.png)
</a>
Create a Theme variant for your configurable Workspace
Tags: servicenow, uibuilder, workspace
Published: 2022-08-09 19:34:00

The following tutorial should help you create your own theme variant that is used for your hole instance including your configurable workspace.

If we go in the UI Builder to the experience settings and then to Branding and theming we can see that the Polaris theme is locked in and can't be changed.

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

There is two approaches. We could create our own Theme and then create a sys_property called 'glide.ui.polaris.theme.custom' and add the sysId of the theme or just add a variant to our polaris theme (I'm creating a variant in this example).

To generate a full color theme, I'm using the color generator here: https://theme.deoprototypes.com/color-generator-p/
Click on the 'Auto Generate' button on the top right and add three color as brand neutral, primary and secondary.

If you generated your color theme, you can copy the JSON with the button 'copy JSON' on the top right. There is also a 'Dark' toggle if you fancy a dark theme.

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

If you want to create a Variant to the polaris Theme:

1. Go to the table 'sys_ux_style'
2. Add a new record with type 'Variant'
3. Use the following structure:

```JSON
{
    "properties": Here you can copy the JSON from the color generator
}
```
4. Copy the JSON in to the structure
5. Add in the related List 'UX Theme Styles' your variant to the polaris Theme.

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

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

Now you can select your variant via the user preferences --> Theme

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

If you want to add a logo to your theme variant you need to add a UX Style Asset (related list). In the Asset reference field, you need to add a new UX theme asset with the category 'image'. The logo you can just add as an attachment to that record. Important, in the UX Style asset 'Asset Properties' field you need to add following JSON:
{ "position": "header_logo" }

Thats all there is, have fun! :)
Check user's permissions on file/dir in Nodejs
Tags: node, nodejstip, javascript
Published: 2022-08-09 23:11:34

The 𝗳𝘀𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀.𝗮𝗰𝗰𝗲𝘀𝘀 method tests a user's permissions for the file or directory specified by path.

This is the recommended method by 𝗡𝗼𝗱𝗲𝗷𝘀 and the replacement of 𝗳𝘀.𝗲𝘅𝗶𝘀𝘁𝘀, as it was deprecated.

Also it's usually not a good idea to use the sync version 𝗳𝘀.𝗲𝘅𝗶𝘀𝘁𝘀𝗦𝘆𝗻𝗰 since it blocks the main thread.

It's better than 𝗳𝘀.𝗲𝘅𝗶𝘀𝘁𝘀 as you can see; promisified and provides more modes than just checking if the file exists.

I enjoyed learning about this method, hopefully you did too!

----------------------

Did you learn something new today?

Like and share this post, and follow me for more!

![access method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qpu1otwx61g1t0qr61e.png)
Day 122: Searching page
Published: 2022-08-09 22:42:45

Hi!
Today I was working on the searching feature which was my first time implementing such feature in React but it ended up going well and I learned about working with regular expression which also seems to be challenging and is a concept I always want to make an article about actually I may do soon.
Today I also got a chance to help someone with a Photoshop project which is something I haven't done for quite some time so it's good to get back to it as well. 
Tomorrow  I will get back to the search feature and add some of the remaining logic to the page it is supposed to be finished by tomorrow. I didn't get time for Flutter today hopefully I will tomorrow.

Signing offf....
Table Demo in CSS
Tags: codepen, css, webdev, codenewbie
Published: 2022-08-09 22:27:13

## Day 4 of 100 Days Of Code
Continued to complete the components section of jonas schmedtmann's course on Udemy and built a Table Demo in Pure CSS.

---
 For more such content , follow me on Twitter and Dev.to

{% codepen https://codepen.io/mustafahashmani/pen/zYWLZra %}
Day 610 : The Magic Number
Tags: hiphop, code, coding, lifelongdev
Published: 2022-08-09 22:15:47

_liner notes_:
- Professional : Not a bad day. Helped out with a community question. Did a quick meeting with a team member to help them out. Did some coding on a demo project. Worked on booking a hotel and flights for my trip to Korea. A lot of different configurations to consider. Called the South Korean embassy to make sure I didn't have to do anything extra since I was arriving from Japan and not the US. I had to call 3 different embassies because at one, the person wasn't there and another I spoke with someone but they transferred me to an answering machine where the person only spoke Korean. haha I guess three was the magic number. I spoke with a very nice person that answered my questions. I don't need to do anything special. Cool

- Personal : So, last night, I worked on adding the feature to my travel site. Got the data to load in the dashboard where I can toggle where it should show up on the site. Then I coded the front end to display the approved data on a map and in a list. I think I went through some tracks for the radio show. I don't really remember. haha.


![Pink sky above clouds at are above Above Žalý, Czechia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbhvg541b82myikafk3p.jpg)

To finish up with my travel site, I thought about adding a page that lists all the different suggestion maps in one place so I can just use that to link to in social media. Going to work on that and if I can get it done tonight, I'll start adding my upcoming trips so I can share it one social media tomorrow. I'll probably make an image so I can share to Instagram. Hopefully I will get a chance to study some Japanese.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube v3y_f7g6N0c %}
How to create an AI powered chatbot using NextJS & OpenAI API ?
Tags: javascript, webdev, nextjs, ai
Published: 2022-08-09 22:12:10

Building an application that allows you and your users to discuss with an artificial intelligence has never been easier !

Through this very short tutorial, you will have your own AI powered website like this:


![Screenshot of the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i3eitoxishungy5qbl1.png)

## Get your OpenAI API key

Assuming you have the beta access to OpenAI, visit [this page](https://beta.openai.com/account/api-keys) to get your key. It will be useful for the next part.

## Setting up the project

### Get the template

**Source code here : [Github Repo (OpenSource)](https://github.com/YacineMessaadi/nextjs-openai).**

Clone the repo and go to the *.env.example* file to put your OpenAI API key.

Then, rename the file by removing the *.example* part.

### Try it out !

Start your server by writing the command below and open your browser to [localhost](http://localhost:3000) .

```bash
npm install
npm run dev
```

### The end

Thanks for reading this article, share it and follow me if you found it interesting !
If you have any question, feel free to contact me or comment the post.
Visit my [blog](https://www.yacine-messaadi.com/) !
BUNDLE_ONLY is now available
Tags: ruby
Published: 2022-08-09 22:05:53

---
title: BUNDLE_ONLY is now available
published: true
tags: 
  - ruby
---

I recently added `BUNDLE_ONLY` option to [Bundler](https://bundler.io/).

This is the long-awaited feature from 8+ years ago that allows you to install only the gem groups you need, available from bundler 2.3.19.

- https://github.com/rubygems/bundler-features/issues/59
- https://github.com/rubygems/bundler/pull/4907
- https://github.com/rubygems/rubygems/issues/4048
- https://github.com/rubygems/rubygems/pull/5759

For example, in our Rails app, we have a crazy number of gem groups (terrible I know). There is a workflow to run RuboCop with GitHub Actions, but this workflow only requires the gems in the rubocop gem group to be installed.

```diff
# .github/workflows/rubocop.yml
 env:
-  BUNDLE_WITHOUT: >
-    danger
-    default
-    development
-    feature1
-    feature2
-    feature3
-    feature4
-    feature5
-    feature6
-    feature7
-    mobile
-    production
-    qa
-    staging1
-    staging2
-    staging3
-    test
+  BUNDLE_ONLY: rubocop
```

Previously, it was necessary to use `BUNDLE_WITHOUT` to exclude unwanted gem groups one by one, but now `BUNDLE_ONLY` allows us to write this way :smiley:
Rust & Cross-compiling from Linux to Mac on GitHub Actions
Tags: rust, linux, programming, devops
Published: 2022-08-09 21:52:12

## Introduction

So you have a binary that you wish to distribute but you are only able to compile for Windows and Linux at the moment. You have spent hours if not days googling for the appropriate way to cross-compile from Linux to Mac... Well, I am here to tell you I have been there and now provide an easy solution!

## The Sauce

### Basic Usage


```yml
# Setup Rust, use the x86_64-apple-darwin target but the rest can be customized.
- uses: ATiltedTree/setup-rust@v1
  with:
    targets: x86_64-apple-darwin
    rust-version: nightly # Works both with 'stable' and 'nightly'

# Use the v1 of this action
- uses: mbround18/setup-osxcross@v1
  # This builds executables & sets env variables for rust to consume.
  with:
    osx-version: "12.3"

# Checkout your code
- name: Clone your Code
  uses: actions/checkout@v3

# Build your code for apple-darwin based release
- name: Build Your Code
  run: cargo build --release --target x86_64-apple-darwin
```

### Explanation of its Functionality

1. It creates a folder called `osxcross` in the github actions working directory. (to avoid interference with any files you might be operating with)
2. [Clones the `osxcross` repository](https://github.com/tpoechtrager/osxcross)
3. [It downloads the SDK matching the version you specified from @joseluisq/macosx-sdks](https://github.com/joseluisq/macosx-sdks)
4. Checks cache
5. Builds if cache wasn't hit
6. Sets environment variables for build target `x86_64-apple-darwin`

## Shoutouts & Thanks yous

- [Thank you James Waples for writing the cross compilation article](https://wapl.es/rust/2019/02/17/rust-cross-compile-linux-to-macos.html)
- [Thank you osxcross for creating the path forward](https://github.com/tpoechtrager/osxcross)
- [Thank you joseluisq for packaging the SDKs](https://github.com/joseluisq/macosx-sdks)
React + Moralis templates
Tags: web3, react, nextjs, moralis
Published: 2022-08-09 21:48:07

After a couple of weeks of trying to find a solution to prompt the user to change networks if they are in the wrong one, I finally found the solution while scrolling trough the docs and made a light-weight template for any case escenario

They are all in an account I specially use to store templates, so feel free to follow my main account or contribute whit things you thing are missing!


**React + Moralis**
- https://github.com/Hachikoi-Marine/React-Moralis-Template.git

**React + Router-dom + Moralis**
- https://github.com/Hachikoi-Marine/React-router-Moralis-template.git

**Next + Moralis**
- https://github.com/Hachikoi-Marine/Nextjs-Moralis-Template.git
Leetcode 713. Subarray Product Less Than K
Published: 2022-08-09 21:26:57


![Leetcode 713. Subarray Product Less Than K](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trpw7m0833wmd1in89g1.png)Given an array of integers nums and an integer k, return the number of contiguous subarrays where the product of all the elements in the subarray is strictly less than k.

**Example 1**
```
Input: nums = [10,5,2,6], k = 100
Output: 8
Explanation: The 8 subarrays that have product less than 100 are:
[10], [5], [2], [6], [10, 5], [5, 2], [2, 6], [5, 2, 6]
Note that [10, 5, 2] is not included as the product of 100 is not strictly less than k.
```
**Example 2**
```
Input: nums = [1,2,3], k = 0
Output: 0
``` 

**Constraints**
```
1 <= nums.length <= 3 * 104
1 <= nums[i] <= 1000
0 <= k <= 106
```

**Editorial**

The simplest way to think of this problem is taking cumulative product from an index up to the end of the array. Then check if any of those `products < k` or not. We will have to do this for each index. Then, for any subarray `product < k`, we can count the number of subarrays and find the result by adding up those counts.

But this approach will cost us O(N2) [O N square] runtime which is not efficient and we don't want that! So, let's not waste time on it. The better approach to solve this problem is to [.... read more](https://foolishhungry.com/subarray-product-less-than-k/) 

Editorial source: [foolishhungry blog](https://foolishhungry.com)
The most important code smells every developer has to know
Tags: programming, cleancode, refactorit, tutorial
Published: 2022-08-09 19:30:00

In a previous [post](https://dev.to/dadyasasha/how-to-tell-if-the-code-is-clean-2ndh) we have discussed why "clean code" is so intangible and subjective phenomenon.

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

We also mentioned that many common "code smells" are usually heuristics and not hard tests.

Are there any objective ways to differentiate good and bad code? Luckily, some of the original "code smells" are quite objective and hard to argue with. For example:
👉 Mysterious Name: functions, modules, variables or classes that are named in a way that does not communicate what they do or how to use them.
👉 Cyclomatic complexity: too many branches or loops; this may indicate a function needs to be broken up into smaller functions, or that it has potential for simplification/refactoring.
 👉Data clump: Occurs when a group of variables are passed around together in various parts of the program. In general, this suggests that it would be more appropriate to formally group the different variables together into a single object, and pass around only the new object instead.
 👉 Too many parameters: a long list of parameters is hard to read, and makes calling and testing the function complicated. It may indicate that the purpose of the function is ill-conceived and that the code should be refactored so responsibility is assigned in a more clean-cut way.
 👉 Long method: a method, function, or procedure that has grown too large.

In the following posts I will explore every one of them, so don't forget to click "follow" button to not miss out!