teleren/devto huggingface dataset:
Weekly web development resources #105
Tags: weekly, webdev
Published: 2022-01-19 06:40:38



______

##[hue.tools](https://hue.tools)
[![hue.tools](https://wweb.dev/weekly/content/105/huetools.jpg)](https://hue.tools)
A free color mixer, blender, info and modifier tool to mix multiple colors.

______

##[clay.css](https://codeadrian.github.io/clay.css/)
[![clay.css](https://wweb.dev/weekly/content/105/clay.jpg)](https://codeadrian.github.io/clay.css/)
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements.

______

##[Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/)
[![Make Beautiful Gradients](https://wweb.dev/weekly/content/105/make-beautiful-gradients.jpg)](https://www.joshwcomeau.com/css/make-beautiful-gradients/)
An article on how to prevent gradients to be gray and washed-out in the middle.

______

##[Looptap](https://looptap.vasanthv.com/)
[![Looptap](https://wweb.dev/weekly/content/105/looptap.jpg)](https://looptap.vasanthv.com/)
A simple but fun game to waste your time.

______

##[Looka](https://looka.com/)
[![Looka](https://wweb.dev/weekly/content/105/looka.jpg)](https://looka.com/)
 An AI-powered platform to design a logo and build a brand.

______

##[Bladecoder Adventure Engine](https://github.com/bladecoder/bladecoder-adventure-engine)
[![Bladecoder Adventure Engine](https://wweb.dev/weekly/content/105/bladecoder.jpg)](https://github.com/bladecoder/bladecoder-adventure-engine)
A Classic point and click adventure game engine and editor.

______

##[Pixel Distortion Effect with Three.js ](https://tympanus.net/codrops/2022/01/12/pixel-distortion-effect-with-three-js/)
[![Pixel Distortion Effect with Three.js ](https://wweb.dev/weekly/content/105/DistrotedPixels.jpg)](https://tympanus.net/codrops/2022/01/12/pixel-distortion-effect-with-three-js/)
An interactive WebGL pixel distortion effect with lots of possibilities.

______

##[Plock](https://github.com/itsrennyman/react-plock)
[![Plock](https://wweb.dev/weekly/content/105/plock.jpg)](https://github.com/itsrennyman/react-plock)
A responsive masonry layout implementation for React.

______

##[Announcing Parcel CSS](https://parceljs.org/blog/parcel-css/)
[![Announcing Parcel CSS](https://wweb.dev/weekly/content/105/parcel.jpg)](https://parceljs.org/blog/parcel-css/)
A new CSS parser, compiler, and minifier written in Rust.

______

##[falso](https://github.com/ngneat/falso)
[![falso](https://wweb.dev/weekly/content/105/falso.jpg)](https://github.com/ngneat/falso)
A library to create massive amounts of fake data in the browser and NodeJS.

______

##[Simple.css](https://simplecss.org/)
[![Simple.css](https://wweb.dev/weekly/content/105/simple-css.jpg)](https://simplecss.org/)
A classless CSS framework that makes semantic HTML look good.

______

##[Godly](https://godly.website/)
[![Godly](https://wweb.dev/weekly/content/105/godly.jpg)](https://godly.website/)
Godly is a curation of web design inspiration, with  e-commerce websites, portfolio websites, and animation websites.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
What’s e-learning automation?
Tags: beginners, css, javascript
Published: 2022-01-19 06:31:05

E-learning automation automates tasks related to online learning. These include but aren’t limited to:

- Feedback and Grading
- Communication and peer assessment
- Faculty and administration support
- Online learning activities

Automation is easy and affordable thanks to technologies like machine learning (ML), natural language processing (NLP), and other such tools. They enable faculty to create learning objectives and automatically generate assessments for students. Administrative personnel can also set up automatic notifications.
let's kick start to build e-commerce website using java Full Stack
Tags: java, beginners, webdev, mongodb
Published: 2022-01-19 06:28:42

Iam really more fascinated to kick start the new series for e-commerce website. technologies Iam Gonna use is.
**1.SpringBoot
2.Html
3.Thymleaf
4.JavaScript
5.MongoDB
6.Css**

main motive for me to do this series is to build a strong knowledge in the above mentioned language and also share my knowledge, Ideas to others that's all. so if any doubts or if you like to share your idea to me please contact me through {Muhammedriyas6262@gmail.com} mail id.

Iam gonna upload codes from tomorrow..
I'm a Senior Software Engineer at Uber! Quick tips that helped me get hired
Tags: webdev, career, beginners
Published: 2022-01-19 03:04:59

I recently started a new [job at Uber](https://www.linkedin.com/in/feporto/), and there are many useful tips that can help you get a job in a big tech company.

 **Language**: Pick the language in which you are more comfortable and brush up on some fundamentals. Uber has a [predefined tech stack](https://eng.uber.com/tech-stack-part-one-foundation/), but you can choose your preferred language for interviews. I did my testing with JavaScript, therefore [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) was my starting point.

**System Design**: Educative recently published an article that covers the [System Design fundamentals](https://www.educative.io/blog/complete-guide-to-system-design). 

**Algorithms and Dynamic Programming**: [This video from freeCodeCamp](https://www.youtube.com/watch?v=oBt53YbR9Kk), even lengthy, is a great starting point.

**Behavioral interviews**: Remember some situations when you helped your team in resolving issues, dealing with conflicts, or mentoring other software engineers. To learn the best way to answer the questions, watch the youtube channel [Self-Made Millennial](https://www.youtube.com/c/SelfMadeMillennial).
Top 10 Magento 2 Quotation Extension For 2022
Published: 2022-01-19 06:09:51

The Magento 2 Quotation Extensions is a useful and entirely necessary tool for any kind of business. You can use it to provide price quotes for your clients, get leads for an email list, and so on.

Finding the right Magento 2 Quotation extension amongst thousands of options is a tough job. And even if you do find something, it could be riddled with bugs and other errors, meaning you have to start from scratch anyway.

But, the good news is, We’ve collected the top 10 Magento 2 Quotation extensions, out of hundreds in the market.

# What Is The Purpose Of Using Magento 2 Quotation Extension?

The goal is to simply offer a complete and flexible source of quoting for the Magento 2 platform. Magento 2 Quote Extension helps online stores take orders quickly and accurately.

It enables real-time interaction between your business and potential customers right when they are thinking about buying your product. This way, you can build a truly personal experience and retain more customers.

It also encourages higher sales because it is helping people make decisions faster, which means they are more likely to convert on the spot.

If you are interested in promoting your store’s products and reaching a wider audience, we will be happy to share these Magento 2 Quotation extensions with you.

## Top 10 Magento 2 Quotation Extensions

This collection will give you a full overview of the best Quotation extensions for Magento 2. Based on our review, we recommend these as the best extensions for you. 

1. Request For Quote | Solwin Infotech

Magento 2 Request For Quote extension offers an easy way to allow your customers to submit quotation requests for multiple products at once. Customers can negotiate price and contact you with one click, putting them back in control of the buying process.

It is a better user experience than Magento 2 default quote/invoice page; it also increases conversion rates as your customer can make multiple requests directly with one click without leaving your site.

Source URL: [https://www.solwininfotech.com/blog/magento-2-quotation-extensions/](https://www.solwininfotech.com/blog/magento-2-quotation-extensions/)
VsCode Shortcut - Open New Terminal Here
Tags: vscode, worknote
Published: 2022-01-19 06:02:57

<sub><sup>Photo by <a href="https://unsplash.com/@yancymin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Yancy Min</a> on <a href="https://unsplash.com/s/photos/vscode?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></sup></sub>

## Scenario

Sometimes you want to open a terminal at the place of the current file folder you are working on, and do it fast and easily.

In vscode, you needed to go to the folder at the tree view and select the option `Open in integrated terminal`.

This invloves mouse work.

## Solution

Instead, VsCode is exposing a new command [newWithCwd](https://github.com/microsoft/vscode/blob/00b535ca43cc93f43b9599cd5f6e62a20569af0e/src/vs/workbench/contrib/terminal/browser/terminalActions.ts#L1221) that allow to bind keys to open new terminal in the current file path.

```json
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.newWithCwd",
    "args": {
      "cwd": "${fileDirname}"
    }
  }
```

## References

[stackoverflow](https://stackoverflow.com/questions/55668151/how-to-change-the-terminal-to-the-current-directory-in-visual-studio-code-hot/58311671#58311671)
[File Format Verification] With Elixir
Tags: elixir, tutorial, programming, functional
Published: 2022-01-19 05:32:54

&nbsp;
&nbsp;

{% youtube 7gfzNfI9NAg %}

&nbsp;
&nbsp;


Let's handle file name extensions with Elixir, useful to validate the type of format of files that we would like to allow.

### Step 1:

Let's create a new Elixir project by going to the command line and typing the following in your desired directory:

`$ mix new file_validator && cd file_validator`

### Step 2:

Open your test file `test/file_validator_test.exs`, remove the autogenerated test and add the following test:


```elixir
  test "file validation should be false" do
    file = "somefile.exe"
    assert FileValidator.valid?(file) == false
  end

  test "file validation should be true" do
    file = "somefile.png"
    assert FileValidator.valid?(file) == true
  end
```

Go to the command line and run the test `mix test`

### Step 3:

Let's make our test pass by opening our main project file `lib/file_validator.ex`, remove the autogenerated hello world function and add the following:

```elixir
  @extension_whitelist ~w(.jpg .jpeg .gif .png .pdf)

  def valid?(file) do
    file_extension = get_ext(file)

    @extension_whitelist
    |> Enum.member?(file_extension)
  end

  defp get_ext(file) do
    file
    |> Path.extname()
    |> String.downcase()
  end
```

Get back to the command line and run the test `mix test` now our test should pass with no failures.

### Code Breakdown

#### @extension_whitelist ~w(.jpg .jpeg .gif .png .pdf)

The `@` symbol means that is a module attribute, that can be used as a constant throughout our module.

The ~w sigil is used to generate lists of words(words are just regular strings). Inside the ~w sigil, words are separated by whitespace.

#### Path.extname(path)

Returns the extension of the last component of the path of a string.

#### Enum.member?(list, element)

Checks if an element exists within the list.

## Conclusion

That's a pretty simple and straightforward way to validate a file format, by getting the extension from the string with `Path.extname(path)` and passing it to `Enum.member?(list, element)` along with a whitelisted list of allowed file extensions. Thank you so much for your time, I really appreciate it.


&nbsp;
&nbsp;


[![Join The Elixir Army](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv2q172ztuekdtw82vo9.png)](https://elixirprogrammer.com)
Self-Taught Developer Journal, Day 43: TOP DOM Manipulations and Events Practice Knowledge Check
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-19 05:04:37

Today...

## Knowledge Check
**What is the DOM?**
The DOM, or Document Object Model, is a tree-like representation of the contents of a webpage.
**How do you target the nodes you want to work with?**
You use a combination of CSS-style selectors and relationship properties along with the DOM method, querySelector, to target the nodes you want.
**How do you create an element in the DOM?**
You use the DOM method, createElement, to create an element in memory.
**How do you add an element to the DOM?**
You use the DOM methods, appendChild (for adding to a parent node) or insertBefore (for adding a node into a parent and before reference node).
**How do you remove an element from the DOM?**
You use the DOM method, removeChild.
**How can you alter an element in the DOM?**
You can alter an element by create a reference to the node using the createElement method.
**When adding text to a DOM element, should you use textContent or innerHTML? Why?**
You should use textContent because innerHTML is vulnerable to security risks like JavaScript injections.
**Where should you include your Javascript tag in your HTML file when working with DOM nodes?**
The end of the script or linked to an external file in the head tag. The DOM nodes needs to be parsed and created before any JavaScript DOM methods can execute.
**How do “events” and “listeners” work?**
Events are actions performed on the webpage or DOM. Then listeners are listening for these events to occur and reacting to them.
**What are three ways to use events in your code?**
Attach function attributes directly on the HTML element, set the "on_event_" property on the DOM object in JavaScript, or attach event listeners to the nodes in your JavaScript
**Why are event listeners the preferred way to handle events?**
We maintain a separation of concern and can use multiple event listeners.
**What are the benefits of using named functions in your listeners?**
They are more organized and easier to reuse.
**How do you attach listeners to groups of nodes?**
Use querySelectorAll to get a group of nodes or nodelist then iterate through them and attach an eventListener to each node
**What is the difference between the return values of querySelector and querySelectorAll?**
querySelector returns a specific nodes while querySelectorAll returns a nodelist.
**What does a “nodelist” contain?**
A nodelist is an Array-like list of nodes.
**Explain the difference between “capture” and “bubbling”.**
Capturing is the top-down selection of elements to the target element while bubbling is the bottom-up selection of elements to the target element. They are both phases of Event Propagation which occurs when an event is performed on the webpage.

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
100 Days of Learning - Days 7 - 14
Tags: 100daysoflearning
Published: 2022-01-19 04:26:10

---
series: 100 Days of Learning
---
Today's post will be a little different. The past week has been a little crazy for me - I took 6 days off work, and on day one I started feeling sick. Perfect timing, ha. I was only unwell for a few days, probably some kind of cold (thankfully, I tested negative for COVID and the flu!), but it disrupted my flow of how I usually spend my days off.

I didn't end up spending any time revisiting any coding last week, and I'm perfectly happy with that.

I did however, end up spending my time learning video editing! I even published my first Youtube video! However, my Youtube channel isn't dev- or tech-related, so I likely won't share it here. I am proud of the effort I've put into learning these skills just the same.

I am also considering moving this blog away from DEV.to and instead hosting it elsewhere, since I expect my learning focuses to meander between coding and other topics. I'm not sure that this is the best place to continue posting, but it was the easiest way to get me to actually start.

Thanks for joining me, I'll be back to learning SQL and JavaScript very soon.

---
Photo by <a href="https://unsplash.com/@timmossholder?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tim Mossholder</a> on <a href="https://unsplash.com/collections/xj3Y8-lHOXo/dev-blogs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Error on appleboy/ssh-action. dial tcp: lookup example.example on 192.0.2.1:53: i/o timeout
Tags: githubaction, appleboysshaction
Published: 2022-01-19 04:24:23

## Problem

One day, I get Error like below.

```
2022/01/18 22:51:31 dial tcp: lookup example.example on 192.0.2.1:53: read udp 192.0.2.2:37138->192.0.2.1:53: i/o timeout
```

[i/o timeout · Issue #32 · appleboy/ssh-action](https://github.com/appleboy/ssh-action/issues/32)

I found this nearly issue. But error in this issue is about `22` port. 

My error is about `53` port.

Just be sure, I recreate and replace ssh key. But Problem was not solved.

## How to solve it

I think it is related to DNS, so I change host address from domain name to IP address.

And then, pipeline finished successfully.

I don't know cause, but problem was solved.

```
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USER }}
        key: ${{ secrets.KEY }}
        port: 22
```

## Additional Information

* I replaced actual IP address and domain name to example IP address and domain name.
And what now?
Tags: react, beginners, webdev, discuss
Published: 2022-01-19 04:23:43

I'm a junior fullstack developer in the MERN stack, i not have creativity for making good posts but i try it.

I have knowledges of the basics of react like hooks, custom hooks, components, etc.

But, what now?, I have no creativity for making projects and the one that i make don't convence me at all, i heard for platforms of challenges, but they don't catch my attention, can you recommend me steps?
How to Work with the Syncfusion React MultiSelect Dropdown
Tags: react, reactnative, webdev
Published: 2022-01-19 04:23:07

Learn how easily you can create and configure the Syncfusion [React MultiSelect Dropdown](https://www.syncfusion.com/react-ui-components/react-multiselect-dropdown) using the create-react-app command. This video also explains how to configure a few of the control’s basic features like binding data and customizing pop-up height and width. 

Download an example from GitHub: https://github.com/SyncfusionExamples

Refer to the documentation for the Syncfusion MultiSelect Dropdown Component: https://ej2.syncfusion.com/react/documentation/multi-select/getting-started/

Check out this online example of the React MultiSelect Dropdown Component: https://ej2.syncfusion.com/react/demos/#/bootstrap5/multi-select/default

{% youtube mJyXh99THzQ %}
I created Facebook clone using Tailwind.
Published: 2022-01-19 04:12:00


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

I created a Facebook login page clone using Tailwind CSS. Tailwind CSS is a powerful framework to design awesome responsive sites. I have to use Tailwind in a Express project but I don't know how to use it. So please tell me how to use Tailwind with Express. Also comment down how is my Facebook clone.
Firefox Reader mode in your Terminal
Tags: terminal, focus, read, web
Published: 2022-01-19 03:52:17

I'm trying to move to more text based workflows.

On that journey, I came across `readable`

`readable` strips out just the readability code from mozilla's firefox engine and provides it as a node module.

`npm install -g readability-cli` will install a script called `readable`

By default, readable will strip out all the non-essentials from the webpage and create another HTML page.

One can not use it as-is, cause it has all the HTML tags. So one needs a browser.

Since we are already in terminal why not use `w3m` ?

Here is how I use it.

`readable https://microblog.desipenguin.com/post/fzf-with-fish/ | w3m -T text/html`

and here is how it looks 😄


![microblog in terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0qbs4ly2s5v3z9qdav0.png)

-----

On a related note, w3m official homepage asks one to download tarball.

But your OS's package manager probably has w3m. So I suggest use that instead.

FWIW, I used `brew install w3m` on macOS.
Laravel 8 Remove/Hide Columns While Export Data In Datatables
Tags: laravel, laravel8, datatable, jquery
Published: 2022-01-19 03:46:51

In this tutorial we will see how to remove / hide columns while export data in datatables in laravel 8. When we are using jquery datatable for displaying data in datatable and export datatabel information into PDF, Excel or CSV file we might be exclude or hide some columns. Using jquery you can remove column while export data in laravel datatable or exclude column from export data in datatables.

So, In this example I will give you demo how to remove / hide columns while export data in datatables in laravel 8 using jquery.

In this example the copy button will export column index 1 and all visible columns, the Excel button will export only the visible columns and the PDF button will export column indexes 1, 3 and 5 only and other datatable hide column.

Column visibility controls are also included so you can change the columns easily and see the effect of the export options.
 
```
$(document).ready(function() {
    $('#demo').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 1, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [ 1, 3, 5 ]
                }
            },
            'colvis'
        ]
    } );
} );
```

---

> **_[Read Also : Laravel 8 Create Custom Helper Function Example](https://techsolutionstuff.com/post/laravel-8-create-custom-helper-function-example)_**
Awesome method to create a NextJS project.
Tags: react, nextjs, javascript, webdev
Published: 2022-01-19 03:23:15

## Why NextJS?
If you work today with web development, have chances that you listened about NextJS. NextJS comes with powerful Sever-Side Rendering (SSR), and Static Site Generation (SSG) capabilities built-in.

Using NextJS you spend more time writing features, and less time struggling with build tools and Webpack. 💥

He have a very great structures of into pages to doing routing to your project and combine with a improved search engine optimization is a great framework to build a frontend project.

## Chakra UI, why it?

[chakra UI](https://chakra-ui.com/) is a very great component library for building React applications. That is super easy to us developing while also taking care of accessibility.

I love the themes that chakra have, by create a color pallet and can automatically create states for hover, active, disabled, etc. As well as be able to build and change themes, like a light theme, and dark theme in very easy form.

Moreover the form of use Styled System, simplifying use of inline styliing with style props, provides shorhand versions of commomn, like margin as 'm' and padding as 'p, and facilitating write codes responsive . 

```
<Text
   fontSize={["1.4rem","1.75rem"]}
   fontWeight="700"
   color="purple.900"
   w={["90%","100%"]}
   lineHeight="1.5rem"
   mb="4"
>
   Hello World!
</Text>
```

After all, I say that Chakra UI is the best design system to create my projects, all the functionality that is offered help me in create great projects in less time.


## Start a Project 🚀
NextJS have a lot types of exemples to start your project, and if you need create a front-end project with [chakra ui](https://chakra-ui.com/) and typescript, just use this command.

Using create-next-app execute with npm or yarn this exemple:

```
npx create-next-app --example with-chakra-ui-typescript blogproject
or
yarn create next-app --example with-chakra-ui-typescript blogproject
```

so now, you have a great base to start your projects.


![base project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irdotyttcewnzc034crg.jpg)

This is a great form to create a new projects, and start use NextJS and adventuring create awesome interfaces. And if you want others exemples 🚀 from NextJS, you can in this [link](https://nextjs.org/examples).