teleren/devto huggingface dataset:
AJAX dengan Loadmore
Tags: tutorial, php, javascript
Published: 2021-01-05 09:01:42

Saya telah mencoba dengan beberapa cara pemanggilan data url json menggunakan javascript, namun beberapa kali mengalami error permasalahan akses. Namun setelah menemukan pluggin [load-more](https://github.com/klocus/load-more), saya jadi terbantukan. Dalam kasus saya, saya menggunakan backend server menggunakan php, sehingga pemanggilan data akan enak menggunakan php juga, namun agar AJAX dapat bekerja dengan baik perlu bantuan pluggin ini agar dapat mempermudah proses _script_.

### Persiapan 
- Pemanggilan data json di php
- Penggunaan Jqueary
 
### 1. Pemanggilan Data
Pertama-tama saya perlu memanggil data json yang berupa url.
```php
public function getApi($parameter1, $parameter2)
  {
    $parameter1= preg_replace('/\s/is', '+', $parameter1);
    $url =  API_URL_UMUM . $parameter1 .'&mode=json&version=' . $parameter2;
    $json = file_get_contents($url);
    $ret = json_decode( $json, TRUE );

    return $ret;
  }
```

### 2. Pembuatan komponen html
Pembuatannya tentu saja dengan page, misal `ajax.html`, yang berbeda dari page yang akan memerlukan fitur ini, misal `index.html`. Berikut adalah html yang akan dihandel js pada `index.html`.
```html
<span class="dropdown-item load-more link"
      parameter2="tb"
      title-version="Foo Bar" >
Foo Bar
</span>
<div id='version-bible'></div>

```
Bagian ajax.html saya handel foreach data sesuai ajax.php saya
```html
{foreach $api as $items} 
         <div>{$items.texts.parameter1}:{$item.texts.parameter2} 
{/foreach}

```

### 3. Komonen Javascript
Setelah disetting plugin nya pada page utama baik css dan js nya. perlu dilakukan set js sesuai komponen. Dalam kasus saya setiap komponen yang memiliki _class_ `load-more` akan menghandel ajax dari halaman `ajax.html`

```js
  $('.load-more').click(function(){
        // replace parameter sesuai keinginan dalam kasus saya spasi saya ganti +, dan parameter sudah didiclare sebelemuny.
  	let parameter1 = parameter1.replace(' ', '+');
  	let parameter2= $(this).attr('parameter2');
	let title = $(this).attr('title-version');

        // Set url api sesuai parameter
  	let url = baseUrl + 'ajax/api-text.php?parameter1=' + passage1 +'&parameter2=' + parameter2 + '&mode=json';
       
       // handel tindakan yang perlu dalam kasus saya container mau saya bersihkan dan ganti judulnya dengan title 
       $('#version-con').html('');
       $('.title-text').html(title);
  	
     // Jalankan load more js nya
     $(this).loadMore({
      elementId: 'version-con',
      containerSelector: '#version-con',
      requestUrl: url,
      loadingSelector: '#loading-main',
     })

      // test error
  	console.log(url);

  });
```
***DONE***
A swiss army knife tool to store personal records 🛡️
Tags: privacy, design, security, storage
Published: 2021-01-05 09:01:41

My open-source project finally reached an important milestone. 100 stars on Github. My project is a kind of swiss army knife tool to store personal records. Due to the lack of time, I was actually not promoting it. So the growth is organic. For me, it means that it has real value for the developers and for startup founders.

Databunker is a GDPR compliant user store service for Web and mobile apps. Databunker is a combination of several software concepts build together to provide PII storage and privacy by design out of the box:

* A Personal Identifiable Information (PII) storage and vault
* Secure session storage for web applications
* Privacy portal for customers
* Application backend server
* DPO management tool
* Tokenization service
* Secret sauce

Project website: https://databunker.org/
Node.JS example with passport.js: https://github.com/securitybunker/databunker-nodejs-example

## Do you have any questions?
Join my free privacy training: https://basebunker.com/
Ripple of flipping squares (live demo)
Tags: lume, css, javascript, webdev
Published: 2021-01-05 08:55:05

I had limited time today, but still one demo per day! So I tweaked the #animation and colors of an old demo.


It uses only the CSS 3D rendering that LUME had at the time (back when it was called Infamous, and before it had any #WebGL features).

{% codepen https://codepen.io/trusktr/pen/mdrLmOX %}

LUME's WebGL rendering abilities allow regular HTML content (div tags, span tags, etc) to be mixed with 3D content in the same 3D rendering space. Check out my [previous posts](https://dev.to/trusktr) for examples, and stay tuned for one new demo every day all 2021!

👇 Made with:

{% github lume/lume %}
{% github tweenjs/tween.js %}

Here's the original demo:

{% codepen https://codepen.io/trusktr/pen/bWwdqR %}

topics: #css #javascript #webdev #3D #CSS3D #365DaysOfCode2021
Why You Should Use WordPress For Your Website?

Tags: wordpress
Published: 2021-01-05 08:36:35

Internet marketers make websites, many websites, but what is the best way to make it? Last year we sat there and encoded the website by hand, using Notepad or basic HTML editor. Life changes when the WYSIWYG editor arrives and we can make our website faster with these sophisticated tools.

Recently, the landscape of website creations changed again with sophisticated software called WordPress. Initially a simple blogging platform, WordPress has been developed to be a software selection for many marketers to run their website. Why do so many marketers move so many of their websites to WordPress?

What can be special about WordPress to be so popular?

There are many reasons why WordPress becomes very popular ... let's describe some of them now.

1. The first benefit is the ease of use and installation. WordPress can be installed in just a few mouse clicks, without the technical skills involved. In fact, WordPress allows people without technical skills to create a website that looks great easily! If you can direct and click then you can install, configure, and use WordPress.

2. You can make WordPress look very fantastic very easily through the use of themes. The theme basically changes the layout of your website. With only a few clicks you can completely change the way every page on your website is visible. Do you want your site to look like a magazine, extortion page, sales letter or whatever, you can easily do this with WordPress. With thousands of free themes available and many more paid themes, you can easily make your website look unique.

3. Another big benefit of WordPress is very easy to extend functionality. With a click you can add AdSense ads. With another click you can add Google Analytics tracking and more. There are hundreds of plugins that convey WordPress functionality and make it do almost everything! The best of all, you don't need technical skills to do this, all you need to do is click a few buttons and there - a new function is added. Beautiful!

4. Rating both in search engines is very important for anyone who wants to make money online. WordPress is a program that has been specifically designed with search engines in mind and is very loved by them. With a search engine friendly URL, the plugin to make it more friendly search engine, built in RSS feed and the ability to add XML site maps through plugins, you have a very friendly website that is very fast ready. There are no hours of expenses that are playing with your website, ready for the search engine as soon as it comes out of the box.

If you are considering setting the website then maybe the best software you can use is WordPress. You can make all types of websites from membership sites to the sales page and so on. These are only four main benefits of WordPress and when you start using it, you will realize there are many, many more. Get to know about <a href="https://www.wpoven.com/blog/wordpress-pricing-table-plugins/">WordPress Pricing Table Plugins</a> and
<a href="https://www.wpoven.com/blog/wordpress-booking-plugins/">WordPress Booking Plugins</a> via reading online.
🔥 Getting the largest number from an array
Tags: javascript
Published: 2021-01-05 08:33:30

`Math.max()` returns the largest of zero or more numbers passed to it. We can use the spread operator when passing an array to get the largest number from that array.

```js
// get the largest number from a list of numbers
Math.max(69, 420, 108, 47)  // ⇒ 420

// passing an array instead of individual numbers returns `NaN`
const numbers = [69, 420, 108, 47]
Math.max(numbers)           // ⇒ NaN

// we get the expected result by spreading the array
const numbers = [69, 420, 108, 47]
Math.max(...numbers)        // ⇒ 420
```
Evaluation of Microsoft Playwright framework
Published: 2021-01-05 08:28:05

It has been over a month since I started my internship with Wikimedia under the outreachy program. [Wikimedia](https://www.wikimedia.org/) is a global movement whose mission is to bring free educational content to the world and strives to bring about a world in which every single human being can freely share in the sum of all knowledge. Wikimedia is the platform that runs Wikipedia and it's [sister projects](https://en.wikipedia.org/wiki/Wikipedia:Wikimedia_sister_projects). Wikimedia constitutes a global community of educators, learners, librarians, software developers, to mention but a few. The project that I'm working on is called [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) which is used to collect and organize knowledge and make it available to people. It's implemented in PHP and powers a number of websites. I'm specifically working on the **Evaluation of Microsoft Playwright as a replacement for the Wikimedia browser automation** project.

**Project context**
Wikimedia supports a large number of repositories as well as extensions. In order to ensure good code practices across all these repositories, an extensive amount of testing is performed and one of the tests performed is an end to end test. [WebdriverIO](https://webdriver.io/) is the current browser automation framework being used for implementing end to end test. However, with the recent increase in awareness about an end to end testing, a number of equally competitive non-selenium solutions have been introduced and one of them is [Microsoft Playwright](https://github.com/microsoft/playwright). So, the goal of the project is to evaluate Microsoft Playwright against WebdriverIO as a potential replacement for the Wikimedia browser automation framework.

Automated browser testing is a suite of tools to author, manage and run tests against browsers across platforms. Some of the common browser automation tools used are Selenium, Cypress, Puppeteer, and Microsoft Playwright. Microsoft Playwright is the newest addition to the list of the framework,  it's an open-source, JavaScript-based, cross-browser automation library for end-to-end testing. Playwright provides a single API to automate web applications across three major browser engines; Chromium, Firefox, and, WebKit which makes it different from the other Automated browser frameworks.

There has been a lot of learning new things during this process so far. I have implemented unit test before, however, it is my first time implementing automated browser testing and there has been a lot of learning and implementation of new things such as; the different browser automation frameworks, how to use Github actions as continuous integration(CI) pipeline, learn about Microsoft Playwright and its implementation to mention but a few. This is both a challenging and exciting project for me to work on and hopefully, the evaluation of Microsoft Playwright will turn out to be successful and become the automation tool for Wikimedia.
First Day as a Junior Developer
Tags: devjournal, codenewbie, webdev, career
Published: 2021-01-05 08:10:52

_This post was originally published on January 5, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

Gooood morning! It's Tuesday and yesterday was my first day with the [Orbit team](https://orbit.love/).

I still feel like I'm walking around in a daze of 'Is this real?' because I feel like I'm in such a perfect place at this point in my life.

Yesterday was full of getting organized and oriented with everything. I'm so excited to be working in a team environment again. I've so missed that!

There's definitely some re-orienting on my end with regard to having a more fixed schedule of when to be fully on and off.

Thankfully, the team is super flexible.

It's so strange to think that it's only been one day since starting. My sneaky brain will try to push more negative thoughts into my consciousness like 'You should know this by now...' or things like that.

But that's false! Anytime any feelings of overwhelm start surfacing, I calm myself right down by reminding myself that absolutely nothing has gone wrong and that I'm exactly where I need to be.

On to Day 2. I'm working on getting my local environment set up - fingers crossed I can get it all up and running this morning!

I'm also going to be learning Ruby, Rails, and SQL. So stay tuned for that!

I'm looking forward to documenting this experience <3


-------

P.S. I send weekly newsletters via email if you wanna be a part of that! [Sign up here >>](https://ladies-code-collective.ck.page/e53b5fca44)
Writing an API in Django (Class Based)
Tags: django, restapi, webdev
Published: 2021-01-05 08:09:28

Rest API solve the problem of writing specific codes for different platform.
Django is a Python framework that supports the MVT and follows the DRY principle for writing codes.
To write API for your Django web app, here is how to go about it.

```python
pip install django-rest-framework
```



Go to your project **setting.py** and add rest_framework as an **installed app**.
```python
[... ,
... ,
rest_framework,
... ,
]
```

now we will create a new script called **serializer.py** in our app folder.
Open and add the following code

```python
from rest_framework import serializers
from .models import model_name


class mySerializer(serializers.ModelSerializer):
    class Meta:
        model = model_name
        fields = ['__all__']
```

Brace up 😁, you are almost done with your API.

Next up,
In **views.py** write the code below

```python
from rest_framework.generics import ListCreateAPIView
from .serializer import mySerializer
from .models import model_name

class listApi(ListCreateAPIView):
    queryset = model_name.objects.all()
    serializer_class = mySerializer
```
Lastly we are going to assign a URL to our API
open **urls.py**

```python
from django.urls import path
from .views import listApi

urlpatterns = [path('api/list', listApi.as_view),
]
```

open browser  [127.0.0.1:8000](127.0.0.1:8000)

🎉🎉🎉

*You just made a Class Based API view*.
LVM (Quick Snippet)
Published: 2021-01-05 07:47:32

1. Physical Volume (PV)
2. Volume Group (VG)
3. Logical Volume (LV)


###All PV COMMANDS
```
pvcreate /dev/sdb2
```


###All VG COMMANDS
Syntax: vgcreate NEW_VG_NAME PV_NAME
```
vgcreate ubuntu-vg /dev/sdb2 
```

Syntax: vgextend OLD_VG_NAME PV_NAME
```
vgextend ubuntu-vg /dev/sdb3 
```


###ALL LV COMMANDS

Syntax: lvcreate -n NEW_LV_NAME -L SIZE(G,M) EXISITING_VG_NAME
```
lvcreate -n app-log-lv -L 12G ubuntu-vg 
```

Syntax: lvextend [LEFT TO ADD]
```
[LEFT TO ADD]
```
lvreduce
```
# Check First
lvs

LV   VG   Attr       LSize   Pool Origin Data%  Meta%  Move Log Cpy%Sync Convert
app-log-lv ubuntu-vg -wi-ao---- <12.00g


# Perform Reduce
lvreduce --resizefs -L -1G ubuntu-vg/app-log-lv


# Check Again
lvs

LV   VG   Attr       LSize   Pool Origin Data%  Meta%  Move Log Cpy%Sync Convert
app-log-lv ubuntu-vg -wi-ao---- <11.00g



```




##A Quick Setup


***Step1:***  Make Sure a Disk is Present or Create it using `pvcreate`
```
pvcreate /dev/sdb2
```

>Note: Check all PVs
commands: pvs , pvscan , pvdisplay


***Step2:***  Make Sure a Volume Group(VG) is Present or Create it using `vgcreate`
```
vgcreate ubuntu-vg /dev/sdb2 
```

>Note: Check all VGs
commands: vgs , vgscan , vgdisplay


***Step3:***  Make Sure a Logical Volume(LV) is Present or Create it using `lvcreate`
```
lvcreate -n app-log-lv -L 12G ubuntu-vg 
```

>Note: Check all LVs
commands: lvs , lvscan , lvdisplay



***Step4:***  Make Sure it has a File System(fs) else provide one using `mkfs.ext4 LV_PATH`

```
#Get the LV_PATH
lvdisplay
#OutPut [It will show the LV Path]

  --- Logical volume ---
  LV Path                /dev/ubuntu-vg/app-log-lv
  LV Name                app-log-lv
  VG Name                ubuntu-vg
  LV UUID                bGNxCm-Beki-UX3D-HSXm-NU3k-YWs0-1ru2Tp
  LV Write Access        read/write
  LV Creation host, time tester, 2020-11-04 10:52:02 +0530
  LV Status              available
  # open                 1
  LV Size                12 GiB
  Current LE             2092
  Segments               1
  Allocation             inherit
  Read ahead sectors     auto
  - currently set to     256
  Block device           253:8

```


# Give File System (fs)
```
mkfs.ext4 /dev/ubuntu-vg/app-log-lv
```

>Note: Check all mkfs 
commands: `mkfs.ext4`, `mkfs -t ext4`



***Step5:***  Make Sure it is MOUNTED(mount) if NOT mount it to a DIRECTORY

*`so that any changes made in directory is reflected in the Disk`*

Syntax: mount LV_Path DIR_PATH

```
# Create Dir If You don't have: 
mkdir /var/log/app-logs
mount /dev/ubuntu-vg/app-log-lv /var/log/app-logs

```

***Step6:***  Make Sure it is PERMANENTLY MOUNTED(fstab) if NOT mount it PERMANENTLY 
> Quickest: Copy New Data from mtab to fstab
```
cat /etc/mtab

/dev/mapper/ubuntu-vg-app-log-lv /var/log/app-logs ext4 rw,relatime,data=ordered 0 0

```

```
# Add some Here
vim fstab

/dev/mapper/ubuntu-vg-app-log-lv /var/log/app-logs ext4 rw,relatime,data=ordered 0 0

```

# Restart & Check
100 Days of Gatsby Started
Tags: gatsby
Published: 2021-01-05 07:38:17

I started work on the first sprint of 100 days of Gatsby yesterday and there have been unexpected challenges for setting up Gatsby Cloud builds and my first time working with Contentful.

But...

It's a blast! I'm enjoying pushing my brain to new places that differ greatly from my everyday coding jobby job.

If you are interested, it's very early days and plenty of time left on the first sprint.

[https://www.gatsbyjs.com/blog/100days/](https://www.gatsbyjs.com/blog/100days/)
Mac installing MariaDB
Tags: database
Published: 2021-01-05 07:25:22

Yesterday we installed [MySQL on our Mac](https://daily-dev-tips.com/posts/mac-installing-mysql/), however, you might be wondering but what about MariaDB?

MariaDB has been known to be the next step. It's highly compatible to migrate your MySQL to MariaDB.

Luckily for us, this installation process is easier than MySQL since we can use [Homebrew](https://daily-dev-tips.com/posts/homebrew-one-package-manager-to-rule-them-all/).

## Installing MariaDB on Mac

To install MariaDB we need to have Homebrew installed first.

If you don't have this installed follow my guide on [installing Homebrew](https://daily-dev-tips.com/posts/homebrew-one-package-manager-to-rule-them-all/).

Open up your favorite terminal and execute the following command first to make sure Homebrew is up to date.

```bash
brew update
```

Then we can go ahead and install MariaDB.

```bash
brew install MariaDB
```

This will start a whole series of cool lines in your Terminal which makes you look like hackerman!

![Hackerman gif](https://media.giphy.com/media/QbumCX9HFFDQA/giphy-downsized-large.gif)

Once it is done, we have successfully installed MariaDB.

We can now start/stop the service using Homebrew.

```bash
brew services start mariadb
brew services stop mariadb
```

## Connecting to the MySQL server

Once you started the server you can run the following command to connect to our database.

```bash
mysql -uroot -p
```

It will ask for your password, and if correct it will show the following.

![MariaDB connection](https://cdn.hashnode.com/res/hashnode/image/upload/v1609397158028/gV_WVkSuk.png)

Now we can also use a tool like [TablePlus](https://tableplus.com/) to connect to our MariaDB.

Add a new MariaDB connection using the following settings

- `host`: 127.0.0.1
- `user`: root
- `password`: You choose this in the installation
- `port`: 3306 (default)

![MariaDB TablePlus connection](https://cdn.hashnode.com/res/hashnode/image/upload/v1609397272772/9Mtf9ftOD.png)

## Help, the password is wrong

I had the issue where my password didn't work because of the running instance of MySQL. First of all, stop the running MySQL instance using the Settings => MySQL interface.

Now you can run the following command:

```bash
sudo mysql_secure_installation
```

The sudo is important here to generate a new root password.
In my case, I just made it the same as what I had.

Follow the steps it prompts everything can be answered with Yes.

Now you should be able to log in again.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
My 2021 wishlist for DEV
Tags: discuss, watercooler, forem
Published: 2021-01-05 07:24:47

I discovered [DEV](https://dev.to) in 2020. I know, I'm late to the party. But I really love the platform. It's a great place to share content and discover or learn new things.

In the last few days, I started thinking: what are the things that I would add to make this platform even better? Here are the 2 that kept popping up in my mind!

## Allow for alt/caption on cover image

I think a lot of people here use images from [Unsplash](https://unsplash.com/) or other sources as cover for their posts. I know I do. It's important in this case to give credit back to the people that produced the image.

Currently, everyone of my posts ends with the credit for the image. I'd love to be able to set it when I upload the image so it would be displayed naturally.

This would incentive people to do it (no way to forget about it!), and makes it more visible for readers.

It would also be awesome to have an option to set an alt text, for better accessibility!

## Allow better reviews before publishing

I know that it's already possible to share a draft post before publishing it, but to be honest I am not using this feature. When I want a review, I either use a Google Doc, or a Github pull request. This way, people can make comment, or edits, related to a specific part of the post. It makes writing so much easier!

To be clear, it is fine as it is, I just copy and paste the markdown before publishing. But this can lead to some errors (you sometimes need to do your edits twice when you're as badly organised as I am).

Maybe a really nice option would be to be able to link a Github repository to your DEV account. Then every Markdown file that gets committed is automatically published. Or maybe just created as a draft. This way, no need to implement custom review process in DEV, we can just use PRs!

## What are yours?

Of course I have a few other ideas: improving the post stats to get insights on post performance over time for example. But these two are the ones that I think about most!

I'd love to hear what are your thoughts and crazy idea about DEV!

____________________

Photo by [Dariusz Sankowski](https://unsplash.com/@dariuszsankowski?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)