teleren/devto huggingface dataset:
My First Blog (Kinda)
Published: 2021-11-12 15:18:18

# Hello World,

I am *Surya Vamsi*. I work as a Software Developer (Contingent) at an IB. I always wanted to write blogs but never had enough motivation for it. But today, I have finally made up my mind and I am writing my first ever blog but it technically is not. I did write a blog on blogger but that was just something I cooked up using the art of copy-paste. 

There was another hurdle when I wanted to write a blog. I didn't know what to write. But now, I have decided to write whatever I want. But it's going to be mostly related to tech. 

Well, I am running out of words to write. So, I guess I will just end it here. I hope I will be able to write more in the coming days.

You can follow me on GitHub, LinkedIn or any of the social medias which I may have added to my profile.  Do leave some comments or suggestions if you have any.

**See ya**
React: Introducing Inline StylesPassed
Tags: javascript, beginners, react, webdev
Published: 2021-11-12 15:07:48

* Alrighty now, this lesson talks about styling your text/JSX elements.
* If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the `className` attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
* JSX elements use the `style` attribute, but  you can't set the value to a string. Instead, you set it equal to a JavaScript object. 

* Ex:
```React
class ColorFul extends React.Component {
  render() {
    return (
      <div style={{color: "black", fontSize: 17}}>PlayStation</div>
    );
  }
};
```
* We camelCase the fontSize. This is because React will not accept kebab-case keys in the style object.
The next-generation headless content platform for the digital-first era
Tags: webdev, opensource, css, wordpress
Published: 2021-11-12 15:02:19

A headless content management system enables the delivery of omnichannel digital experiences.

Through Contentful API-first CMS and Contentful app framework, our goal is to give you complete programmatic control over your custom content. With Contentful management, your CMS stays in one place, even if you completely revamp your website.

When customer engagement happens through multiple channels, legacy CMS cannot work as they are channel specific. We [implement Contentful](https://www.softwebsolutions.com/contentful-development-services.html) to take you from content silos to omnichannel CX activities.
Making the most boring website ever with TypeScript, NestJs, React and others. Part 8. 
Tags: react, typescript, node, webdev
Published: 2021-11-12 15:01:19

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

In this videos we'll create a User model to store users data on the server and discuss why we need password hashing and salt. We'll also add new forms and pages to manage users in the Admin panel.

Enjoy :)

{% youtube Svblmsp0Hn4 %}
React: Optimizing Re-Renders with shouldComponentUpdate
Tags: javascript, react, devops, beginners
Published: 2021-11-12 14:59:27

* FreeCodeCamp states that if any component receives new `state` or new `props`, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new `state` or `props`, and declare specifically if the components should update or not. The method is `shouldComponentUpdate()`, and it takes `nextProps` and `nextState` as parameters.

* You can use `shouldComponentUpdate()` to prevent this by comparing the props. The method must return a boolean value that tells React whether or not to update the component. 

* Code:
```React
class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
    // Change code below this line
    return true;
    // Change code above this line
  }
  componentDidUpdate() {
    console.log('Component re-rendered.');
  }
  render() {
    return <h1>{this.props.value}</h1>;
  }
}

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
    this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState(state => ({
      value: state.value + 1
    }));
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value} />
      </div>
    );
  }
}
```


* Answer:
```React
class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
    // Change code below this line
    if (nextProps.value % 2 === 0) {
      return true
    } else {
      return false;
    }
    // Change code above this line
  }
 ```
* You click the `Add` button and watch the order of events in your browser's console as the lifecycle hooks are triggered.
Leveling Up Weekly: Ruby on Rails - Issue #3

Tags: ruby, rails, webdev
Published: 2021-11-12 14:55:41

Hey everyone, I just released the third issue of my weekly newsletter, "Leveling Up Weekly: Ruby on Rails" - a curated Rails and Ruby focused newsletter targeted for junior to mid-level Rails developers.

