teleren/devto huggingface dataset:
The best examples of bad code I’ve come across production mode.
Tags: javascript, php, vue, developer
Published: 2020-07-23 05:17:32

These screenshots are just for fun, I hope u won’t get angry with these guys.

![This is only one not from production. But it is the best example of shitcode](https://dev-to-uploads.s3.amazonaws.com/i/qaycu61lc6ghs61i4gqc.jpeg)_This is only one not from production. But it is the best example of shitcode_

![What The Hell
](https://dev-to-uploads.s3.amazonaws.com/i/f0ho8hr48icpn0wd3vrh.png)_What The Hell_

![2-in-1. Custom padStart and “validateAuth”
](https://dev-to-uploads.s3.amazonaws.com/i/uqwde7esntqvg79wl331.png)_2-in-1. Custom padStart and “validateAuth”_

![Simple navigation](https://dev-to-uploads.s3.amazonaws.com/i/40tqcktkhsxnu7oi775o.png)_Simple navigation_


![Conditional statement, local language e.t.c
](https://dev-to-uploads.s3.amazonaws.com/i/hasetm1odexvnxnabmjw.png)![Conditional statement, local language e.t.c
](https://dev-to-uploads.s3.amazonaws.com/i/88n1gn5ouh4ym74imwfw.png)_Conditional statement, local language e.t.c_

![Vue.js like hell’s jquery. See Article
](https://dev-to-uploads.s3.amazonaws.com/i/apnqoblt4vrejvbtdl81.png)_Vue.js like hell’s jquery. **[See Article](https://dev.to/sosog/how-not-to-use-vue-like-jquery-4a1l)**_

![So clean
](https://dev-to-uploads.s3.amazonaws.com/i/1w1jyhd4m31jhden6l4c.png)_So clean_

![Just “isTrue”](https://dev-to-uploads.s3.amazonaws.com/i/s0c8z7cxp72szw140gk9.png)_Just “isTrue”_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ums3t6d9mjrwdau8zr2i.png)_This HTML code has written by bank developers and it is still in production:(_

P.S.
I also have a lot of bad codes.
I have found this in my project, but I don’t understand what the hell is — Set language function )))))

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7qsahfvwmodshx51i57i.png)
Five Gems of the JavaScript World
Tags: react, angular, vue, jquery
Published: 2020-07-23 05:16:27

Its easy for a beginner to get lost and be overwhelmed by the plethora of libraries, frameworks, apps and all kinds of popular components in the JS world.

One wonders sometimes about what to learn, where to begin and most importantly, where to stop and consolidate our learning and build something useful using that knowledge.

Today, I will list out five important members in the library/framework family which every seasoned JavaScript coder must know at least the basics of. They are all excellent in their own right and have stood the test of time.

1. **jquery**: Its the obvious and one of the most important ones. Many of us started our JavaScript journey with `$.get()`, `$.post()` and other DOM manipulation techniques, compliments of jquery. The enterprises still use it a lot and even the latest version of bootstrap still uses jquery.
2. **Angular**: Angular (formerly angular.js) is a single page app framework that became popular right since day one, partly thanks to Google who is the founder and patron of the software. Its a comprehensive framework that lets you define an MVC workflow with relative ease. 

    However, the biggest criticism against angular is that its highly opinionated and complex under the hoods. The relative ease of defining ng-directives, services, routes, etc. comes with a cost - which is lack of backward incompatibility coupled with this facade of a highly complex beast under the hoods.
The lack of backward compatibility is especially problematic as it left many users stranded when the while ecosystem migrated to the new 2.x version powered by TypeScript. Nevertheless, its knowledge is important if you wish to get projects in the webdev world today.
3. **React**: React is the V (View) portion of the MVC and more of a library or toolkit than framework. As such, it gained rapid fame and popularity in webdev world in a short time, this time thanks to Facebook who is the prime contributor and proponent of this tech.
4. **Vue.js** - I haven't gotten around tinkering vue much yet but suffice it to say that its another framework mostly comprising the view part again, and much simpler to use than angular.
5. **Bootstrap** - Bootstrap is like the bread and butter of the webdev world. Its popularity can be attributed to the fact that even a non-designer without any expertise in CSS/JS can easily integrate it into their apps, coupled with its helpful classes for layouts and presentation which are quite easy to learn.
Minigrep : grep using Rust
Tags: rust, commandline, womenintech, grep
Published: 2020-07-23 05:12:02

grep (Global Regular Expression Print)is a command-line utility for searching plain-text data sets for lines that match a regular expression.
Minigrep is a simple rust program that recreates the basic functions of grep alongside providing few more addition features:
1.Case-insensitive search can be done by passing an option.
2.Ability to do exact-match search.
3.The query is highlighted in the output.

The aim of the program is to be able to search for word in a given a text file. It goes by the following format:
<pre>
```shell
CASE_INSENSITIVE=1 cargo run “word to be searched” “filename” > “output file”
```
</pre>
Miniproject follows Test-driven development (TDD) process. This is a software development technique that uses the method of writing a test that fails for a reason expected and later modifying the code to make new test pass. This is followed by refactoring the code and continuing to ensure that the tests pass. Writing the test before you write the code that makes the test pass helps to maintain high test coverage throughout the process.
The logic behind Minigrep can be explained with its main struct and run function.
<pre>
```rust
//struct
pub struct Config {
pub query: String,
pub filename: String,
pub case_sensitive: bool,
}
//run function
pub fn run(config: Config) -> Result<(), Box<dyn Error>> {
let contents = fs::read_to_string(config.filename)?;
let results = if config.case_sensitive {
search(&config.query, &contents)
} else {
search_case_insensitive(&config.query, &contents)
};
for line in results {
println!(“{}”, line);
}
Ok(())
}
```
</pre>

The program can be broken down into 5 parts:
1.Accepting command line arguments
2.Reading a file
3.Writing tests an developing library
4.Setting up environment variable
5.Writing error messages to standard error
6.Throughout these steps, we use refactoring to make the
  program more efficient.
For instance, the program began with the basic lines of code

<pre>
```rust
use std::env;
fn main() {
 let args: Vec<String> = env::args().collect();
let query = &args[1];
let filename = &args[2];
println!(“Searching for {}”, query);
 println!(“In file {}”, filename);
}
```
</pre>

This was further developed into a struct seeing repetitions. The query and filename along with case sensitive boolean were added to the structure Config.
To see more of how the logic panned into run() function, the tests and library along with directions of use, please find the source code on [GitHub](https://github.com/niranjana687/minigrep).
YouTube Video | Website with HTML & CSS -2
Tags: html, css, youtube, webdev
Published: 2020-07-23 05:09:00

We will build a simple and fully responsive, Agency site in HTML and CSS. If you are new to web-development, learn HTML and CSS first from my other courses.


In this series we are going to use a bit of old layout theme of float, instead of CSS Grid or Flexbox. As even in 2020 float, position are very much used and you can find them in a lot of old projects.

Here is the final part of the series.

{% youtube a_NYfh6nuLs %}


Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
CSS Search? That's interesting
Tags: css, html, beginners, tutorial
Published: 2020-07-23 05:05:49

Imagine you have a list of data rendered in your application, most of the time it will be a list of records from a database. one of the most difficult tasks when developing an application is the functionality of searching through the data effectively. 

*jets.js* solves this problem for us. As the documentation states it is a native CSS search engine. Pretty cool huh? i know.

###How does it work?
By applying a dynamic CSS rule in the `<style>` tag, the browser decides which item to show or hide when searching. the best part is, it works on everything. `<ul>`,`<ol>`,`<table>``<div>` 's you name it.

###Getting started
Jets.js can be installed using both `npm` and `bower`

`bower install jets` or `npm install jets`

you can also use the bower [cdn](https://cdnjs.com/libraries/jets).

jets.js on [github](https://github.com/NeXTs/Jets.js)

###Usage

Download the library and include the script on your page.

```html
<script src="./jets.min.js"></script>
```

```html
<input type="search" id="jetsSearch">
<ul id="jetsContent">
  <li>Barry Williamson</li>
  <li>Francis Reeves</li>
  <li>…</li>
</ul>
```
include the script tag in the body section. That's it.

```javascript
var jets = new Jets({
  searchTag: '#jetsSearch',
  contentTag: '#jetsContent'
});
```
*Note: This example is taken directly from the jets.js official page.*

###Example

Check the example below on how to get stared.

{% codepen https://codepen.io/mizuan/pen/oNbmyzG %}

Jets.js is created By **Denis Lukov**
visit [jets.js](https://jets.js.org/)
Gain Access😎😎
Tags: xss
Published: 2020-07-23 04:46:31

When you are new to hacking and want to know about some facts...
There are many different ways to hack--
XSS
SQL Injection
Pen Testing.

But for these you need to know some basic things ...
<script>alert("document.cookie")</script>
This script tag explains the XSS concept..
For cracking passwords all you need to do is to type the above tag in an input field and if it is vulnerable and security level is low then this tag will result into an alert-box containing the cookies.

Bang!!!
Once you have the cookies,everything is easy to hack now...
Read/write data
Manipulate the commands 
Access an account unauthorisedly...

It is all for educational purposes so do not try it everywhere except some predecided webpages like VWSA...
Please note that this activity is illegal in any ways so do not try to harm yourself as you are being watched,activity is being recorded and it's against the laws...

©Anmol Sharma®™
eSlayers part 5 - data fetching strikes back
Published: 2020-07-23 04:41:59

So I went back to working on my application, and my website broke. I was trying to fetch my summoner name and it would throw an error when it tried fetching data for my rankings.

I did some digging and it turns out the data that was being returned from the first fetch was not finished so by the time it got to the second fetch it would error out. Since I am using `useSWR` I had to read the docs to see if there was anything that I could use that would allow me to fetch data dependent on the first fetch.

## [Conditional Fetching](https://swr.vercel.app/docs/conditional-fetching)
`useSWR` allows you to fetch data dependent on whatever you want. In my case, I need to make my fetch dependent on the summoner name and summoner ID being passed into my fetches.

I refactored some of my code so now I can reuse fetching summoner and fetching league

`fetchSummoner.ts`
![Fetch Summoner](https://dev-to-uploads.s3.amazonaws.com/i/195akud45n1scnbjbgdb.png)

`fetchLeague.ts`
![Fetch League](https://dev-to-uploads.s3.amazonaws.com/i/zovni6m1ygrg6wygs1qa.png)

`Summoner.tsx`
![Summoner Component](https://dev-to-uploads.s3.amazonaws.com/i/45u52zy64wfijqyl3zno.png)

Now that I figured that headache out I can move on to fetching match history.
Build A Flutter 💙 Tinder Clone with Firebase & BLoC #9/40 Bloc Delegate
Tags: flutter, tutorial, dart, career
Published: 2020-07-23 04:20:41

---
title: Build A Flutter 💙 Tinder Clone with Firebase & BLoC #9/40 Bloc Delegate
published: true
description: Tutorial on building a Tinder clone with Flutter, Firebase and Bloc
tags: #Flutter #Tutorial #dart #career
//cover_image: https://direct_url_to_image.jpg
---
In this series of videos we are going to build a Tinder clone with Flutter, Firebase as a backend and Bloc as our state management solution.

Here we set up the Bloc Delegate.

Protip: Watch video at 1.25 speed.

{% youtube lTN4Fv9Cnb8 %}
Strict Mode in JavaScript
Tags: javascript, beginners, codenewbie, 100daysofcode
Published: 2020-07-23 04:14:50

The strict mode was introduced in ES5. It is a way of enforcing strict rules while coding in JS. Not all browsers support strict mode, so always test your code.

### Advantages:

1. Disable some silent JS errors and throw them instead.
2. Performant code in specific instances where a JS engine supports performance optimizations
3. Code improvements
   * No duplicate keys in objects
   * Variable declaration without `var` keyword
   * Error on duplicate function arguments

### Enabling strict mode

- **File-level**: add `"use strict"` on top of the file before any other statements.
- **Function level**: add the same `"use strict"` on top of the function body before any other statements.
- **Module level**: Modules introduced in ES6/ES2015 are in strict mode by default.

### Changes applied in strict mode

1. Variable declaration without `var` keyword
   ```javascript
   someVariable = 17;
   console.log(someVariable); // 17
   ```

   This is a completely valid code. Even though we did not use `let`, `var` or `const` to declare the variable, JavaScript works without an issue. This would force JS to create a global property, and that could cause side effects in a large application (variable name conflict and modifying global variables).

   Strict mode solves this by throwing an error.

2. No duplicate keys in objects
   ```javascript
   const myObject = {
        name: "Parwinder",
        age: 34,
        car: "MiniCoop",
        name: "Bhagat"
    }
   console.log(myObject.name); // Bhagat
   ```

   Again, completely valid under non-strict mode (sloppy mode) but throws an error in strict mode.

3. Throw error when trying to delete undeletable properties of an object
   ```javascript
   "use strict"
   delete Object.prototype; // throws a TypeError
   ```

4. No duplicate arguments in functions
   ```javascript
   function sumOfNumbers(a, a, b) {
       return a + a + b;
   }

   console.log(sumOfNumbers(1, 2, 3)); // 7
   ```

   The above code is valid too. It ends up with unexpected results. The value of `a` is set to 2, and the sum returns  7 instead of our expectation, 6. Strict mode throws a syntax error.

5. Assigning `NaN` to a variable has no failure feedback in sloppy mode. Strict mode throws an exception


🚨 There’s no way to cancel "use strict". Once we enter strict mode, there’s no way to turn it off.
Cara mengubah format tanggal menjadi bahasa indonesia di Laravel
Tags: laravel, carbon, tutorial
Published: 2020-07-23 04:09:14

Di Laravel kita dapat dengan mudah mengubah format tanggal menjadi sesuai keinginan kita termasuk mengubah nama hari dan bulan ke bahasa indonesia dengan menggunakan package yang bernama **Carbon**. Beruntungnya di laravel kita tidak perlu lagi menginstall Carbon secara manual karena sudah secara otomatsi terinstall ketika kita menginstall laravel.

Ada beberapa cara untuk megubah [format tanggal](https://urangsunda.web.id/mengubah-format-tanggal-indonesia-laravel-dengan-carbon/) menjadi bahasa yang kita inginkan seperti artikel di blog lain yang menunjukan cara menggunakan seperti berikut
```
setlocale(LC_TIME, 'id_ID');
\Carbon\Carbon::setLocale('id');
\Carbon\Carbon::now()->formatLocalized("%A, %d %B %Y");
```
dengan cara diatas kita wajib menginstall locale id_ID. untuk melihat sudah terinstall atau belum
```
locale -a
```
nah cara yang lebih mudahnya adalah menggunakan method **isoFormat()**, kita hanya perlu mengubah config pada folder *italics*config/app.php*italics*
```
'locale' => 'id',
```
Berikut adalah contoh kode untuk mengubah format tanggalnya
```
$today = Carbon::now()->isoFormat('D MMMM Y');
// "28 Juni 2020"

$today = Carbon::now()->isoFormat('dddd, D MMMM Y');
// "Minggu, 28 Juni 2020"

$today = Carbon::now()->isoFormat('dddd, D MMM Y');
// "Minggu, 28 Jun 2020"

$registeredAt = $user->created_at->isoFormat('dddd, D MMMM Y');
// "Minggu, 28 Juni 2020"

$lastUpdated = $post->updated_at->diffForHumans(); 
// "2 hari yang lalu"
```
untuk membuat format yang lain bisa dilihat di dokumentasi resminya [disini](https://carbon.nesbot.com/docs/#api-localization) 
Sekiat untuk postingan kali ini semoga bermanfaat. Terima kasih
Guarding Makefile targets
Tags: bash, programming
Published: 2020-07-23 03:44:58

This may just be my favorite one liner of my own devising in recent years.

I love it because of a combination of its utility (:wrench:), the story behind how it works (:thought_balloon:), and its power to induce headaches to its readers (:sweat_smile:).

It belongs in a `Makefile` :
```make
## Returns true if the stem is a non-empty environment variable, or else raises an error.
guard-%:
  @#$(or ${$*}, $(error $* is not set))
```
And has a simple function:
```shell
➜  make guard-FOO
Makefile:12: *** FOO is not set.  Stop.
➜  FOO=42 make guard-FOO
➜
```

Deciphering from top to bottom, left to right:

- The `%` symbol used in the target declaration a “static pattern wildcard”, and in more familiar regex terms it translates to `guard-(.*)` ; the “stem” of the pattern, i.e. the value of the match group, is stored in [an automatic variable](https://www.gnu.org/software/make/manual/html_node/Automatic-Variables.html) called `$*`.
- The `@` prefix [prevents `make` from printing out](https://www.gnu.org/software/make/manual/html_node/Echoing.html) the command it is about to evaluate. (*Hint*: Take this away to actually see what’s happening.)
- The `#` is your typical [shell comment character](https://www.tldp.org/LDP/abs/html/special-chars.html): anything that comes after it will be interpreted by the shell (and `make`) as a comment, and thus ignored in a "truthy" way.
- The `$(or …, …, ...)` is a [`make` short-circuiting conditional function](https://www.gnu.org/software/make/manual/html_node/Conditional-Functions.html): it *expands* each item until it finds one that expands to a non-empty string, at which point it stops processing and returns the expansion. (*Note*: It does not _evaluate_ it.)
- The `${…}` notation is the `make` syntax for [evaluating a variable](https://www.gnu.org/software/make/manual/html_node/Reference.html#Reference).
- The `$*` as mentioned previously, holds the value of the matched pattern in the target name.
- The `$(error ...)` is a [`make` control-flow form](https://www.gnu.org/software/make/manual/html_node/Make-Control-Functions.html), and raises an error *as soon as it is evaluated*, after allowing for its arguments to be expanded.

So, putting it all together: `FOO=42 make guard-FOO` expands to:
```shell
#$(or ${FOO}, $(error FOO is not set))
```
which in turn expands to:
```shell
#$(or 42, $(error FOO is not set))
```
which, finally, expands to:
```shell
#42
```
which is evaluated by the shell as a comment and ignored, but in a truthy way.

However, `make guard-FOO`  expands to:
```shell
#$(or ${FOO}, $(error FOO is not set))
```
and then:
```shell
#$(or , $(error FOO is not set))
```
and then:
```shell
#$(error FOO is not set)
```
and then a fatal error.

The value of this is as a *prerequisite* for other targets, to easily guard against missing environment variables, e.g.
```make
say-something: guard-SOMETHING
  echo ${SOMETHING}
```
```shell
➜ make say-something
Makefile:12: *** SOMETHING is not set.  Stop.
➜ SOMETHING='Hello, world!' make say-something
echo Hello, world!
Hello, world!
```
clearTimeout and clearInterval Are Interchangeable!
Tags: javascript, codenewbie
Published: 2020-07-23 03:05:39

<p>Did you know you can use <code>clearTimeout</code> and <code>clearInterval</code> interchangeably? 🤯</p>

```js
  const myIntervalFunc = setInterval(() => {
    console.log('Hello World');
  }, 100);

  clearTimeout(myIntervalFunc); // clearTimeout works!
```

<p>
This is because both functions will return a random ID which gets saved in the browser's memory but there's no separate group of IDs that are allocated to <code>setTimeout</code> versus <code>setInterval</code>; they're shared. 
</p>
<p> 
It's easy to forget that the return value of these functions is really a numerical ID. You can check it out if you log the variable:
</p>

```js
  const myFunc = setTimeout(() => {}, 0);
  console.log(myFunc); // 1205 (<- This will be random)
```

<p>
And since the parameter to <code>clearTimeout</code> and <code>clearInterval</code> is the ID of the function you wish to cancel, and they're from the same pool of IDs on the window object, both functions will work for either a timeout or interval! 😃
</p>

<p>
  So while you <i>could</i> use these functions interchangeably, I actually wouldn't since you'll probably just confuse others - but it's still cool to know why this works!
</p>

<h3>Links</h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" target="_blank">MDN Article on setTimeout</a>

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
VueJS Là Gì? Những Điểm Đặc Biệt Trong Framework VueJS
Tags: backend
Published: 2020-07-23 02:58:28

Các ứng dụng web ngày càng phong phú, đa dạng và việc nâng cao trải nghiệm của người dùng được xem là một tiêu chí hàng đầu, nhờ vậy Javascript rất được ưa chuộng trong việc kết hợp xây dựng giao diện. Có thể kể đến những framework rất được ưa chuộng như React(phát triển bởi Facebook), Angular(phát triển bởi Google), và nổi lên gần đây chính là Vuejs. Vậy Vuejs là gì? Vì sao Vuejs có thể nổi lên, ngày càng phát triển và cạnh tranh sòng phẳng với những ông lớn như React, Angular? Trong nội dung bài viết này, chúng ta cùng đi tìm hiểu nhé.

Trước khi bắt đầu tìm hiểu xem Vuejs là gì, nếu như bạn chưa quen với lập trình frontend thì không nên bắt đầu vội, hãy tự trang bị cho mình một số kiến thức cơ bản trước đã. Đồng thời, nếu bạn đã có kinh nghiệm với các framework frontend khác(React, Angular,..) thì đó là một điểm cộng để bắt đầu với Vuejs.
http://laptrinhvacongnghe.com/vuejs-la-gi/