teleren/devto huggingface dataset:
OSD600 - Lab 7
Tags: javascript, opensource, beginners, programming
Published: 2021-11-05 01:25:05

This week, I have to work on managing project complexity through the use of Static Analysis tooling. **Static Analysis** tools operate on our source code (static) vs. running (dynamic). They help us maintain the quality of source code by fixing formatting issues, spotting suspicious coding constructs, or alerting us to common errors.

##Prettier
I pick [Prettier](https://prettier.io/) for my [project](https://github.com/tcvan0707/txt2html). It will help me fix any format issue and make my code look "prettier" as its name. In order to install it, I type:
```
npm install --save-dev --save-exact prettier
```
After that, I have to add an empty config file to let others know Prettier is being used in my program:
```
echo {}> .prettierrc.json
```
However, I have encountered a problem when I try to use the above command, it keeps returning errors when I use it. The reason is because `.prettierrc.json` is encoded in **UTF-16LE**, not the **UTF-8**. So I figure the solution out by using *Command Prompt* in Window to run this command, and it works properly. As I initially use Prettier for my program, so after running this, it looks like nothing is changed for my format.

##Linter
For my linter, I use the most popular one with Javascript developers is [ESLint](https://eslint.org/). It will help developers catch some unexpected errors such as spelling mistakes, using variables, etc. In order to install **ESLint**, I run the following command:
```
npm install eslint --save-dev
```
After installing and running ESLint, I get a bunch of errors such as declaring a variable but never use it, even some spelling mistakes, and unnecessary `\` symbol inside my regular expression. I think ESLint is so powerful for developers since it will catch the errors that we do not realize.

##IDE Integration
In order to integrate the tools into the IDE, I create `/.vscode` folder containing workspace settings. In this folder I have two files `settings.json` and `extensions.json`, which contains all necessary configuration for my program and it will help others to know what my program needs to get the right format and the right coding style.

My commit: [dd325fd](https://github.com/tcvan0707/txt2html/commit/dd325fd3c04017da5c6c75afd08ea3c4b8432ad7)
My Job Search Strategy
Tags: beginners, career, webdev, discuss
Published: 2021-11-07 17:52:28

Hi Everyone, I haven't written anything in a while but I had a few people reach out to me on LinkedIn asking about how I look for jobs so I decided to do an article on it.

Lets get right to it

<H3>1. Know what kind of role you're looking for<H3>

Its important to have an idea of the kind of job you're on the look out for. This helps with a lot of things that I'll discuss as we go along in this article.

<H3>2. Connect with the right people on LinkedIn<H3>

LinkedIn is a very powerful tool for any professional. it primarily helps with networking . If you don't have one, you really should make one. You can then connect and network with people you think will be beneficial to your search (i.e. Recruiters, Hiring Managers, Start-up CEOs and other Software Engineers). Also, knowing what kind of role you want like we discussed in step one will also help in knowing the right people to connect with. For example, if you're looking for a frontend role that uses the JavaScript techstack, you'll connect with people who, already are frontend JavaScript developers or recruiters you source for people in the JavaScript tech space. 

<H3>3. Optimize your LinkedIn<H3>

Most people already know this, some don't but that's ok. Optimizing your LinkedIn profile so it can be seen by the most important people (i.e. recruiters, startup CEOs etc.) makes the job search somewhat easier. Using keywords in your profile help so your profile comes up as part of the results of what people might searching for. Danny Thompson has a great [video](https://www.youtube.com/watch?v=SG5Sb5WTV_g) about how to use LinkedIn to your advantage.

<H3>4. Make sure your Resume is always up to date<H3>

Your resume is usually the first point of contact any potential employer, recruiter or Hiring manager will have of you. So its very important that your is up to date, concise and well formatted. Except you have multiple years of experience , its always good to keep your resume to one page. [Resumake.io](https://resumake.io/) is a very good free  resume maker for software engineers and people in other tech roles.

<H3>5. Prepare even when you're not scheduled for any interviews<H3>

This one is a no brainer in my opinion, being prepared for anything is very key. its also a win-win situation for you because even if you're not interviewing, preparing for potential interviews helps improve your skills anyway. The interview I had for the role I have now was very impromptu, but because I had been practicing in my spare time anyway, I was able to ace it and land the job. I particularly use [codewars.com](https://codewars.com/) to keep me sharp and on my toes.

<H3>6. Have a Positive mindset<H3>

Having the right mindset helps with motivation. Lets be honest, the job search/ interview process is hard but if you have the right attitude and believe you'll come out on top in the end, it can help push you, especially with step 5 above.

These are some of the things I've done that have helped me so far in my (Tech) Career and I hope this is useful to anyone out there.
Should I know Design Patterns as a Flutter Developer?
Tags: flutter, dart
Published: 2021-11-07 17:50:39

**YES**, you should know about design patterns as a Flutter app developer. In current scenario, most of the Flutter developer are new to programming or just started learning a framework for developing mobile application and focusing on developing fancy User Interface with flutter. It's easy and we can do rapidly. But problem is when they try to understand the deep level knowledge about Flutter core architecture. Even most of them used to write a huge legacy code in their production application (Even I was one of them). In that case, the app faces several issue during the production lifecycle like-performance issue.


### So what should we do now?

We need to learn the design pattern concept for understanding the proper way to handle Flutter framework & core architecture. Firstly, We need to understand the core concept of dart language. Then comes OOP(Object Oriented Programming) with dart to save us. We can write reusable code with OOP and can make a proper maintainable application. After OOP, we need focus on Design Patterns. We can learn design pattern from several resources. I am mentioning some of my favorite sites from learning it. 

1. [https://dart.dev/guides/language/language-tour](Dart Language Tour)
2. [https://dart.academy/](Dart Academy)
3. [https://medium.com/flutter-community/flutter-design-patterns-0-introduction-5e88cfff6792](Design Patterns with Flutter)

These resources could be your start point of Deep knowledge with Flutter.

You can find more resources in YouTube and you can add more valuable link/sites in comments.
Playing with Django Model Objects - CheatSheet
Tags: django, python, webdev, beginners
Published: 2021-11-07 17:18:40

One must know how to play with Django models in their views in order to create efficient and short functions.

Let's take a model for example.
```
class Teacher(models.Model):
    name = models.CharField(max_length=100)

class Student(models.Model):
    name = models.CharField(max_length=100)
    roll = models.CharField(max_length=100)
    mentor = models.ForeignKey(Teacher, on_delete=models.CASCADE)
    reg_date = models.DateTimeField(auto_add_now=True)
```
### Extracting all objects of a model
Let's extract all the students.
```
students = Student.objects.all()
```

### Extracting a student by ID
ID is the primary key in every model.
```
from django.shortcuts import get_object_or_404

def my_view(request):
    obj = get_object_or_404(MyModel, pk=1)
```
Or there is another way to do this.
```
stud = Student.objects.get(pk=1)
```
The last one returns a error in case a student doesn't exist with the following id.

### Filtering the objects
Simple filtering can be done with equating like
```
studs = Student.objects.filter(name='Ram Kapoor')
```
This will return the list of students whose name is Ram Kapoor.
We can also refer to the details of an attribute with the symbol `__`.
```
stud_2006 = Student.objects.filter(reg_date__year=2006)
```
This will return all the students registered in 2006.
```
stud_p = Student.objects.filter(name__startswith='P')
```
This will return all the students whose names start with 'P'.

### Using Q() - Very Powerful
This is used to add many filters in a single filter using | (or), & (and).
```
stud = Student.objects.filter(Q(name__startswith='P') | Q(reg_date__year=2006))
```
This will return both the students whose names start with 'P' or who are registered in year 2006.

## THANK YOU
Find me on [Priyanshu Panwar](http://priyanshu-panwar.github.io/) | [LinkedIn](https://www.linkedin.com/in/priyanshu-panwar)
Learning Svelte
Tags: svelte, javascript, webdev, 100daysofcode
Published: 2021-11-07 17:10:01

#Input Data Binding

Hello friends, this is my third blog post ever, and to tell the truth it's quite difficult for me keeping this challenge up and running, the big problem, i think it's that my mother language it's italian but every day i speak spanish!

But i am here, and i need to do it, it's help me on my journey to become web developer one day soon.

This is post it's very short, i will publish another one about Data Binding, next week to complete my "lesson".



As you now, Svelte is a “radical new approach to building user interfaces”, according to the official documentation. 

In practice, Svelte is quite similar to JavaScript frameworks like React, Vue etc.

Today i will write about Input data binding.

Input bindings are essentially just a way you can keep variables inside your components in sync with input fields.

They are very handy when design forms  or having any form of data entry.

**bind:property**

Let’s start with the most common form of binding you’ll often use, which you can apply using bind:value. You take a variable from the component state, and you bind it to a form field:

 ```
 <script>
 
 Let name = “Alessandro”
 
 </script>
 
 <p> Your name is: {name}
 
 <input bind:value = {name}
 
 ```
 
 Now if name changes the input field will update its value. And the opposite is true, as well: if the form is updated by the user, the name variable value changes.


We successfully binded name variable to the input field, when the user makes change to the input field it is going to update the data within your components, this is the most basic example .

**bind:value** works on all flavors of input fields (type="number", type="email" and so on), but it also works for other kind of fields, like **textarea** and **select** 

Let's see an example:


```
<script>
let coffeeOrigins = ["Ethiopia","Colombia","Sumatra","India","Nicaragua"];
let selected;
</script>

<main>

<p> Your have choose: {selected || 'nothing'}</p>

{#each coffeeOrigins as origin}

<label>
<input type="radio" bind:group={selected} value={origin}/>
{origin}
</label>
{/each}

</main>


Thank you for reading, see you next sunday!
Wrapping a Ruby Method
Tags: ruby, metaprogramming
Published: 2021-11-07 17:09:33

---
title: Wrapping a Ruby Method
published: true
description: 
tags: ruby, metaprogramming
---

You can "wrap" an instance (or singleton) method so that your wrapping method gets to act both before and after the wrapped method is called:
```ruby
$ cat -n t.rb
     1  class Array
     2
     3    # Save the existing method.
     4    alias :old_initialize :initialize
     5
     6    # Define the wrapper method.
     7    def initialize(*args, &block)
     8      # Here's where we get to do a prelude.
     9      block_s = block ? block.inspect : 'no block'
    10      puts "Creating an array from #{args} and #{block_s}."
    11      # Make the call, saving the result.
    12      a = old_initialize(*args, &block)
    13      # Here's where we get to do a postlude.
    14      puts "Created #{a}."
    15      puts ''
    16      # And of course return the new array.
    17      a
    18    end
    19
    20  end
    21
    22  Array.new
    23  Array.new([])
    24  Array.new(4)
    25  Array.new(4, 'nosuch')
    26  Array.new(4) {|i| "Element #{i}"}
```

The output:

```
Creating an array from [] and no block.
Created [].

Creating an array from [[]] and no block.
Created [].

Creating an array from [4] and no block.
Created [nil, nil, nil, nil].

Creating an array from [4, "nosuch"] and no block.
Created ["nosuch", "nosuch", "nosuch", "nosuch"].

Creating an array from [4] and #<Proc:0x000001e256eb3ab8 t.rb:26>.
Created ["Element 0", "Element 1", "Element 2", "Element 3"].

```
Time to follow back
Tags: discuss, watercooler
Published: 2021-11-07 17:03:25

I noticed it on Twitter first: I became increasingly bored by the content I was seeing. I also noticed the almost cultish appraisal of “thought leaders”. Sure, some of them are great minds and post interesting stuff. But overall I found much of it trivial. And some responses were outright arrogant.

I suspect much of what happens on social media is based on popularity and social group phenomena, rather than quality of content. And I have probably missed a lot of interesting ideas because I followed the “big names” instead of giving everybody a fair chance.

So I’m ready for an experiment. At the time of this writing, I have close to 3100 followers on dev.to. But I only follow around 50 people. Shame on me ;-)

In the next couple of days, I will follow everyone who follows me back - all the existing followers, and new followers. Let’s see how that goes.

What do you think about all of this?
Load-Balanced MEAN-Stack by AWS CloudFormation & Docker 🐳
Tags: aws, devops, docker, angular
Published: 2021-11-07 16:54:15

In this short article I will show how to deploy a Mean-Stack app by AWS-CLI and CloudFormation using a **v1 load-balancer** 😃

All the code regarding our deployment you can also find here:
https://github.com/TGotwig/devops

We take usage of an very nice and simple MEAN-Stack project which comes from Brad Traversy 🤗

Download the sample repo and cd into it:

```bash
git clone git@github.com:TGotwig/devops.git
cd aws-cloudformation/solutions/advanced/mean-stack
```

## ⚙️ Setup awscli

Install the `awscli` from somewhere and login:

```bash
aws configure --profile <YOUR_AWS_ACCOUNT_NAME>
```

You will be asked for two IDs, you can get them through:

![Click on your name at the top right corner and then on `My Security Credentials`](https://dev-to-uploads.s3.amazonaws.com/i/2m1ne5vu0ld2f3ugpgfs.png)

![Open the tab `Access keys (access key ID and secret access key)`](https://dev-to-uploads.s3.amazonaws.com/i/4gn2acj7xt2jwmn0lodf.png) 

![Let it create two keys for you for later use](https://dev-to-uploads.s3.amazonaws.com/i/x16gkhxd0gnlvzasi2p5.png)

## ⚙️ Setup ssh

Create a file called `parameters.json`:

```bash
[
  {
    "ParameterKey": "KeyName",
    "ParameterValue": "<KeyName>"
  }
]
```

Replace `<KeyName>` by your SSH key under `EC2 / Key Pairs`:

![Screenshot_2020-10-10 Key pairs EC2 Management Console(1)](https://dev-to-uploads.s3.amazonaws.com/i/q9bo1ahkuq87e3yagttg.png)

## ⚙️ Setup Makefile

Create a file called `.env` for the `Makefile`:

```bash
stack-name=simple-mean-stack
profile=<YOUR_AWS_ACCOUNT_NAME>
region=<YOUR_AWS_REGION>
```

## 🚀 Run it!

Start it by running `make up`, an EC2 machine should boot up:

![Created EC2 machine with public IPv4 address](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej8ywt3mpc8z9apgten4.png)

After some time we can reach the app, run `make getUrl` to get the url:

![App with ID from machine x](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl5qrrt8hcxfrygjhyd4.png)
 
After refreshing the page few times you should see another IP:

![App with ID from machine y](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhxpasnlsa1x7igx3nzm.png)

You can remove the entire stack by running `make rm`! 🔥 

Awesome! Now we have finished our load-balanced Mean-Stack app 😎🎉
Divi Cart Pro und Divi WooCommerce Extended für bessere Sales
Tags: wordpress, divi, woocommerce, wordpressplugins
Published: 2021-11-10 16:14:02

---
title: Divi Cart Pro und Divi WooCommerce Extended für bessere Sales
published: true
date: 2021-11-07 16:51:44 UTC
tags: WordPress,divi,WooCommerce,WordPressPlugins
canonical_url: https://bloggerpilot.com/divi-cart-pro/
---

![Divi WooCommerce Extended und Divi Cart Pro für bessere Sales](https://bloggerpilot.com/wp-content/uploads/2021/11/divi-extended-wc.png)

Dies ist eine großartige Möglichkeit, dein Produkt zu bewerben und mehr Umsatz zu machen. Es ist sehr einfach und leicht zu bedienen. Alles, was du tun musst, ist, es auf deiner Website zu installieren und dann mit der Erstellung deines Produkts zu beginnen. Du kannst sowohl die Vorlagen als auch die Templates verwenden, um dein Produkt zu erstellen. Es ist auch sehr einfach, deine Website zu bearbeiten und anzupassen.

Der Original-Artikel erschien auf [Divi Cart Pro und Divi WooCommerce Extended für bessere Sales](https://bloggerpilot.com/divi-cart-pro/).

Du hast bereits eine WordPress-Website und willst einen professionellen Online-Shop...
In a World With No Concern For Time or Money...
Published: 2021-11-07 16:29:04

#What would I do in this type of world?

I would want to do a lot of things, but I'm just going to focus on what career path I would take for this post.

I would want to take all the knowledge that I've learned in college and create a company with individuals who would make up the different parts of a design team. The members of this team would all bring different perspectives and talents to the table. We would then design the different elements that small businesses or charities needed to make their business stand out more or even just to get them started.

I would be the front-end designer for this company, which would create whatever they needed will the help of other members of my team and use my UI/UX experience to figure out how to create something that the client would love, while also making choices that would benefit the users of the design.

As a company in a world that has no concept of time or money, we would not charge a fee for the designs we created, but let the business or charity decide if they could pay, and how much they wanted it to be.

#Why would I do it?
I don't want to be the type of person who goes and works for a big company that doesn't care about me or its consumers. This is because I know this is the type of job that will kill my passion for design and being creative. 

I want to be able to connect with the people I am designing for and there to be a greater purpose for my designs and them not just get people to spend money on things they probably don't really need.

I have also always had this need as well to be an owner or partner in a small business of my own, I don't know if this is because of seeing my Dad run his own small business growing up or something else entirely.

I also just want to help people who are motivated to make a change in this world, no matter how small. So that is why my design team and I would focus on small businesses and charities because they don't always have the same network or means as other bigger companies may have.

In a world with no concern for time or money, I would do my best to help make a difference for the little guys of the world, so they have a little bit better of a chance to make a change in this world.
The Final Chapter - React Redux
Published: 2021-11-07 16:17:40

Finally, the last phase of the program; most definitely bittersweet. Boy was this a way to finish school...React & Redux. Whew! 


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


By this time, we're pros when setting up the backend. It only takes me roughly 20 minutes to create a Rails API. If only it was the same for the frontend, but that's okay. 

For the backend, I utilized several commands to quickly get started: 
`rails new name --api` `rails g scaffolding Name` `rails g Name serializer`, etc. You get the point! 

If only the frontend was just as easy to build! To start, I used this command to build the basic structure of the frontend `create-react-app App Name`. This provided some files like **index.html** to render the app to the DOM and **index.css** for styling. From this point, I dove right into building my app from scratch to meet the requirements. 

One of the requirements was to include five stateless components. Stateless components are portions of your code that do not have state. In other words, this component serves to pass down props when rendered. 

![Home.js component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk19hv69nhtd2cbhqk2w.png)
######*The Home.js component is stateless and simply displays a bit of text when rendered. It is then exported to be used as a button link in the Navbar component.*

Another requirement was to include routes. When implementing Redux, there are packages one can install to provide navigational components to be declared for easy access within an application. For instance, `react-router-dom`. I used this registry to access routes for a user to navigate through the application. Check it out below! This was super helpful when consider RESTful conventions as I worked through the project.

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

While I only touched on a couple topics, React provides so much more functionality and structure when creating a user friendly application. This project was by far the most challenging, but it was rewarding to see everything come together throughout this journey.
Web 3.0 and the evolution of the Internet
Tags: web3, blockchain, internet, decentralization
Published: 2021-11-07 16:17:38

Lately, Web3 has become a trend and everyone is talking about it. The internet has evolved to this stage following the creation of Bitcoin by Satoshi Nakamoto and subsequently Blockchain technology.

Before discussing about what the web3 is, we need to know how it all started. Here is an overview of what it is all about.

**Web 1.0 (1999 - 2005):** This is was the first generation of the web made of static pages, texts and little or no images coupled with slow internet speed. Users can't interact, add comments or upload images because it is read-only. Webmasters only have permission to post contents.

**Web 2.0 (2005 - Present):** The second generation of the web which brought about the World Wide Web (WWW). There is exchange of information between users and web servers/companies providing services in exchange for user's data to better serve them.

**Web 3.0 (Now):** Here, everyone has full ownership of contents such as images, texts they post on the Internet. It is decentralized because it runs on Blockchain. There is no censorship or monetization of personal data and it is  permissioned regardless of gender, age or nationality. Any changes to information on the web is made through Voting by all participants.

The web3 space is still in it's early stage with so many potentials. And everyone should get involved.