teleren/devto huggingface dataset:
CxJS went open-source
Tags: opensource, javascript, showdev, webdev
Published: 2021-09-27 11:30:46

CxJS is a now open-source, plug-n-play Javascript framework for developing complex and data-rich applications fast.
It's been in development for 5 years, and now it's free under the MIT license with its set of widgets, charts, themes, demo applications, documentation and tools.
You can read more about it here:
https://blog.codaxy.com/cxjs-goes-open-source-f52fee2a8214
Building a Tailwind CSS badge component
Tags: tailwindcss, tutorial, opensource
Published: 2021-09-27 11:22:36

I've been using Tailwind CSS in a lot of my projects lately and one of the disadvantages that I've found that it does not come with a base set of components that you can use right away.

I've started a series of tutorials on how to build commonly used components with Tailwind CSS and today I want to show you how you can build a badge element.

![Tailwind CSS badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buiz23y45q3mo8ttur0i.png)

## Tailwind CSS badge component

First of all, let's start with the HTML markup. I recommend using a simple `span` element for the badge so that it can easily be added inside other elements as an inline element.

```
<span>Badge text</span>
```

Next up we should make it look like a badge by adding a padding, background color and text color:

```
<span class="bg-blue-100 text-blue-800 px-2.5 py-0.5">Default</span>
```

Now let's also set the text size and font weight of the badge:

```
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5">Default</span>
```

We can make it look nicer by also adding a border radius:

```
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-md">Default</span>
```

Awesome! Now we have created a badge element. However, what if you want to create a slightly larger badge? No problem, all you need to do is increase the padding and font size of the badge.

```
<span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded-md">Default</span>
```

## Badge as a link

You can also easily change the badge component to become a link by changing the `span` element to an anchor tag:

```
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-md">Default</a>
```

## Badge with icon

Sometimes adding an icon can improve a lot in terms of UI and even usability. I recommend using SVG icons for better performance. Here's an example:

```
<span class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md mr-2">
  <svg class="w-3 h-3 mr-1 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
  3 days ago
</span>
```

I hope this tutorial helps you in your journey with Tailwind and your project.

##Tailwind CSS Components Library - Flowbite