The subscriber list is growing, but I have not received much feedback on it, so if you have any comments or suggestions, I'd love to hear it!

https://www.getrevue.co/profile/levelingupweekly/issues/leveling-up-weekly-ruby-on-rails-issue-3-864964
DjangoのClass-Based Viewで権限確認を行う
Tags: django, python
Published: 2021-11-12 14:55:22

DjangoでClass-Based ViewによるDetailView等を実装している際に、そのViewへのアクセスの可否をカスタムで確認したい場合があると思います。
例えば下記の様なモデルのDetailViewにおいて、各ユーザー自分のデータしか見れないようにする、などと言った場面です。

```
class Memo(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
```
```
path('memo/<int:pk>', views.MemoDetailView.as_view(),
         name='memo_detail'),
```
```
class MemoDetailView(DetailView):
    model = models.Memo
```

このままだと memo/2 のような適当な URL を入れることで誰でも閲覧可能になってしまいます。これを自分の Memo しか見れないようにします。

このような場面のためにテスト用のclassが用意されています。

- class UserPassesTestMixin
https://docs.djangoproject.com/ja/3.2/topics/auth/default/#django.contrib.auth.mixins.UserPassesTestMixin

test_func で OK/NG を Bool で返せば良いので、今回の場合だと下記のようなclassを作成し

```
class ObjectOwnerCheckMixin(UserPassesTestMixin):
    def test_func(self):
        login_user = self.request.user
        object_owner = self.get_object().user
        return login_user == object_owner
```
View側ではそれを継承すればOKです。
```
class MemoDetailView(ObjectOwnerCheckMixin,DetailView):
    model = models.Memo
```
Make your Windows 10 look like MacOS.
Tags: windows, macos
Published: 2021-11-12 14:51:36

> This process is safe without any Rainmaker,winToPc, etc and No harmfull softwares.

-> Theses softwares you want to install :

- TaskbarX : https://github.com/ChrisAnd1998/TaskbarX

- (optional) GroupedTaskbar:https://github.com/tjackenpacken/taskbar-groups

