teleren/devto huggingface dataset:
My way of solving a problem
Tags: productivity, programming
Published: 2021-12-04 19:50:22

Since problems are a part of our life, I'm sure everyone has their own way of approaching a problem. This is how my brain deals with my daily developer problems.

First of all, my brain finds out if the problem is lying inside my knowledge domain. Eg: If it is a .NET Core problem, my brain will say, 'You got it, pal'. If it is something outside of my boundaries, my brain will say, 'A couple of google searches will lead you to the solution'. 

Once I'm fed up with the google search, my brain will say, 'Go and find all the possible Github issues and read all comments. and there will be your answer.'  

If there is no clue even after all these suggestions, my brain will awkwardly recommend approaching a peer. And if the solution still remains uncovered, I usually stop listening to my brain and go for a nap. And Voila, there comes my solution. I feel like "Yes! these memes are right. A good nap can bring you solutions.".

And every time I solve a problem, my brain tries to cache it and when similar problems arise, I know where to look.

All these processes might be different for each of us. But never lose hope for a good solution. Patience is a good-to-have personality trait for a Developer.
A chat app inspired by whatsapp
Tags: javascript, vue, programming, webdev
Published: 2021-12-04 19:43:29

- App link: [Chat live-link](https://ecstatic-hugle-48075c.netlify.app/)
- Repo link: [Chat repo](https://github.com/readwarn/single-page-chat-app)
- Stack : MEVN

Hi guys, so yet again, I created a chat app, but this time, the app flow was inspired by WhatsApp. 

Yea, this is the second chat-app project I've created, the first being a [discord-like app](https://calm-meadow-71961.herokuapp.com/login). [Here](https://dev.to/readwarn/a-chat-app-i-made-using-mevn-stack-and-socket-io-2h3a) is article I wrote about it.

So this app basically let user sign up with just a unique username (no password needed). After signup, all new users are automatically added to the chat **welcome channel**. This channel is for new user to introduce themselves and interact with existing users.

Also the app has a **DM feature**, which allows users to chat privately. To initiate the private chat with a user, all you need to do is send them a **friend request**, as soon as they accept the request, you can start to chat with them.

I really don't want to explain how the whole app works or how to navigate through it. I just want to be sure the app is intuitive enough for user to understand and use. 

I will also love to hear your feedbacks and feature suggestions. Thanks

PS: This app was created in less than a day [Vue.js sure makes everything simple]. 

Also I am really really open to a full time role/gig as a Vue.js dev. You can reach me on my email: akinyusuf5@gmail.com
History Of JavaScript
Published: 2021-12-04 19:02:19

JavaScript is the world’s most popular language in the present world. JavaScript is used by 97.6% of all websites, according to W3Techs. There are a lot of giant companies that use this language to make their websites. Such as Google, Facebook, YouTube, Wikipedia, Yahoo!, Amazon, eBay.



What is JavaScript :

JavaScript is a scripting language used to add functionality, create and control dynamic behaviours in the website content. You can also call it the third layer of web technology. Two of which are HTML and CSS, which is helping to make website structure and style, on the other hand, the third is JavaScript which is helping to make your website dynamically update content, control multimedia, animate images etc.

Before coming to NodeJS, considered JavaScript was a client-side language only.



JavaScript’s Origins :

In 1995, JavaScript was invented by Netscape programmer Brandan Eich within 10 days. Netscape Communications Corporation under the name Mocha, then LiveScript, and finally renamed to JavaScript.



JavaScript language is similar to Java and less like Scheme or other extant scripting languages. At the time, the Dot-com Boom had begun and Java was the hot new language. That’s why JavaScript chose the name because of a marketing tactic. On the other hand, the name JavaScript came from Netscape’s support of Java applets within its browser.



ECMAScript :

In November 1996, Netscape announced a meeting of the Ecma International standards organization to advance the standardisation of JavaScript. The first edition of ECMA-262 was adopted by the Ecma General Assembly in June 1997. Between 1997 and 1999, they released another three ECMA versions (ES1, ES2, ES3). In 2008, they released ES4 but ECMAScript 4 was abandoned.

ECMA-262 5th edition was published in 2009 and all major browsers (including Internet Explorer) were fully compliant by July 2013. It was a huge success.



Today’s JavaScript :

From its massive success, it achieved more success day by day and programmers consider it a more popular language in the world. JavaScript has huge community support. There has a lot of frameworks & libraries. Such as Ember, Angular, React, and Vue, Jquery and so on. With that frameworks and libraries, programmers can do their work very easily and in a short time. Not only front-end success but NodeJS manages the server site. So, you can manage a full project in one language. 





#javascript #technology #nodejs #react #html #css #community #success
Living in the Shell #9; find (File/Directory Search) (Part 1)
Tags: productivity, linux, bash, devops
Published: 2021-12-04 18:59:18

## `find` 🔍

Finds files matching given criteria.

## Find by name `-name`/`-iname`

```sh
find /home/babak -name "*bash*"
```

> - Finds all files/directories matching \*bash\* descended from `/home/babak`.
> - Use `-iname` for **case-insensitive** search.

## Find by matching on path `-path`/`-ipath`

```sh
find ~ -path "*/config/*"
```

> - Finds all files/directories that their path string include "/config/".
> - Use `-ipath` for **case-insensitive** search.

## Find by RE pattern `-regex`/`-iregex`

```sh
find ~ -regextype egrep -regex '.*/(conf|config)$'
```

> - Finds all files/directories that their path end with "config" or "conf".
> - Use `-iregex` for **case-insensitive** search.
> - Use `-regextype egrep` if you prefer **`grep` extended RE** format.

## Find files (exclude directories) `-type f`

```sh
find ~ -type f -name "*bash*"
```

## Find directories `-type d`

```sh
find ~ -type d -name "Do*"
```

## Limit recursion depth `-maxdepth`/`-mindepth`

```sh
find ~ -maxdepth 2 -type f -name "*.txt"
```
This week in Flutter #32
Tags: dart, flutter, news
Published: 2021-12-04 18:56:48

Do you also work on a Flutter project with **many screens** and many custom widgets? How do you load a specific screen with specific dependencies when you work on it? How do you provide the screen to your designer for **review** ?

If you felt uncomfortable answering these questions, have a look at [Widgetbook](https://www.widgetbook.io) . You can add it as a development dependency to your project, and then create a **storybook** of all your screens and custom widgets.

If you use proper **dependency injection** , you can have a page for each interesting use case of a given widget. If you don't use proper dependency injection, then there is not much you can do, and you should address that problem first.

\- Michele Volpato

Development 🧑‍💻
-----------------

### 🔗 [Draggable GridView In Flutter](https://medium.flutterdevs.com/draggable-gridview-in-flutter-cd8b45bf2be3)

When you have a grid of widgets of the same type, it might make sense to **drag them around** to, for example, change their order. You can learn how to do that in this article, by [Shaiq khan](https://github.com/ShaiqAhmedkhan) .

### 🔗 [Flutter: Comparing GetIt, Provider and Riverpod](https://blog.gskinner.com/archives/2021/11/flutter-comparing-getit-provider-and-riverpod.html)

Are you in the market for a **state management package** for Flutter? In this article, [Shawn Blais](https://blog.gskinner.com/archives/author/shawnblais) compares three of the most used ones. The most complete one seems to be [Riverpod](https://riverpod.dev) . But many other packages handle state management, so have a look at the full family.

### 🔗 [IgnorePointer & AbsorbPointer In Flutter](https://medium.com/@sonawanedipak111/ignorepointer-absorbpointer-in-flutter-355e8027159c)



[...]

Read the rest on [my website](https://ishouldgotosleep.com/this-week-in-flutter-32/).

[Join the Flutter and Dart newsletter](https://ishouldgotosleep.com/subscribe-to-the-newsletter-devto/) and receive it weekly in your inbox.
How To Use SQLite Database In Laravel?
Tags: laravel, sqlite, database, howto
Published: 2021-12-04 18:25:12

Laravel supports many database connections such as MySQL, PostgreSQL, SQL Server and SQLite. Most of the time we use either MySQL or PostgreSQL. But if we need, we can easily change the default database connection of a Laravel application to SQLite. SQLite is a file based database and it is suitable for small projects. To change the connection, first, open the `.env` file and change the `DB_CONNECTION` to `sqlite`. Comment or completely remove other database configuration lines like this.

```
DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=database
#DB_USERNAME=root
#DB_PASSWORD=
```

Then we need to create a new file called `database.sqlite` in the `database` directory by running the following command.

```
touch database/database.sqlite
```

Now check whether the SQLite database has been successfully detected or not by Laravel. For that, run the `migrate:status` command.

```
php artisan migrate:status
```

If you get a message called “Migration table not found.”, that means Laravel has successfully detected the `database.sqlite` file and you are ready to run the migration. For that, run this `migrate` Artisan command.

```
php artisan migrate
```

If you get the “Database does not exist.” or similar error, try to follow the [How To Fix Laravel SQLite "Database does not exist"](https://devtonight.com/questions/how-to-fix-laravel-sqlite-database-does-not-exist-error) question to fix it. Otherwise, it should create all the necessary tables in the SQLite database.
𝑾𝒉𝒚 𝒍𝒆𝒂𝒓𝒏 𝒎𝒐𝒓𝒆 𝑨𝑾𝑺 𝒂𝒏𝒅 𝒈𝒆𝒕 𝒄𝒆𝒓𝒕𝒊𝒇𝒊𝒆𝒅 ? 
Tags: aws, cloud, architecture, devops
Published: 2021-12-04 18:19:27

Cloud Skills = savings in my bank account : ) 
Thanks to @Piotr1215 for good learning guide for AWS SAA cert exam at https://itnext.io/learning-guide-aws-certified-solutions-architect-associate-ec95d1debba8
"If you look at LinkedIn job postings Worldwide for an Architect role, AWS has 62% of all job postings as of writing the writing of this blog." 

1/ git - https://lnkd.in/g4Syc6Jn
2/ AWS SAA - https://lnkd.in/giDwj5uH
3/ https://lnkd.in/gBBTFheg has Azure and k8s tips too

[simultaneous post at https://www.linkedin.com/posts/walterwlee_awscloud-awscommunity-awscertified-activity-6872961541923311616-jPI0 ]
Builder Pattern
Tags: computerscience, algorithms, beginners, java
Published: 2021-12-04 18:11:52

> Builder pattern separates the construction of complex object from its representation, so that the same construction process can create different representations.

## Motivation

Consider an application which contains a complex object, with many specifications. Some of these specifications are optional and some mandatory. Keeping the different implementations of the construction process within the object will make the it less modular. And adding a new implementation requires change in the existing code-base.

The Builder pattern solves this problem by moving the object construction logic out of the object and into a builder class.

## Applicability

The Builder pattern can be used in cases where:

- Construction of an object must enable different representations of the object
- Telescopic Constructor are to be avoided


## Structure

![Builder pattern class diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85jojouay7j9w10samzj.png)

### Participants
- **Builder:** Abstract interface for creating parts of Product object
- **ConcreteBuilder:** Construct, assemble parts of Product
- **Director:** Construct object using Builder
- **Product:** Representation of the complex object under construction

### Collaborations
- `Director` is configured with a `Builder` object
- One way communication between `Director` and `Builder`.
- `Director` notifies `Builder` which part should be built, then `Builder` handles the request.

## Advantages

- isolates code for construction and representation
- help avoid telescopic constructor
- more control over the construction process

## Disadvantages

- Increased complexity in code due to increase in new interfaces and classes

## Implementation

In most cases one builder instance is enough so builders are implemented as singletons.


## Demo

> There are different variety of cakes served at the cafe. Even though all of them are cakes, they all have different ingredients. The owners want an optimized way of making the cakes, that will save the chef's time and also easily add new cake types to the menu in the future.

To solve this problem, we create a `Cake` class with all the required attributes. Then we create an abstract `CakeBuilder` class, which has abstract methods for building each component of the cake. We then extend this class to make concrete classes for the different variety of cakes. Lastly, we create a `Chef` class that will use one of this concrete classes to make the cake and return the created object.

{% replit @eyuelberga/Builder-Pattern %}
How to prepare for AWS Data Analytics cert exam ?
Tags: aws, cloud, datascience, machinelearning
Published: 2021-12-04 17:38:46

I got some q after I passed it on 11/30. So try to summarize:
1/ take any Data Analytics course from Stéphane Maarek, Frank Kane, John Hanna, Brock Tubre, Stuart Scott in #udemy, #acloudguru , #cloudacadmey, and/or the official course from AWS Skill Builder!

2/ Read AWS official docs, e.g. FAQs and Best practices - I often found some q from FAQs, e.g. https://lnkd.in/gzHZP3r5 If you do not read these, then you are like leaving the money on the table.

3/ Practice More Qs - go read my last post on how to get AWS official practice questions for FREE. You need to be familiar with the format, length, difficulty to pass the exams. 

You also need the master the technique of reading/spotting the KEY words of the q, e.g. the MOST COST EFFICIENT WAY this and that ? The LEAST CODING CHANGE, etc.. ? 

I rem I got a q asking for most cost efficient solution, then need to choose "SINGLE AZ" design because no data traffic cost in single AZ, etc.. But in reality, I never design any single AZ because of (lack of) reliability! 

You can use #tutoraldojo Jon Bonso practice exams and/or those courses from #cloudacademy, #acloudguru (they got hundreds of q and I took them a few times x65 q each to reinforce my memory and learning.

4/ do more hands on labs - I cannot rem well till I try it hands on ! There often some options in the exam non-sense and I often can tell easily from my lab experience.

5/ set a DEADLINE - I accidentally got an exam voucher expired on 11/30, so take the EXAM the VERY LAST day. Otherwise, I will sure take it in Nov 2022 : ) Take the SHOT as in my daily basketball game, if you do NOT TAKE the SHOT, then you will never MAKE it !

6/ Suffer a few hours of LIKELY TEMPORARY BRAIN DAMAGE and Pass the exam and then print it out to hang it on my WALL (Hall) of FAME : )

[ simultaneous post at https://www.linkedin.com/posts/walterwlee_udemy-acloudguru-cloudacadmey-activity-6872951245469024256--Ns9 ]
Power Automate - Setting Modified By of SharePoint List while updating item from flow
Tags: programming, nocode, powerautomate, flow
Published: 2021-12-04 17:36:13

Problem : Suppose we have a power automate / flow that gets triggered when a SharePoint online list gets created / updated and the flow performs some action that updates the list. If we observe the Modified By column of the List, it can be observed that the Modified By column reflects the account/user under which the flow is running rather than the user whose action (create/update) triggered the flow.

We have created a List as displayed below :


![sharepoint online list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwuoebqzt77tir14nj40.png)

We have designed a sample Flow that updates the Email field and corresponding the **Modified By** column also gets updated with the System account under which the flow is running, which in this case is my account.


![power automate flow structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lk8hawuemtx4lxdc3g3.png)

Now to enable the **Modified By** column to show the user name who triggered the flow, we have to make certain changes.

- 
 Use a Compose shape to set the Key for the User Account that triggered the shape as shown in the image below :

```
[{"Key": "i:0#.f|membership|username@yourcompany.com"}]
```


![Setting the Modified By user Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nk0x1x9zepehxe580zf.png)

- 
 Use another Compose shape dependent on the output of the above compose shape to generate the formValues to be used in a a JSON format later.

a.

![Setting Up Modified By](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08nl00esips779lfz883.png)

b.


![Modified By Key Value pair](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fed69tp32r0n04gk6ra.png)

```
[
{
"FieldName" : "Editor"
"FieldValue" : @{concat(outputs('Compose_User_Modified'))}
}
]
```
Finally 

- 
An update item call is made to the SharePoint item in the List, make an additional call to the SharePoint using the shape "**Send an HTTP request to SharePoint**"

This will be POST call where the Body consists of the JSON format.
The formValues shall consist of the Name Value pairs, in our case we are setting the Key as Editor.

Sample format : 
```
{
"formValues": [ 
  { "FieldName": "Title", 
    "FieldValue": "Item" 
	} 
],
"bNewDocumentUpdate": false
}
```

![Send an HTTP request to SharePoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xwmya1lajrb044dgzdr.png)

The flag **bNewDocumentUpdate**  is set as false so as not to create a new version on top of the one created by the flow. The false flag effectively overwrites the entry of the **Modified By** field by the flow with that of the user triggering the flow.


With the above mentioned changes in place we are good to go. Hope this helps in case you need to set the **Modified By** field correctly while updating your share point list.

Reference : [John Liu](http://johnliu.net/blog/2019/2/flowninja-hack-78-modifying-modified-by-and-modified-time-with-microsoft-flow)
Using TailwindCSS with SvelteKit
Tags: svelte, sveltekit, tailwindcss, webdev
Published: 2021-12-04 17:30:00

Setting up SvelteKit with TailwindCSS is now more straightforward than it used to be even a couple of weeks ago. Still, you may look around more than necessary find how to do it, so here is the basic setup.

_Updated 20th Aug 2022 - The original content has been left at the end of the post if you're on earlier versions of SvelteKit_

[SvelteKit docs](https://kit.svelte.dev/docs/introduction#getting-started)
[TailwindCSS docs](https://tailwindcss.com/docs/guides/sveltekit)

**You may also be interested in**

[SvelteKit + .env](https://dev.to/nostro/using-environment-variables-with-sveltekit-544b)
[SvelteKit + Heroku](https://dev.to/nostro/deploying-to-heroku-with-sveltekit-3350)

---
### Updated content
---

#### Create a svelte app

```powershell
npm create svelte@latest my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
```

_Note: Official tailwind docs make you install svelte-preprocess, but at time of writing it's included in the skeleton_


#### Update the config files

``svelte.config.js``
```js
import preprocess from "svelte-preprocess";

const config = {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}
```

`tailwind.config.cjs`
```js
/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};
```

#### Remove boilerplate CSS (if using demo template) or create `app.css` in the `src` root if using skeleton


`app.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

#### Create `./src/routes/+layout.svelte` if using skeleton or check it if using demo template

`+layout.svelte`
```html
<script>
  import "../app.css";
</script>

<slot />
```

---
### Original content
---

#### Create a svelte app

```powershell
npm create svelte@latest my-app
cd my-app
npx svelte-add@latest tailwindcss
npm i
```

#### Remove boilerplate CSS (if using demo template) or create `app.css` if using skeleton

`app.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

#### Using tailwind colors

With the 3.x release, all colors are included. If you want to add your custom ones, or rename the ones that tailwind provides, you can do so in the config file:

`tailwind.config.cjs`
```js
//Add on top
const colors = require('tailwindcss/colors');

//Add in config
colors: {
    white: colors.white,
    black: colors.black,
    red: colors.red,
    orange: colors.orange,
    amber: colors.amber,
    yellow: colors.yellow,
    green: colors.green,
    lime: colors.lime,
    emerald: colors.emerald,
    teal: colors.teal,
    cyan: colors.cyan,
    sky: colors.sky,      
    blue: colors.blue,
    indigo: colors.indigo,
    violet: colors.violet,
    purple: colors.purple,
    fuchsia: colors.fuchsia,
    pink: colors.pink,
    rose: colors.rose,
    gray: colors.gray,
    neutral: colors.neutral,
    stone: colors.stone,
    zinc: colors.zinc,
    slate: colors.slate,
    },
```

And you're good to go.
50% uploaded
Tags: codenewbie, webdev, beginners, blogjourney
Published: 2021-12-04 17:19:18

## The Odin Project: Foundations 
That's right, your girl reached 50% completed on The Odin Project: Foundations Course! Hey it's the little things alright? I am in the CSS portion learning about the box model. I already know, hold on to my bootstraps, it's gonna be a ride. I'm not trying to fly through this thing. I want to be sure I'm retaining the information. Sure I still have to google/check back every now and then but who doesn't? I know WHERE to find what I'm looking for because I remember seeing it and how the syntax goes for the most part. So that's a win in my book. 

## Projects
Yeah I don't really have a one just yet. I have been thinking of some things I'd like to do along with the course's projects. I'd like to do something with Fantasy Football. Like a tracker or ticker that people can use during a live draft. Maybe even have the previous season's player's stats/ADP in there? I'm also open to suggestions people so lay it on me. Gently please, remember I'm still learning what the `padding`, `border` and `margin` is. :) 

Happy coding everyone! I'm about to wrap up studying for the morning and watch some college football with the family. But not before I go check out a few articles on here :)

Mandy B...out ✌🏾
Getting Started With #100DaysofCode.
Tags: beginners, programming, css, 100daysofcode
Published: 2021-12-04 17:16:16

**Who am I?**

Hey there, I am Priyanshu Raj an Aspiring Developer from India and a 3rd year student in Bachelors of Computer Science Engineering. 

**Why am I here?**
I am going to start the 100DaysofCode challenge as way to learn new stuffs and be consistent in learning. I have decided to share whatever I am going to learn in this challenge through dev.io.

**What is 100DaysofCode?**
As the name sounds , it is challenge in which someone starts coding/learning for 100days, started and popular on twitter.

DAY 0:
Starting of with some details about what i am going to learn for now.

- HTML /HTML5
- Basics of CSS
- Some JavaScript also
- Linux (Completely for sure).

Useful links for all the readers:
[100DaysofCode](https://www.100daysofcode.com/)
[MyTwitter](https://twitter.com/itsPriyanshuRaj)