This [Tailwind badge component](https://flowbite.com/docs/components/badge/) is part of a larger Tailwind CSS components library that I helped develop. It is open source under the MIT license and it is also published on [Github](https://github.com/themesberg/flowbite) and NPM.

Learn more about Flowbite, a [Tailwind CSS components library](https://flowbite.com/docs/getting-started/introduction/) by following the quickstart guide.
Cypress Basic Learning
Tags: cypressio, javascript, angular, automationtesting
Published: 2021-09-27 11:17:38

<b>What is Cypress</b>
• Cypress is a next generation front end testing tool built for the modern web. We address 
the key pain points developers and QA engineers face when testing modern 
applications. This enables you to write faster, easier, and more reliable tests.
• Cypress is a JavaScript-based tool for frontend testing.
• With it, you can write all types of tests: End-to-end tests, Integration tests, and Unit 
tests. 
Fast, easy and reliable testing for anything that runs in a browser.
<b>Cypress Features</b>
• Time travel: Cypress takes snapshots as your tests run
• Debugging: Readable errors and stack traces make debugging easier
• Automatic waiting: Automatically waits for commands and assertions before moving 
on
• Spies, stubs, and clocks: Verify and control the behavior of functions, server 
responses, or timers
• Network Traffic Control: Control, stub, and test edge cases without involving the 
server
• Screenshots and videos: View screenshots taken automatically on failure, or videos of 
your entire test suite when run from the CLI
• Cross browser Testing: Run tests within Firefox and Chrome-family browsers 
(including Edge and Electron) locally
<b>Pros & Cons</b>
<i>Pros..</i>
• Cypress framework captures snapshots at the time of test execution. This allows QAs or 
developers to hover over a specific command in the Command Log to see exactly what 
happened at that particular step.
• One doesn’t need to add explicit or implicit wait commands in test scripts, unlike 
Selenium. Cypress waits automatically for commands and assertions.
• Auto reload, act as real user
• Uses Mocha as a testing framework & chai is assertion library
• Rich documentation
<i>Cons..</i>
• Only supports Javascript language 
• Only supports css selector
• It doesn’t provide support for multi-tabs
• Cypress doesn’t provide support for browsers like Safari at this moment.
<b>Tech Stack</b>
• Cypress
• VS code
• Javascript Programming
• Mocha framework
• Reports: Mocha Awesome
<b>Installation of Cypress</b>
• Download Node.js from https://nodejs.org/en/download/ as per your operating 
System, as the Cypress is build on the node.js
• Create a folder and import the folder in Visual Studio code editor (or Atom,sublime) and 
open the terminal
• Setup a new npm package : npm init
• Open the terminal and enter npm install cypress --save-dev
• Enter following command to open cypress studio ./node_modules/.bin/cypress open.
• Refer Cypress installation documentation 
https://docs.cypress.io/guides/getting-started/installing-cypress#npm-install
<b>Understanding folder structure</b>
• Fixtures: for all the test data information
• Integration: for writing test cases 
• Plugins: kind of listeners, customized methods to handle cypress events
• Support: for utility methods, like method, is getting used by many test cases. No need 
to import support folder, Cypress will automatically sense the method
• Videos/Screenshots: for running tests

Thanks,
Vital Kumar U
[Linkedin](https://www.linkedin.com/in/vital-kumar-uppuluri/)
How To Make Changes On A Commit In A Pull Request Directly On GitHub's Website
Tags: opensource, tutorial, codenewbie, webdev
Published: 2021-09-27 11:08:12

Hello Fellow Codenewbies 👋,

Not long ago I worked on an issue on a markdown file. After I finished working on it, I pushed a commit and created a pull request.
Then I realized that I missed something, and had to make a fix.

Panicking, my first thought was to close the pull request. Then make the changes locally, push the new commit and create a new pull request.
But in the end, I didn't do that. After asking around, I got an answer. There is a way to make changes directly on [GitHub's website](https://github.com/).
Also, we don't have to close and open a new pull request whenever we want to fix something and commit the changes.

## Steps To Make Changes On GitHub

1. **Go to the pull request**

    On the repo on GitHub, click the `Pull request` tab, and open your pull request.

    ![pull-request-tab-github.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632343610260/6NRAXPyE5.jpeg)

2. **Go to the (last) commit**

    Under the title of your pull request, there are several tabs. Click on the `commits` tab and open the commit. 
  If you have several commits, open the last commit.
  ![click-commit.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632344485076/wgEjoJGV-.jpeg)

3. **Edit file**

    Click the `...` (three dots) button under the commit's message on the right side. It will give you a drop-down, then click `Edit file`. Now you can make your changes there.

    ![click-edit-file.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632346707353/I86sZx88n.jpeg)

4. **Commit changes**

    Now you're done with making the changes. Scroll down to the bottom of the page until you see `Commit changes` input. Write your commit message, and choose one of the two committing options.
  - Commit directly to the `your-project` branch.
  - Create a new branch for this commit and start a pull request.

  Then click the `Commit changes` button.

![commit-changes.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632346854155/dKBb7uDdpZP.jpeg)

And that's it! Now you have made the changes with a new commit 😊.

## Final Words

You can make changes to any type of file directly on GitHub. But unlike markdown, you cannot preview your changes on GitHub.
If you need to run tests and preview the project from files that are not markdown, the best way is to make changes locally. Then push the new commit. 

--- 

Thank you for reading!
Last but not least, you can find me on [Twitter](https://twitter.com/AdiatiAyu). Let's connect! 😊
Java 9 Diamond Operator Improvements
Tags: java, programming
Published: 2021-09-27 11:06:10

Diamond Operator : Before Java 7

Before Java 7, you need to explicitly mention type on both side of the declaration statement.

List<String> list = new ArrayList<String>();
Set<Integer> set = new HashSet<Integer>();
Map<Integer, String> map = new HashMap<Integer, String>();

Diamond Operator : After Java 7

With the introduction of empty diamond operator <> from Java 7, you need not mention type on the right side of the declaration statement. You can leave empty inside the diamond operator. Java compiler automatically determines the type on the right side of the declaration statement.

List<String> list = new ArrayList<>();
Set<Integer> set = new HashSet<>();
Map<Integer, String> map = new HashMap<>();

But, that rule doesn’t apply to anonymous inner classes. Empty diamond operator can not be used with anonymous inner classes.

This issue has been resolved from Java 9.

From Java 9, you can use empty diamond operator <> for anonymous inner classes also.

Source : https://javaconceptoftheday.com/java-9-diamond-operator-improvements/
Pagination and search in vue bootstrap table
Tags: vue, bootstarp
Published: 2021-09-27 07:30:00

Vue is really useful when you want to bring up an application up very soon with very minimal learning curve.

But, when you want to fine tune the application is when you would have to make sure that you are know the finer details (though this can be said for any language/framework)

Lets assume that you have a basic Vue bootstrap table in place with the below tag
```
<b-table
....
  :items="employees"
  :fields="fields"
</b-table>
```

With the data being provided to the above table as shown below

```
data() {
    return {
      fields: [
        { key: 'id', sortable: true },
        { key: 'name', sortable: true, },
        { key: 'delete', label: 'Delete' },
      ],
      employees: [
        {
          id: 101,
          name: 'Sam',
        },
        {
          id: 102,
          name: 'Jane',
        },
      ],
    }
  },
```

Pagination in the above table can be added using the `b-pagination` tag. Lets go ahead and add the basic pagination to the above table
```
<b-pagination
  v-model="currentPage"
  :total-rows="rows"
  :per-page="perPage"
  aria-controls="my-table"
></b-pagination>

```
The `currentPage` will contain the current page the table is in, the `rows` variable will show the total rows in the table and the `perPage` will allow the number of items to be shown per page. 

A simple text box is enough to bring search which can be done using `b-form-input` tag

```
<b-form-input
  v-model="filter"
  type="search"
  placeholder="Type to filter data"
></b-form-input>
```
In the above tag, the `filter` variable will be responsible to filter data in the table.

So, lets link the above pagination and search to the table

```
<b-table
  ...
  :filter="filter"
  :per-page="perPage"
  :current-page="currentPage"
  ...
>

....
....

data() {
    return {
      perPage: 10,
      currentPage: 1,
      rows: 1,
      filter: null,
      ...
    }
  },
```
The above code will bring basic pagination and search to our table. But to make it fully complete, we will need to update the rows count for the table.

Lets do that when the component is getting mounted for the initial state.

```
mounted() {
    this.rows = this.employees.length
  },
```

Now, to update the row count dynamically, lets make use of `filtered` event which also provides with `filteredItems` arguments which is basically an array of items after filtering (before local pagination occurs)

```
<b-table
    ...
    @filtered="onFiltered"
    ...
>
...
...
methods: {
    onFiltered(filteredItems) {
      this.rows = filteredItems.length
      this.currentPage = 1
    },
}
```

The `onFiltered` method updates the current number of rows after filtering and the current page in pagination. These 2 fields are required to be updated dynamically. Failing to do so will show a blank page when filtering from pages other than the first one.
ASP.NET Core Blazor | DataGrid Detail Template
Tags: blazor, webdev, csharp, dotnet
Published: 2021-09-27 11:02:23

In this video we will discuss [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) templates in ASP.NET Core Blazor. Templates give you a great control over the rendered HTML.

##Templates in Blazor DataGrid Component
[Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) is highly customizable. It's a templated component which means we can customize various parts of the DataGrid UI to render custom components or content based on application requirements and our own logic.

More details refer below link
https://www.pragimtech.com/blog/blazor-webAssembly/blazor-datagrid-templates/

{% youtube uyMICm2j-48 %}
GitHub kullanarak Jenkins pipeline oluşturma
Published: 2021-09-27 11:01:47

GitHub da yer alan projelerimizi Jenkins te ayağa kaldırmak için yapmamız gereken 7 adım var. Sırayla bu adımları görelim.

1) İlk olarak yeni bir Pipeline türünde öge(iş) oluşturmamız gerek.

2) Halihazırda GitHub reponuz yoksa, oluşturun.

3) GitHub reponuza Jenkinsfile dosyasını ekleyin. Aşağıda benim uyguladığım Jenkinsfile örneği bırakıyorum.
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sojremlbw9ndc43aei8q.png)