- WinDynamicDesktop : [https://www.microsoft.com/en-in/p/windynamicdesktop](https://www.microsoft.com/en-in/p/windynamicdesktop/9nm8n7dq3z5f?cid=storebadge&ocid=badge&rtc=1#activetab=pivot:overviewtab)

- PowerToys: https://github.com/microsoft/PowerToys

- QuickLook: [https://www.microsoft.com/en-in/p/quicklook](https://www.microsoft.com/en-in/p/quicklook/9nv4bs3l1h4s?ocid=badge&rtc=1&activetab=pivot:overviewtab)

- ModernFlyouts:https://modernflyouts-community.github.io

- Windows Terminal: [(https://www.microsoft.com/en-in/p/windows-terminal](https://www.microsoft.com/en-in/p/windows-terminal/9n0dx20hk701?rtc=1&activetab=pivot:overviewtab)

- 7-Zip: https://www.7-zip.org/download.html

## Download WinMac Cursor
WinMac Cursor made by Junaid.It is combined Cursors of macOS and Windows 11.

[WinMac github repo](https://github.com/junaidcodingmaster/DevTheme/tree/main/Cursors/WinMac#winmac)

---

[win10LikeMacOS github repo](https://github.com/junaidcodingmaster/DevTheme/tree/main/win10LikeMacOS#make-your-windows-10-look-like-macos)

---

_It is Safe , No harm to your computer._

*Written By* ***Junaid*** .
What is hoisting javascript ?
Tags: beginners, javascript
Published: 2021-11-12 14:46:26

Short answer: Hoisting is javascript behaviour that move declaration to the top

```js
yourName="Jiwoo";
console.log(yourName);
var yourName;
```

What really happen here is during compile phase, javascript will put the variables declaration into memory, visually similar like this:

```js
var yourName;
yourName="Jiwoo";
console.log(yourName);
```

Okay then let's try another example

```js
number1 = 3;
console.log('number 1', number1);
console.log('number 2', number2);
console.log('number 3', number3);
var number2 = 3;


// output
// number 1 3
// number 2 undefined
// Uncaught ReferenceError: number3 is not defined
   
```

What the heck is going on here?, okay let's break it down

Since there is no declaration and initialisation for `variable3` it's make sense when the result `Uncaught ReferenceError: number3 is not defined`

We didn't make any variable declaration for `number1`, but why it's give correct answer?, it's because javascript "magically" create a declaration for `number1` variable and move it to the top. In simple term javascript saying "Hey you're initialize  `number1` with value `3` but you're not making any declaration, okay lazybones I will do it for you huufh 😩"

`number2` are the most confusing, you already initialize and declare your variable but why it's give you `undefined`?, Remember that hoisting only move declaration?, it's mean that javascript only move `number2` declaration to the top and because initialization happen after `console.log` it will give you `undefined` as result
React: Add Event Listeners
Tags: javascript, react, devops, beginners
Published: 2021-11-12 14:43:35

* FreeCodeCamp says that the `componentDidMount()` method is also the best place to attach any event listeners you need to add for specific functionality. In which React provides a synthetic event system which wraps the native event system present in browsers. 
* We've already been using some of these synthetic event handlers such as `onClick()`. But, if you want to attach an event handler to the document or window objects, you have to do this directly.

* Today we have to add an event listener in the `componentDidMount()` method for `keydown` events and have these events trigger the callback `handleKeyPress()`. We can use the `document.addEventListener()` which takes the vent (in quotes) as the first argument and the callback as the second argument.
* After that , in `componentWllMount()`, remove the same event listener with `doucment.removeEventListener()`.

* Code:
```React
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
    this.handleEnter = this.handleEnter.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  // Change code below this line
  componentDidMount() {
  
  }
  componentWillUnmount() {

  }
  // Change code above this line
  handleEnter() {
    this.setState((state) => ({
      message: state.message + 'You pressed the enter key! '
    }));
  }
  handleKeyPress(event) {
    if (event.keyCode === 13) {
      this.handleEnter();
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
};
```

* Answer:
```React
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
    this.handleEnter = this.handleEnter.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  componentDidMount() {
   document.addEventListener("keydown", this.handleKeyPress)
  
  }
  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress)

  }
  handleEnter() {
    this.setState((state) => ({
      message: state.message + 'You pressed the enter key! '
    }));
  }
  handleKeyPress(event) {
    if (event.keyCode === 13) {
      this.handleEnter();
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
};
```
Future of Software Testing: What Trends Will Prevail in the Coming Years? 
Tags: testing, qa, softwaretesting
Published: 2021-11-12 14:31:21

🔻It is difficult to overestimate the importance of Quality Assurance (QA) measures in the modern digital industry. Walking hand in hand with software development from the earliest days of the industry, QA has been an integral part of the successful development cycle. Modern trends are changing QA, turning this process into a universal tool for delivering quality for customers. 

🔻Let's see if the future of software testing is bright 👉  https://codeit.us/blog/software-testing-trends
Free Course For Everyone To Download Or Watch
Tags: javascript, tutorial, freecourse
Published: 2021-11-12 14:30:27

Here I am providing list of websites where you can download many paid courses for free or watch online.

Please save and like and share with others.

#Website For Free Downloads

1. [freecoursesonline](https://www.freecoursesonline.me/?1)
Free Courses Online Free Download Torrent of Phlearn, Pluralsight, Lynda, CBTNuggets, Laracasts, Coursera, Linkedin, Teamtreehouse etc.

2. [getfreecourses](https://getfreecourses.co/)
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.

3. [tutorialsplanet](https://tutorialsplanet.net/)
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.

4. [desirecourse](https://gigacourse.com/?1)
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.

5. [freecoursesite](https://freecoursesite.com/)
Download Udemy Paid Courses for Free. Learn Hacking, Programming, IT & Software, Marketing, Music, Free Online Courses, and more. Active site to upload udemy courses.

6. [courseclub](https://courseclub.me/?1)
Download Free Courses Online of Phlearn, Pluralsight, Lynda, CBTNuggets etc. Everything is Full And Free For Download And Many More.

7. [online-courses](https://online-courses.club/)
Watch and Learn. Educate yourself!
Blog Post 8: Learning Journey Week of 11/8/2021

Published: 2021-11-12 14:24:57

Another week went by with my journey into learning Coding, Ruby, HTML, and CSS. I feel that as everyday passes, I am able to understand this new world that I have submerged myself into. 

Another learning tool that my mentor Gino has given me was advice on how to approach learning with a book by Barbara Oakley titled "A Mind for Numbers." I rarely read but Gino encouraged me to read the book and understand how learning takes different shapes and sizes.  I am currently in chapter 5 and it is going great.  

Gino had me download an app called SoloCode and that has been a great help in understanding how HTML and CSS worked together when I created github.io page in VSCode.  There are fill in the blanks when taking the lessons on the app as well as short quizzes that I am confident in saying I have passed them all!
How to get ScrollViewer from ListView in UWP?
Tags: csharp, uwp, listview, scrollviewer
Published: 2021-11-12 14:12:31

Basically, the ScrollViewer is built-in to ListView. Suppose you developed a desktop application based on UWP. In this application, there's one page containing StudentListView. One day you want to scroll it to its top. A first question will be asked that: how to get ScrollViewer from ListView? The following code will answer this question:

**XAML**
```xaml
<ListView x:Name="StudentListView"></ListView>
```

**Code Behind**
```csharp
Border border = VisualTreeHelper.GetChild(StudentListView, 0)
as Border;
ScrollViewer scrollViewer = VisualTreeHelper.GetChild(border, 0)
as ScrollViewer;
```

Next, you can use the following code to scroll StudentListView to its top:

```csharp
if (scrollViewer != null) {
   scrollViewer.ChangeView(0, 0, 1);
}
```

Hope this post would be useful for you.

Happy coding :)
Create Custom Logout System in Laravel
Tags: laravel
Published: 2021-11-12 14:12:10

Hi guys, Today i will explained to the laravel custom logout in your laravel project.laravel custom logout is so easy to use.so you can just follow my step by step and learn laravel custom logout.

So let's start to the example and follow to the my all step. 

Hi guys, Today i will explained to the laravel custom logout in your laravel project.laravel custom logout is so easy to use.so you can just follow my step by step and learn laravel custom logout.

So let's start to the example and follow to the my all step. 

[Create Custom Logout System in Laravel](https://www.codecheef.org/article/create-custom-logout-system-in-laravel)
Extra Field with Extra Relationship in Laravel Pivot Table Example
Tags: laravel
Published: 2021-11-12 14:11:02

Our QuickAdminPanel has belongsToMany relationship field, but we don’t have the ability to add extra columns to pivot tables. No worries, this article will show you how to make this change manually, or implement it in your Laravel project that isn’t generated by QuickAdminPanel.

Imagine a scenario: you have a Recipe website, and every Recipe may consist of multiple Ingredients, so you create a many-to-many relationship, and add ingredients with our generated Select2 multiple dropdown:

Our QuickAdminPanel has belongsToMany relationship field, but we don’t have the ability to add extra columns to pivot tables. No worries, this article will show you how to make this change manually, or implement it in your Laravel project that isn’t generated by QuickAdminPanel.

Imagine a scenario: you have a Recipe website, and every Recipe may consist of multiple Ingredients, so you create a many-to-many relationship, and add ingredients with our generated Select2 multiple dropdown:

[Extra Field with Extra Relationship in Laravel Pivot Table Example](https://www.codecheef.org/article/extra-field-with-extra-relationship-in-laravel-pivot-table-example)
Uploading Million Records in Laravel using Array Chunk Example
Tags: laravel, fileupload
Published: 2021-11-12 14:09:51

Let’s imagine the situation: you have a big database table (like 10 000 rows or bigger) and you need to run an update to one column. But you cannot run just SQL query – there is some PHP logic behind it. So foreach loop could potentially take forever or bump into a default 30-second script limit. Luckily, Laravel has a neat solution for it.


Let’s imagine the situation: you have a big database table (like 10 000 rows or bigger) and you need to run an update to one column. But you cannot run just SQL query – there is some PHP logic behind it. So foreach loop could potentially take forever or bump into a default 30-second script limit. Luckily, Laravel has a neat solution for it.

[Uploading Million Records in Laravel using Array Chunk Example](https://www.codecheef.org/article/uploading-million-records-in-laravel-using-array-chunk-example)
How will Lacework’s acquisition of Soluble benefit devs?
Tags: security
Published: 2021-11-12 14:09:41

I’m absolutely thrilled about Lacework’s newest announcement—we just acquired Soluble, a startup whose mission is to help security and operations teams leverage IaC to scale cloud operations and security for businesses of all sizes. I’m especially excited about what Lacework’s incorporation of the Soluble technology means for devs like yourselves. There are countless benefits, but these are the three that I’m looking forward to the most.  

### Security and dev teams can quickly and efficiently address problems

IaC is quickly becoming the primary mechanism to manage cloud infrastructure at scale. This shift increases both velocity and risk—to keep up, security and development teams need to quickly address the resulting vulnerabilities or misconfigurations. Integrating the Soluble technology into Lacework’s platform and teaming with Soluble’s experts prepares us to shift further left into developer workflows. 

### Integration is simple—connect with Lacework through Git

Lacework can directly and quickly reach developer audiences. Soluble helps Lacework make security issues easier to solve by correlating cloud misconfigurations to IaC and enabling remediation at the source via pull requests. This expands Lacework’s platform to the places where developers are writing their code: directly in the UX/CLI/GitHub and GitLab. For developers to integrate with Lacework, they simply need to connect through Git. 

### This facilitates security/operations teams and developer partnerships

Soluble shares Lacework’s vision to build a modern, data-driven approach to cloud security. Implementing Soluble’s capabilities to the Lacework platform helps security and operations teams shift further left and partner with developers so they can manage applications and infrastructure efficiently, securely, and reliably.

I’d love to hear your thoughts on this acquisition in the comments below👇.
Use Slug Instead of ID Example Step by Step in Laravel
Tags: laravel
Published: 2021-11-12 14:08:11

In this tutorial, we will explain the easiest and cleanest way to make your blog posts URL’s with unique slugs created from the title of the particular post. For the purposes of this tutorial, the PHP based Laravel framework will be used.
For more information about the framework, please visit the official documentation of the framework website, by clicking the following link.

Also, you can refer to Laravel skeleton application created in my previous post.

In this tutorial, we will explain the easiest and cleanest way to make your blog posts URL’s with unique slugs created from the title of the particular post. For the purposes of this tutorial, the PHP based Laravel framework will be used.
For more information about the framework, please visit the official documentation of the framework website, by clicking the following link.

Also, you can refer to Laravel skeleton application created in my previous post.

[Use Slug Instead of ID Example Step by Step in Laravel](https://www.codecheef.org/article/laravel-use-slug-instead-of-id-example-step-by-step)
Generate Random Number in JavaScript Between Two Numbers
Tags: javascript
Published: 2021-11-12 14:07:00

In this example, you will learn to write a JavaScript program that will generate a random number between two numbers.

To understand this example, you should have the knowledge of the following 

In this example, you will learn to write a JavaScript program that will generate a random number between two numbers.

To understand this example, you should have the knowledge of the following 

[Generate Random Number in JavaScript Between Two Numbers](https://www.codecheef.org/article/generate-random-number-in-javascript-between-two-numbers)