teleren/devto huggingface dataset:
Weekly web development resources #86
Tags: weekly, webdev
Published: 2021-09-08 06:55:40

Back from a 2 weeks holiday - here is the new weekly :)



______

##[OpenMoji](https://openmoji.org/)
[![OpenMoji](https://wweb.dev/weekly/content/86/openmoji.jpg)](https://openmoji.org/)
A website with open-source emojis for designers and developers.

______

##[Buttons Generator](https://markodenic.com/tools/buttons-generator/)
[![Buttons Generator](https://wweb.dev/weekly/content/86/buttons-generator.jpg)](https://markodenic.com/tools/buttons-generator/)
A list of CSS styles for buttons for copy-pasting.

______

##[Note Garden](https://notegarden.web.app/)
[![Note Garden](https://wweb.dev/weekly/content/86/notes.jpg)](https://notegarden.web.app/)
A writing tool to optimize your learning process while taking notes.

______

##[Devboard](https://devboard-prototype.azurewebsites.net/)
[![Devboard](https://wweb.dev/weekly/content/86/devboard.jpg)](https://devboard-prototype.azurewebsites.net/)
A realtime collaborative whiteboard made for developers.

______

##[couleur.io](https://couleur.io/)
[![couleur.io](https://wweb.dev/weekly/content/86/couleur.jpg)](https://couleur.io/)
A simple tool to help you create harmonizing color palettes.

______

##[Bioicons](https://bioicons.com/)
[![Bioicons](https://wweb.dev/weekly/content/86/bioicons.jpg)](https://bioicons.com/)
A website for high quality science illustrations.

______

##[React-Toastify](https://github.com/fkhadra/react-toastify)
[![React-Toastify](https://wweb.dev/weekly/content/86/toastify.jpg)](https://github.com/fkhadra/react-toastify)
A simple react library for adding notifications to your project.

______

##[UI cheat sheet: Spacing friendships](https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407)
[![UI cheat sheet: Spacing friendships](https://wweb.dev/weekly/content/86/spacing.jpg)](https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407)
A nice article on how to approach spacing in web design.

______

##[Awesome Actions](https://github.com/sdras/awesome-actions)
[![Awesome Actions](https://wweb.dev/weekly/content/86/actions.jpg)](https://github.com/sdras/awesome-actions)
A curated list of awesome things related to GitHub Actions.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
A lightweight way to realize data visualization in 5 mins
Tags: database, datascience, python, analytics
Published: 2021-09-08 06:47:16

Are you still using Python library like Panadas, Seaborn, Altair and Bokeh to do data visualization? Too old-school, somehow too strong. It’s time to learn a more efficient and lightweight way to speed up.

Apache Superset is a modern, enterprise-ready business intelligence web application with intuitive interface for datasets and crafting interactive dashboards, beautiful showcase style, and so many other impressive features.

It’s seamless connected with cloud native architecture, such as using Alibaba Cloud ApsaraDB as its backend, especially suitable for data exploration analysis enabling you focus more on data insights.

Now, let’s learn how to let your data talk in 5 mins.👇
[Watch On YouTube >](https://youtu.be/C0uFuVD0vHw)
[![](https://github.com/alibabacloud-howto/opensource_with_apsaradb/raw/main/apache-superset/images/worldbank_dashboard.png)](https://youtu.be/C0uFuVD0vHw" type="video/mp4)


Find us at GitHub:
[Alibaba Cloud Database How To >](https://marketplace.alibabacloud.com/products/56698003/Data_Exploration_and_Visualization_Platform_for_em_Superset_em_-sgcmjj00025684.html?&innerSource=search_superset)
Laravel 8 with React(JS)
Tags: php, laravel, react
Published: 2021-09-08 06:13:23

First and foremost, we must establish a Laravel 8 application.

```
composer create-project laravel/laravel react-app
cd react-app
```
## Back-End
Follow the instructions here to set up the back-end for Inertia.js.

```
composer require inertiajs/inertia-laravel
```
Create a Root template with the following contents in resources/views/app.blade.php

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>
```
Create a route in routes/web.php

```php
use Inertia\Inertia;

Route::get('home', function(){
  return Inertia::render('home');
});
```
> Note: We haven't constructed the Home component yet, which is specified in the render method.

## Front-End
Let's get our front-end up and running by following the instructions provided.

We'll begin with a collection of installations:

```npm
npm i react-dom

npm install @inertiajs/inertia @inertiajs/inertia-react

npm i jsconfig.json
```
Initialize our Inertia app like below inside resources/js/app.js:

```react

import { InertiaApp } from '@inertiajs/inertia-react'
import React from 'react'
import { render } from 'react-dom'

const app = document.getElementById('app')

render(
  <InertiaApp
    initialPage={JSON.parse(app.dataset.page)}
    resolveComponent={name => import(`./pages/${name}`).then(module => module.default)}
  />,
  app
)
```

Create our Home component at resources/js/pages/home.js
```react

import React from "react";

const Home = () => {
    let parameter1 = "React";
    let parameter2 = "laravel 8";

    return (
        <h1>
            Hello {parameter1} + {parameter2}
        </h1>
    );
};

export default Home;
```

Lets install babel/preset-react as dev dependency.
```
npm install --save-dev @babel/preset-react
```

Create a .babelrc file at root of our project with following contents:
```
{
  "presets": ["@babel/preset-react"]
}
```
Test Our Project
```
npm run dev

php artisan serve

```
HTML tags | samp
Tags: html, tags, samp
Published: 2021-09-08 06:11:10

It is used to **represent the output offered by a computer program**.

If you need an element to serve as a container for the output generated by your own site, use `<output>` instead of `<samp>`.

It can be combined with `<kbd>` in the ways discussed in the previous entry.

Normally browsers render them using their default monospaced font, although you can customize the style using CSS.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp) | [Support](https://caniuse.com/mdn-html_elements_samp)
Where to start
Tags: gamedev, codenewbie, beginners
Published: 2021-09-08 06:08:48

My programming journey began with studying BCom Informatics (Information Systems) back in seemingly the dark ages of studying computing, where you did not have much choice in your field of study. I was mainly interested in game development, but my first introduction to programming was with COBOL and C++. These days academic institutions provide study programs geared towards game development.

As a new developer, you may hear that *"C++ is the language that the pros use."*, and therefore you should use it too. But do not start with C++ unless you're an experienced developer. Because sometimes using what the pros use isn't the right thing to do. The first language you learn shouldn't have a steep learning curve. With more knowledge and experience under your belt, you'll be able to transition to whatever the pros use. You might also feel tempted to jump straight in a game engine, but you're going to get stuck often and hit frustrating roadblocks. You first need to learn the basics of programming to build a solid foundation.

I recommend starting with [Python](https://www.python.org/).  Learn to make games with any of the dominant Python game libraries, [Pygame](https://www.pygame.org/), [Cocos2D](http://cocos2d.org/#cocos2dpy), [PYGLET](http://pyglet.org/), [Panda3D](https://www.panda3d.org/), or [OGRE](https://www.ogre3d.org/). Python is easy to learn, and there's a lot of resources available. It is also the most commonly used language for scripting, automation, and developing plugins for graphic applications. Move to the [Godot Engine](https://godotengine.org/) once you have a good understanding of Python, then GDScript will make a lot more sense. 

My second recommendation would be to start with C# and learn to make games with [MonoGame](https://www.monogame.net/). C# is a modern, easy-to-learn derivative of C++ that has a higher learning curve than Python.  Again, once you have a good understanding of C#, you'll have an easy transition to [Unity](https://unity.com/).

Because of its multidisciplinary nature, game development can feel overwhelming at first. To make games alone or as part of a small team, you'll need to learn game design and programming. That's a lot to tackle all at once! Be patient and enjoy the journey. Start small, focus on code and design separately, honing each skill you need on its own.
How to create a MongoDB full text index
Tags: mongodb, node, codever, snippets
Published: 2021-09-08 05:59:42

When you are searching your code snippets on [Codever](https://www.codever.dev), depending on the search terms you use, relevant results are displayed. Behind this there is a MongoDb full text search index. Let's see how it is created and used.

Full text search is supported in Mongo by using a text index. **Text** indexes can include any field whose value is a string or an array of string elements, to which you can give weights. For a text index, the weight of an indexed field denotes the significance of the field relative to the other indexed fields in terms of the text search score.

```javascript
db.snippets.createIndex(
  {
    title: "text",
    tags: "text",
    "codeSnippets.comment": "text",
    "codeSnippets.code": "text",
    sourceUrl: "text"
  },
  {
    weights: {
      title: 8,
      tags: 13,
      "codeSnippets.comment": 3,
      "codeSnippets.code": 1,
      sourceUrl: 1
    },
    name: "full_text_search",
    default_language: "none",
    language_override: "none"
  }
);
```

For each indexed field in the document, MongoDB multiplies the number of matches by the weight and sums the results. Using this sum, MongoDB then calculates the score for the document. You then can use the  [$meta](https://docs.mongodb.com/manual/reference/operator/aggregation/meta/) operator for details on returning and sorting by text scores, as in the snippet below:

```javascript
let getPublicBookmarksForSearchedTerms = async function (nonSpecialSearchTerms, page, limit, sort, specialSearchFilters, searchInclude) {

  let filter = {
    public: true
  }

  if ( nonSpecialSearchTerms.length > 0 ) {
    if(searchInclude === 'any') {
      filter.$text = {$search: nonSpecialSearchTerms.join(' ')}
    } else {
      filter.$text = {$search: bookmarksSearchHelper.generateFullSearchText(nonSpecialSearchTerms)};
    }
  }

  addSpecialSearchFiltersToMongoFilter(specialSearchFilters, filter);

  let sortBy = {};
  if ( sort === 'newest' ) {
    sortBy.createdAt = -1;
  } else {
    sortBy.score = {$meta: "textScore"}
  }

  let bookmarks = await Bookmark.find(
    filter,
    {
      score: {$meta: "textScore"}
    }
  )
    .sort(sortBy)
    .skip((page - 1) * limit)
    .limit(limit)
    .lean()
    .exec();

  return bookmarks;
}
```

<hr>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/5f0a9035fedd4b056f5e0774/details).  &nbsp; :point_right:  use the [**copy to mine**](https://www.codever.dev/snippets/5f0a9035fedd4b056f5e0774/details) functionality to add it to your personal snippets collection.
Why Chakra UI design systems is popular. What lessons can you learn from it?
Tags: chakraui, developer, dx, designsystem
Published: 2021-09-08 05:58:34

---
title: Why Chakra UI design systems is popular. What lessons can you learn from it?
published: true
description: Developer experience with the Chakra UI design system.
tags: chakraui, developer, dx, designsystem
---

When writing this blog post, chakra UI has 488 K monthly downloads with 20.4k Github starts. So I took a deep dive into what makes it great. Here are my key takeaways.


## Time for value 
You can see UI components in action on the landing page of Chakra UI; You don't need a special setup to test it. [Chakra UI](https://chakra-ui.com/).  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16g5i84bncrw2jnvqpiz.png)
 

## Onboarding 
The great [getting started guide](https://chakra-ui.com/docs/getting-started) is from the Frontend developer perspective, not only talks about the import Chakra UI components and installs the dependency. In addition, it explains how to use Chakra UI with the most commonly used Reactjs bootstrapping solutions - `create-react-app`, `Next.js` and `Gatsby`. 

It comes with getting started video as well. I prefer video tutorials to get started examples, and I can watch with 2x speed. 

## Developer experience 
In addition to UI components, it also gives you the Hooks for managing Ui components functionality, making it developer more efficient. [Chakra UI hooks](https://chakra-ui.com/docs/hooks/use-boolean)
{% twitter 1429097365563052034 %}

## Community 
You are not alone, a massive community behind it. With great sponsors and contributors. [Chakra UI team](https://chakra-ui.com/team)

Do you know any other design systems you like with excellent developer experience?
How to send POST Request in Rest Assured - Part 5
Published: 2021-09-08 05:45:26

In the previous blog, we covered the basic terminology that we will be using during rest assured testing. We also learned how to setup Rest Assured JAR or maven dependency in our project.

Rest Assured supports all the HTTP methods like GET, POST, PUT and DELETE. Here GET stands for Read operation, POST stands for Write operation, PUT stands for Update operation and DELETE stands for Delete operation.

###Once you have the import of REST Assured set up, add the following static imports to your test class:

import static io.restassured.RestAssured.*;
import static org.hamcrest.Matchers.*;

###Now let's look at an example of POST Request using Rest Assured
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jtibd9mydg1gbfnirtw.png)

###1.Set URI:
First we need to set the base uri of our api.. The base url without the resource is represented by uri. In our case, the full url is http://localhost:3000/comments, and the uri is http://localhost:3000/, with comment as the rescue name.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6axo9cj1n92bzlw8y545.png)

###2. Call post method

In the post method, we begin with the Given method and specify the data to be added as a String in the body method. We simply add a check ‘contentType(ContentType.JSON)‘ to make sure that the response we get is in JSON format and under POST method we specify the path '/comment'

###3.Validate Response Code  

Validating http status code of the response is quite easy using Rest Assured. The method statusCode() takes an integer as input and validate against the response code. If the status code is not matching with the actual one, then the test case will fail. Any validation we want to perform can be written after .then().

### 4.Rest Assured – Validate Response Content

Validating response content from the JSON response is quite easy using rest assured. Check below the way we are validating the comment from the JSON response.
Here the function body takes 2 parameters. First one is the path to the field which we want to validate. In this case, it is the comment. Here we are using org.hamcrest.CoreMatchers.equalTo() method as well to compare the content against expected response. Also notice that we have combined the status code validation and response body validation together.

### 5. Number Validation Using Rest Assured
We can use the same equalTo method to validate numbers as long as they are integers. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sp0wvve3sqghw7dyx83r.png)

###Below is the output after code execution 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkvgwp69igchz9frm5cy.png)
React - Combining useMemo and Switch
Tags: react, javascript
Published: 2021-09-08 05:43:52

useMemo is a react hook that gets executed only if any of the dependency changes. We can make it work like a switch by returning an object whose key will be the switch expression. 

```js
const Form = () => {
    switch(selectedUser){
        case "Admin" : return AdminForm;
                       break;
        case "User" : return UserForm;
                      break;
    }
}
//*AdminForm and UserForm are functional components

//This code is equivalent to 
const Form = useMemo(()=>{
   return { 
      "Admin" : AdminForm,
      "User" : UserForm,
   }[selectedUser];
},[selectedUser]);

/*
Breaking this down, if selectedUser is "Admin", we would return 
   { 
     "Admin" : AdminForm,
     "User" : UserForm,
   }["Admin"];
which is AdminForm.
*/
```
Here, Form gets executed only when selectedUser changes, so the expression need not be evaluated every time. This method allows us to optimise the expression evaluation as switch needs to execute it every time but useMemo doesn't.
How to center a div in just 4 lines of code!!!
Tags: html, css
Published: 2021-09-08 05:41:32

Hey coders, Let's add a empty container in center of web page in just 4 lines of code.

1.First we need index.html and 
  a style.css.
2.Let's create a empty div in 
  index.html file. And give 
  demo as class name.
![Div tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/893khym1hqkx9grbjent.jpg)

3. Now give some style to this 
   empty div to we can see it.
![style demo class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk6sl1y7xnmu0zotvu3x.jpg)

4. Let's get it in center vertically and also horizontally in just four lines of code. 
5.Code is below 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0isg9qabt8yh0654dqqf.jpg)

6.Stay tuned with me I am sharing all my trick and tips.
 🙏 Thank you for reading 
 👆 If you like this then hit 
 👍 Like button
JS Coding Question #7: Classic Fizz Buzz (one-liner 🤯)
Tags: challenge, javascript, tutorial, career
Published: 2021-09-08 04:49:33

---
title: JS Coding Question #7: Classic Fizz Buzz (one-liner 🤯)
published: true
description: Front end job interview question, Fizz Buzz
tags: challenge, javascript, tutorial, career 
cover_image: https://images.unsplash.com/photo-1602992708529-c9fdb12905c9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80
series: Job Interview Preparation Materials
---

#### Interview Question #7:
Write a function that will print from 1 to 100. Print 'fizz' for multiples for 3. Print 'buzz' for multiples of 5. Lastly, print 'fizzbuzz' for multiples of 3 and 5.🤔

> If you need practice, try to solve this on your own. I have included 2 potential solutions below. 

> Note: There are many other potential solutions to this problem.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

Code if you want to play around with it: https://codepen.io/angelo_jin/pen/MWobgqj

#### Sample Output:
![fizzbuzz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0e5hroztch6am2eznzb.png) 

#### Solution #1: if-else (Recommended)
- A straight-forward approach using the good old if-else statements. It is nice because it is easy to implement and you can code this while you are explaining to the interviewer what is happening statement per statement.
```js 
  for (let i = 1; i <= 100; i++) {
    // Is the number a multiple of 3 and 5?
    if (i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } else if (i % 3 === 0) {
      // Is the number a multiple of 3?
      console.log('fizz')
      // Is the number a multiple of 5?
    } else if (i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i) 
    }
  }
```

#### Solution #2: Nice, fancy one-liner
- I would stay away from this on an actual interview as you would look like a leetcode material/master. You may mention that you saw a one-liner solution using couple of ternary and you are aware. Might get a bonus for that.

```js
  for(let i=0;i<100;)console.log((++i%3?'':'fizz')+(i%5?'':'buzz')||i)
```

Happy coding and good luck if you are interviewing!

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)


In case you like a video instead of bunch of code 👍😊
{% youtube IEluJCkOMvc %}
Orange Dot Patterned Position Opposition
Tags: css, basecs
Published: 2021-09-08 04:39:17

{% codepen https://codepen.io/cloneableteam/pen/BaZpWBL %}

### Only free to use
```css 
body {
  background: crimson;
  background-image: radial-gradient(circle,
  darkorange 46%, transparent 10%), 
  radial-gradient(circle, orange 
  46%, transparent 10%);
  background-size: 50px 100px;
  background-position: 0 0, 40px 60px;
}
```
Is Open Source really that great for developers?
Tags: opensource
Published: 2021-09-08 04:22:53

*Disclaimer: I don't mean to say open source is bad.*

TL;DR: I was told that open source development can bring out the best in each programmer. I'm excited to discover that by contributing to the community this semester.

## Preface
My first Github repository was a Github-driven trojan written in Python. Simply put, the trojan pulls the Python modules, containing malicious code, hosted on a Github repository and runs them. However, I'm pretty sure I couldn't have used it for anything other than educational purposes. Judging by the code, it seems that 17-year-old Oliver forgot to copy some code for the trojan to function normally (smh).

To his naive mind, 17-year-old Oliver probably thought that Github was only for copying others' code (and hosting trojan modules). He didn't realize that it would be his companion on his (hopefully) long-lasting coding career.

## Why I want to try Open Source Development
Now, I'm continuing my journey in Toronto. I'm still copying code from Github, but I've noticed open source projects have more potentials than just that. I heard a lot about the glamorous evolution that most programmers experience while contributing to open source projects. Everything from their technical skills (e.g. programming knowledge, coding style) to their soft skills (e.g. collaboration and communication skills) is improved.

If that's true, I really want to experience that at least once. Therefore, I decided to take the [Open Source Development course](https://www.senecacollege.ca/ssos/findOutline.do?schoolCode=SICT&termCode=20213&subjectCode=OSD600) at Seneca College.

## The project I want to work on
After browsing through some trending repos, I'm looking forward to contributing to [Krita](https://github.com/KDE/krita) in the upcoming weeks. It's a cross-platform application for digital painting.

I love this project because of its welcoming and detailed guidelines for contributors. Additionally, I enjoy using it in my daily life, so I'm more eager to dive into its codebase and help with the development and maintenance of this project.
<hr />
I feel that this is going to be an exciting journey. I'll keep you posted  Why don't you join in? Feel free to reach out to me if you want to discuss about the project or open source in general via email (oliverptpham@gmail.com) or [LinkedIn](https://www.linkedin.com/in/oliver-pham/).
How To Get Selected Checkbox List Value In Jquery
Tags: javascript, jquery, php, beginners
Published: 2021-09-08 03:31:27

In this post we will see how to get selected checkbox value from checkbox list in jquery, here we will get multiple selected checkbox value using checkbox jquery example, If you have multiple checkbox in table rows at that time we get checked checkbox value in array or string in jquery.

In this example I have added some jquery code , html checkbox and bootstrape cdn and jquery link.

So, let's see how to get multiple checkbox value in jquery.

Output : 

![how to get multiple checkbox value in jquery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2ns0z48t3sb4nkmdyfw.png)

---

> **_[Read More : How To Get Selected Checkbox List Value In Jquery](https://techsolutionstuff.com/post/how-to-get-selected-checkbox-list-value-in-jquery)_**