4) Kontrol Merkezinden oluşturduğunuz ögeye gelin ve Konfigurasyonu Düzenle butonuna tıklayın. Sonrasında ise önünüze gelen ayarlar kısmından Pipeline kısmına gelip buradaki definition kısmını Pipeline script yerine Pipeline script from SCM yapın ve SCM türünü de Git seçin.

5) Reponuzun ve Jenkinsfile'nızın adreslerini ekleyin. İstersenin GitHub bilgilerinizi Credentials kısmına ekleyebilirsiniz. Pipeline ayarlarınız özetle aşağıdaki ekran görüntüsündeki gibi olmalı.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mav9cmond90otpvs3u0.png)


6) Kaydet ve Uygula tuşlarına basabilirsiniz. Sonrasında ise oluşturduğunuz ögeye tekrar gelip Şimdi Yapılandır'a tıklarsanız Jenkins çalışacaktır. 

7) Ekranın sol tarafında yapılandırmalarınızı kontrol edip, üstlerine tıkladığınızda da çeşitli ayarları yapabildiğinizi göreceksiniz. Örnek olarak konsol çıktılarınızı görmek veya tekrardan başlatmak gibi. Jenkins'in sorunsuz çalıştığından emin olmak istiyorsanız da yapılandırmanın konsol çıktısının en altında Finished: SUCCESS ibaresini görmeniz yeterli.
Using webpack-bundle-analyzer npm package step by step
Tags: webpack, npm
Published: 2021-09-27 10:58:07

 Yesterday I came across a requirement to know the bundle size of npm modules, which we needed to analyze the performance improvement of my application. After searching on the web I found a solution to use webpack-bundle-analyzer. But in most of the blogs the steps was not clear to install and use it. 
 
