teleren/devto huggingface dataset:
Todo App - ES5 & ES6 - Local Storage
Tags: webdev, javascript, html, css
Published: 2021-12-16 22:44:17

In this post, we will make a Todo Application with Vanilla Javascript.

**If you want to see other features and _ES6 - Local Storage_ version look this [Repository](https://github.com/enesskilic/javascript-projects)**

---

> Step 1: Create UI

I used Bootstrap Library in UI.

```html
  <div class="container py-5">
    <!-- Title -->
    <h1 class="text-center">TODO App</h1>

    <div class="col col-md-8 col-lg-6 my-5 mx-auto">
      <!-- Form -->
      <form class="form">
        <div class="form-group d-flex">
          <input
            type="text"
            class="input form-control bg-transparent text-light"
            placeholder="Add TODO"
          />
          <div class="px-2"></div>
          <button type="submit" class="btn btn-success px-4">Add</button>
        </div>
      </form>

      <!-- Todo Table -->
      <table class="table table-dark table-bordered table-responsive text-center mt-5">
        <thead>
          <tr>
            <td><strong>Task</strong></td>
            <td></td>
          </tr>
        </thead>
        <tbody class="todo-list"></tbody>
      </table>
    </div>
  </div>
```

> Step 2: Add functionality with Javascript.

"let" and "const" keywords are belongs to ES6.

```js
// A function for less code.
function select(query) {
  return document.querySelector(query);
}

// Variables
const form = select(".form");
const list = select(".todo-list");
const input = select(".input");

// Objects
function Todo(task) {
  this.task = task;
}

function UI() {}

UI.prototype.create = function (todo) {
  const html = `
    <tr>
      <td>${todo.task}</td>
      <td><button class="btn btn-sm btn-danger delete">Delete</button></td>
    </tr>
        `;
  list.innerHTML += html;
};


// Functions
function createTodo(e) {
  const task = input.value;

  // Constructors
  const ui = new UI();
  const todo = new Todo(task);

  // Add to list
  ui.create(todo);

  // Clear Input

  // Prevent form submit
  e.preventDefault();
}

// Listeners
form.addEventListener("submit", function (e) {
  createTodo(e);
});

```

**If you want to see other features and _ES6 - Local Storage_ version look this [Repository](https://github.com/enesskilic/javascript-projects)**
Lagoon Documentation Update
Tags: documentation, docs, github, mkdocs
Published: 2021-12-16 22:42:27

You might notice our documentation now looks a little different - that’s because we’ve moved off of GitBook and are now hosting it on GitHub pages, using a Github action to handle the publishing. The documentation itself is built in [MkDocs](https://www.mkdocs.org/), using the excellent [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) theme 

Why the departure from GitBook? While we loved their features, there have always been a couple of minor irritations (mostly as we tried to maintain documents in GitHub and GitBook at the same time). For all the work done to update the tool recently, our initial concerns remain, and in some areas the ability for us to keep our documentation up to date has been critically impaired. We thought about it for a long time, and decided we’d rather keep something so vital under our control, as much as possible. 

Additionally, keeping our documentation in GitHub fits in with our team’s existing workflow. We’re also looking into lagoonizing MkDocs, so stay tuned for that!

There should be no functional difference for our users, and we’ve attempted to preserve all the links from previous documentation. If you’ve got any magic MkDocs tips you want to share with us, let us know - we’ve even got a [documentation page](https://docs.lagoon.sh/contributing-to-lagoon/documentation/) in our documentation with some information on building and running locally!

After all, we do say that [Documentation is like a plant](https://www.youtube.com/watch?v=3X-Fh3TyXMg), and half the trick of nurturing a growing plant is knowing when to re-pot it, right? 

Check it out at https://docs.lagoon.sh and let us know what you think - we’re going to be able to respond even faster to any updates/additions you may have.
Magento 2.4.4 - Checkout performance improvements
Tags: magento, ecommerce, adobe, performance
Published: 2021-12-16 22:13:54

---
title: Magento 2.4.4 - Checkout performance improvements
published: true
description: Adobe Commerce 2.4.4 is coming early next year (March 8th), this version will be powered by PHP 8.1 and other key framework upgrades.
tags: magento, ecommerce, adobe, performance
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w89ogt9vfiafagouvblk.png
---
Adobe Commerce 2.4.4 is coming early next year (March 8th), this version will be powered by PHP 8.1 and other key framework upgrades. 2.4.4 will bring a bunch of benefits for your Commerce projects and the more significant to me are the [3 checkout improvements](https://rafaelcg.com/blog/developer/adobe-commerce-2-4-4/).

![Magento 2.4.4 checkout performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9u2d51g6pceb95dokkj.jpeg) 

Merchants with large-scale needs will have an optional feature to enable asynchronous order processing configuration, but what doesn't it mean? It means that with the right configurations, your store will be capable to accept more orders to be created with the same amount of server resources you have today. Instead of having Adobe Commerce processing every single step required during the order creation, you will have non-essential steps being processed post-transaction.

### Can I enable it?

I don't recommend enabling it without analysis, if you have one of these scenarios below enabling this optional feature will involve extra adjustments.

- Issues with cronjobs.
- Customized checkout processes.
- External integration intercepting cart or checkout on the fly.

### How to enable?

To enable it, you need to run this command below.

```
bin/magento setup:config:set --deferred-total-calculating 1
```

Don't forget to test it in a development environment first and to get a benchmark 😉
Log4j2 vulnerability
Tags: java, security, vulnerability
Published: 2021-12-16 21:58:56

No one leaving the battle ground, neither developer nor hacker 😂😂.

As soon as developer got some fix immediately the another guy(bad guy) trying to breakdown the fix.

[Log4j2 vulnerability](https://www.javaoneworld.com/2021/12/log4j-vulnerability.html?m=1)

As per an article 

> 
log4j security flaw prompting 100 new hacking attempts every minute.

>
Log4j Vulnerability
Tags: java, vulnerability, security
Published: 2021-12-16 21:52:14

Summary of the Vulnerability

On Dec. 9, 2021, a remote code execution (RCE) vulnerability in Apache log4j 2 was recognized as being taken advantage of in nature. Public proof of concept (PoC) code was delivered and the resulting examination uncovered that double-dealing was unbelievably simple to perform. By presenting a uniquely created solicitation to a weak framework, contingent upon how the framework is designed, an aggressor can teach that framework to download and consequently execute a malicious payload. Because of the disclosure of this adventure being so later, there are as yet numerous servers, both on-premises and inside cloud conditions, that presently can't seem to be fixed. In the same way, as other high seriousness RCE takes advantage of, hitherto, enormous checking movement for CVE-2021-44228 has started on the web with the aim of searching out and taking advantage of unpatched frameworks. We enthusiastically prescribe that associations move up to the most recent rendition (2.16.0) of Apache log4j 2 for all frameworks. This form additionally fixes the less extreme vulnerability CVE-2021-45046, found on Dec. 14.

Well explained article on the log4j2 vulnerability.

[Log4j2 vulnerability](https://www.javaoneworld.com/2021/12/log4j-vulnerability.html?m=1)

Still the team looking into and trying to root cause of this.
Linux advice
Tags: linux, setup, advice
Published: 2021-12-16 21:26:58

I need advice for choosing a Linux distro. I am a intermediate Linux user , by no means a beginner.
**I need :**
 

- To run the adobe suite on it (If this isn't possible maybe [Bottles](https://usebottles.com) could help?)

- Vim / Neovim

- Lot's off kernel choices (liquorix , linux-zen , ect.)

- Perl , Rust , Go, Ruby , Vala , and NodeJS being able to run

- Lot's of package management options (brew , included manager , snap , ect.)
 
- vagrant

- virtualbox

- a good wiki (Arch , ubuntu wiki's as a example)

- Light gaming power(Minecraft java,Dont starve , ect.)
 
**Preferences:**
- KDE plasma DE , Budgie , Gnome 40 , or Cutefish desktop are my DE prefernces
- if I must use only a WM then i3-gaps or awesome work

- Not a preference , but something arch based would be good (I like pacman and trizen)

- dash or zsh shell

** Stuff I'm considering**

- Arch linux
- Manjaro
- EndeavorOS
- A custom ubuntu server install
- Using archiso and making my own for easy setup with everything I need (Is it worth it?)

----

**Any advice is appreciated**
 ⚠️ **DO NOT** suggest Gentoo ⚠️
_If I think of anything I will add it_
Release 0.4 - Unfinished, but to be continued.
Tags: opensource, pnpm, git
Published: 2021-12-16 21:19:36

My Release 0.4 is still not finished but will be continued after. 
I was not able to get the PR reviewed since I opened very late. Since I started late, everything was delayed. And installing pnpm on macbook(M1) did not work either. 
After a few tries, I had to borrow a windows machine from my friend so that I can work with pnpm. 
It still has error when I try to run the whole program using pnpm start, however I was able to run the front-end of the application using "pnpm dev" command. 
The fix I have pushed is yet a single small one, however I will try to fix the environment error and resume working on the other issues that has been assigned to me. 

It is still remaining unfinished, but throughout the course, it was a great opportunity to learn about opensources, and contributing to other projects.
Development, sure, need a coding knowledge background, but that is not everything. Outside of the coding skills, I was able to gain knowledges that would be a huge gain.

Development is a continuous progression, not an one-time event. Open source development is something that allows developers to find their potential to DO.
It was a great pleasure working with the open sources.
It makes a difference whether you include '>' in your css selector
Tags: todayilearned, css
Published: 2021-12-16 21:18:27

Regarding css selectors, I learned that there is a difference between ".parent-element > .child-element" and ".parent-element .child-element.".  Notice how one version includes a carrot.  If you use the carrot, it means you are targeting DIRECT children of the parent element.  If you omit the carrot, then you are targeting ANY children under the parent element, regardless of whether it is a direct child or not.
Working on Telescope issues
Tags: opensource, react
Published: 2021-12-16 21:03:55


Different from what I have planned first, I contributed on two different projects, [Telescope](https://github.com/Seneca-CDOT/telescope), and [instant-apps](https://github.com/felvin-search/instant-apps)

For the first [issue](https://github.com/Seneca-CDOT/telescope/issues/2583) I picked, I found the bug in a previous release, which I worked on a mobile UI. The title container is overflowing when scrolling. Screen record of the issue is also in the issue page. I was stuck because of that issue and was trying to find out the cause, but failed in Release 0.3.

However, I noticed that the issue was not only existing in my branch, it was also existing in the main branch. So I decided to file an issue as a bug so that I can work on this as a follow up. 

After several tries with changing margin, padding and overflow settings in different properties, I finally got to make it work after adding overflowY as hidden in titleContainer. 

The fixes are in [this PR](https://github.com/Seneca-CDOT/telescope/pull/2624).


An issue for enhancement, which is a new feature, I decided to work on adding the metronome player to the instant-apps. 
Instant app is a search engine that would bring the small apps when searching a certain keywords. 

As my first [contribution](https://github.com/felvin-search/instant-apps/issues/237), I worked on adding a metronome app to the project. 
Since I have an experience adding an external API for react application, I decided to work on this new feature that could be shown when searching for "metronome", "play bpm", "bpm", and etc. 
For the project, I aggregated an external [API](https://www.npmjs.com/package/@kevinorriss/react-metronome). 
The changes are in this [PR](https://github.com/felvin-search/instant-apps/pull/276).

More issues are still in progress, which I will continue to work on.
An Intricate Job Recruitment Scam, a Law Against Some AI-Powered Recruitment Software, & more on DevNews!
Tags: news, podcast
Published: 2021-12-16 20:53:55

---
title: An Intricate Job Recruitment Scam, a Law Against Some AI-Powered Recruitment Software, & more on DevNews!
published: true
description: Listen to S6E7 of the DevNews pod wherever you get your podcasts.
tags: news, podcast
series: DevNews Season 6
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

We're back with a brand new episode of DevNews! 

{% podcast https://dev.to/devnews/s6-e7-an-intricate-job-recruitment-scam-a-law-against-some-ai-powered-recruitment-software-and-we-give-you-holiday-tech-support-support %}

**Hosts:** @saronyitbarek & @joshpuetz 

**Guest:** 
**[Rob Frelow](http://twitter.com/@RobFrelow)**, Co-Founder and Chief AI Officer @ The StoryGraph

In this episode, we talk about a lawsuit filed by Riot Games against fraudsters of an intricate video game studio scam, and a New York City law that will ban employers from using potentially biased AI-driven recruitment software to screen candidates. Then we speak with Rob Frelow, co-founder & chief AI officer of The StoryGraph, who has 15 years of experience being a tech support engineer, to give you lifehacks for your holiday family tech support woes.

---

_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ _— or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx)._ 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s6-e7-an-intricate-job-recruitment-scam-a-law/id1525581923?i=1000545147521)
- [Spotify](https://open.spotify.com/episode/6qZrVEUpbukzqaLIREmywM)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzQ3?sa=X&ved=0CAQQkfYCahcKEwiI9IHCmen0AhUAAAAAHQAAAAAQCg)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s6-e7-an-intricate-job-recruitment-scam-a-law-against-some-ai-powered-recruitment-software-and-we-give-you-holiday-tech-support-support-89059737)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s6e7-an-intricate-job-6t1yrOE4Zu8/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=168475371)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods website](https://devpods.dev/podcasts/devnews/episodes/238)

### _Acknowledgements_ 
- _@levisharpe for producing & mixing the show_ 
- Our Season 6 sponsors: [Cosmos HackAtom](https://www.hackatom.org/) & [Microsoft Azure](https://www.microsoft.com/en-us/dev-community/Event/Register?eventId=DevNewsPodcast_FI2YKJLHvJdZ&ocid=aid3038582)


We hope you enjoy the show this week! 📰
Transaction in Database
Published: 2021-12-16 20:33:06

A transaction is a unit of work that must maintain ACID properties. ACID is an acronym of Atomicity, Consistency, Isolation, and Durability

Let’s look at each of them in detail.

## Atomicity

A transaction contains a query or a set of queries. In order to maintain atomicity property, the transaction either has to execute all the queries or none of them. In short, all the queries will be treated as atomic. If any of the queries fails, the transaction has to roll back all the previous executed queries.

## Consistency

First, let’s understand what a consistent state means in a database. A database is in a consistent state if it follows all the rules defined using constraints, triggers, or cascades.

A transaction must always lead the database to a consistent state.

For example, if a table `user` has a unique constraint on the `national_id` column and a query in my transaction tries to insert the duplicate `national_id`, the query has to be failed. Otherwise, the database will not be in a consistent state as it will violate the unique constraint on our `user` table.

## Isolation

All transactions must be executed independently of other transactions. Each transaction will be executed as if it’s the only transaction executed in the database.

There are multiple levels of isolation levels that we can define in a database. We have discussed them in detail in our [this article](https://dev.to/wasinaseer/isolation-levels-in-transaction-5gkj).

## Durability

If a transaction commits data, it must be able to persist them even if the system fails or restart. In short, committed transactions means the data has been persisted, and if it’s not able to save the data due to system failure, it must persist at the system start.
flutter #1 doctor - create.
Tags: flutter, dart, mobile
Published: 2021-12-16 20:17:16

`$flutter doctor` // inspeccionar detalles que necesita flutter
`$flutter create proyect1` // crear proyecto nuevo
`$cd proyect1 ` // nos ubicamos al proyecto creado
`$flutter run ` // ejecutamos proyecto (elegir dispositivo)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3sgkt3mh7lq2ufr5ye2.png)
Apama Advent Calendar - 16 Dec 2021 - The Analytics Builder Block SDK and Custom Blocks
Tags: apama, iot, cumulocity, streaminganalytics
Published: 2021-12-17 13:10:20

---
title: Apama Advent Calendar - 16 Dec 2021 - The Analytics Builder Block SDK and Custom Blocks
published: true
date: 2021-12-16 20:00:49 UTC
tags: apama, iot, cumulocity, streaminganalytics
canonical_url: https://tech.forums.softwareag.com/t/apama-advent-calendar-16-dec-2021-the-analytics-builder-block-sdk-and-custom-blocks/253968
---

_This is Day #16_ _of a short series of brief tips, tricks, hints and reminders of information relating to the Apama Streaming Analytics platform, both from Software AG as well as from the community._  


Yesterday, on Day #15, we covered the use of EPL within Cumulocity IoT. One of the cases we mentioned was for adding custom blocks for use within the Analytics Builder (which we talked about on Day #3). Today we’ll talk about how you can do that through the use of our public SDK, so check out the original post in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/apama-advent-calendar-16-dec-2021-the-analytics-builder-block-sdk-and-custom-blocks/253968).

_Note that some posts may be published a day or two early or late (e.g. Mon-Fri) so you may find you have bonus days with more than one post!_
How to create a new file in Figma
Tags: figmatutorial, files, beginners, basics
Published: 2022-01-04 13:55:38

---
title: How to create a new file in Figma
published: true
date: 2021-12-16 19:49:00 UTC
tags: figmatutorial,files,beginner,basics
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*2uiqxiJq_W9Y9_VKzn2AaQ.jpeg)

In Figma, there are two basic methods to create a new file: the first is to create a draft file, and the second is to create a project file. In this short tutorial, we’ll walk you through the process of creating a draft file in Figma as well as a new project file.

### 1 — Create a Draft File

A draft file in Figma is a private file containing your work in progress. You can create drafts files for work that you don’t wish to share with your team. All drafts files are located in the **Drafts**  section.

![](https://cdn-images-1.medium.com/max/1024/0*hwvvf5HHr_vxUkuX.png)

To create a new draft file, first go to the left-hand sidebar of your Figma files browser and select **Drafts.** Next, hit the **+** icon beside **Drafts** tab link, or click **New design file** button in the top-left corner of your **Drafts**  section.

![](https://cdn-images-1.medium.com/max/1024/0*gjXD5ICrH6cFuwX3.png)

### 2 — Create a Project File

In Figma, a project file is a file that is located inside a team project. When you create a new project file, everyone in your team has access to it.

![](https://cdn-images-1.medium.com/max/1024/0*FryPO7cMZI5vAXam.png)

To create a new project file, first, let’s go to the left-hand sidebar and select your project name. In my case, I will select **Medical landing page**  Project.

![](https://cdn-images-1.medium.com/max/1024/0*sdLfNPPyLYX8UNCq.png)

Next, hit the **+** icon beside **Project name** tab link, or click **New design file** button in the top-left corner of your Project section.

![](https://cdn-images-1.medium.com/max/1024/0*yrLZMBqsFqYPtmNP.png)

That’s everything about creating a new file in Figma. In the next posts, we’ll cover more concerning Figma files.

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-create-a-new-file-in-figma/) _on December 16, 2021._