So, I am going to share the steps I followed to use it.

Go to the root directory of your project and open the terminal in your IDE(I am using vs code).

* Step 1: Install **webpack-bundle-analyzer** npm module as a development dependency. 

```
npm install --save-dev webpack-bundle-analyzer
```

After performing the above step webpack-bundle-analyzer npm module will added into your package.json file under devDependencies section.

* Step 2: Now search `webpack.config.js` file in your project repo and at the top of this file add below line.

```
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
```

* Step 3: After adding above line into webpack.config.js file. Search for the `plugins: [` section in this file and add below line.

```
new BundleAnalyzerPlugin(),
```

* Step 4: Great all steps has been configured to use it. Now run your application using command `npm start`. You will see that two tabs will open in your default browser one is your application running url and another one is for webpack bundle analyzer. Url used by the analyzer will be [Link](http://127.0.0.1:8888/)

Done. Simple and fast
Please like this post if you find it useful.
Install Oracle 12C with Docker
Tags: docker, container, oracle, database
Published: 2021-09-27 10:37:04

Installing oracle database is a very tedious task. But with the help of Docker Containers, it can be easily done. With this solution, it gives developers the flexibility to work with multiple databases without the hassle.
 
#### Prerequisites
1. Docker Installation
2. Docker Hub Account
3. Oracle Account (for downloading SQL Developer)

Head into [Oracle Database Enterprise Edition](https://hub.docker.com/_/oracle-database-enterprise-edition) & agree to terms & conditions. 

#### Installation
Open Windows Terminal & run the following commands
* Login to Docker Hub
```
docker login
```
* Download Oracle Image
```
docker pull store/oracle/database-enterprise:12.2.0.1
```
* Run Image
```
docker run -d -p 1521:1521 --name oracle store/oracle/database-enterprise:12.2.0.1
```
* Connect to container
```
docker exec -it oracle bash -c "source /home/oracle/.bashrc; sqlplus /nolog"
```
Once the above command executes it will connect you to the SQL Plus terminal. Execute following commands to create the user to work on

```
connect sys as sysdba;
```
Above command will prompt you to enter the password. Enter **Oradoc_db1** as default password

Next, run the below commands one by one
```
alter session set "_ORACLE_SCRIPT"=true;
create user <username> identified by <password>;
GRANT ALL PRIVILEGES TO <username>;

```

Now we can connect to the above created Oracle schema using [Oracle SQL Developer](https://www.oracle.com/database/technologies/appdev/sqldeveloper-landing.html)

Use the following values when login

| Property | Value |
| - | - | 
| Username | entered user |
| Password | entered password|
| Hostname | localhost|
| Port | 1521 |
| Service Name | ORCLCDB.localdomain |

Happy Coding 😀
How to Create and Customize Blazor Financial Charts
Tags: blazor, webdev, csharp, dotnet
Published: 2021-09-27 10:26:20

Learn how easily you can create and configure [Syncfusion Blazor financial charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types) in a Blazor WebAssembly app using Visual Studio 2019.

In this video, you will learn how to add a simple Blazor financial chart to a Blazor WebAssembly app. You will see how to render the Blazor financial chart types, namely the highlow, openhighlowclose, and candle charts with their built-in features. You will also learn how these charts visually indicate stock price variations with various data elements like high, low, open, close, and volume. 

Explore our tutorial videos: https://bit.ly/3kBmOGN 

Download example from GitHub link: https://bit.ly/3i1XQyL
{% youtube GC8MHbXPmrc %}
Oil Paint Effect With OpenCV Python
Tags: beginners, python, 100daysofpython
Published: 2021-09-27 10:15:09

_**I write content for AWS, Kubernetes, Python, JavaScript and more. To view all the latest content, be sure to [visit my blog](https://blog.dennisokeeffe.com) and subscribe to my newsletter. [Follow me on Twitter](https://twitter.com/dennisokeeffe92).**_

> This is Day 25 of the #100DaysOfPython challenge.

This post will use the [OpenCV Python library](https://docs.opencv.org/4.5.2/d6/d00/tutorial_py_root.html) to apply an oil painting effect to an image.

## Prerequisites

1. Familiarity with [Pipenv](https://pipenv.pypa.io/en/latest/). See [here](https://blog.dennisokeeffe.com/blog/2020-07-04-abcs-of-pipenv) for my post on Pipenv.
2. An image to use with the OpenCV library.

## Getting started

Let's create the `oil-paint-effect-with-open-cv-python` directory and install Pillow.

```s
# Make the `oil-paint-effect-with-open-cv-python` directory
$ mkdir oil-paint-effect-with-open-cv-python
$ cd oil-paint-effect-with-open-cv-python
$ touch main.py

# Init the virtual environment
$ pipenv --three
$ pipenv install opencv-python opencv-contrib-python


# if you have issues with a hanging lockfile, try add the --skip-lock option
```

At this stage, you will need to add an image to the root of your directory. In my case, I will add `base_img.jpg` to the directory (which will be an image from [Unsplash](https://unsplash.com/@pawel_czerwinski)).

We are now ready to start coding!

## Applying the oil painting effect

This section simply loads the image in var `base_img` (assuming you are following the directory structure where the notebook is in the `docs` folder).

```py
import cv2
img = cv2.imread('./base_img.jpg')
```

Once that is complete, we can apply the oil paiting effect with one liner of code:

```py
res = cv2.xphoto.oilPainting(img, 7, 1)
```

We can now compare by displaying the images:

```py
cv2.imshow("original", img)
cv2.imshow("res", res)
cv2.waitKey(0)
cv2.destroyAllWindows()
```

This will display the images in a window.

The original image:

![Original](https://cdn.dennisokeeffe.com/assets/2021-08-12-oil-paint-effect-with-open-cv-python/1-original.png)

After applying the effect:

![After effect](https://cdn.dennisokeeffe.com/assets/2021-08-12-oil-paint-effect-with-open-cv-python/2-oil-painting.png)

When you are finished with viewing, hit escape to exit.

## Summary

Today's post demonstrated how to use the `OpenCV` package to programmatically apply an oil painting effect to an image.

## Resources and further reading

1. [The ABCs of Pipenv](https://blog.dennisokeeffe.com/blog/2020-07-04-abcs-of-pipenv)
2. [OpenCV Python library](https://docs.opencv.org/4.5.2/d6/d00/tutorial_py_root.html)
3. [Pipenv](https://pipenv.pypa.io/en/latest/)

_Photo credit: [`dancristianp`](https://unsplash.com/@dancristianp)_


_Originally posted on my [blog](https://blog.dennisokeeffe.com/blog/2021-08-12-oil-paint-effect-with-open-cv-python). To see new posts without delay, read the posts there and subscribe to my newsletter._