teleren/devto huggingface dataset:
How to create themes in Magento 2. The right way.
Tags: php, magento, ecommerce
Published: 2020-06-20 01:49:29

Magento is an e-commerce framework built using php, based on symphony framework. With the support for Magento 1.x coming to and end by June 30, 2020.

A theme is a component of Magento application which provides a consistent look and feel for entire application area.

Often you find yourself working with templates, layouts and stylesheets. Magento come with two default themes called blank and luma.

**Luma theme**
![luma](https://dev-to-uploads.s3.amazonaws.com/i/momyl2pv9bd9nuomxe0d.jpg)


**Blank theme**
![blank q](https://dev-to-uploads.s3.amazonaws.com/i/o33bfawncus6zr3bizje.jpg)

###Create a new theme which is not luma or blank.


1. Create a directory for the theme under ```app/design/frontend/<your_vendor_name>/<your_theme_name>.```
2. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.
3. Add a composer.json file.
4. Add registration.php.
5. Create directories for CSS, JavaScript, images, and fonts in web folder.

###Let's look into the theme.xml file

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b9p9aqts7bswbstq2pv6.png)

Your newly created theme extends blank theme, which has all necessary styles required for any theme development. 
However if yout store is being developed from scratch, it's good to use blank as parent theme instead of luma as you would be overriding the existing styles to suite your store.

You can start applying styles based on modules or entire theme level using the `_module.less` and `_theme.less` files. However if you want to extend the parent styles and additional styles, you can use `_extend.less`.

You can check Magento's ui library for available less variables and mixins, which is available in `lib` folder in your Magento root directory, the library also comes with a guide.

[Magento Ui library](https://github.com/magento/magento2/tree/2.4-develop/lib/web/css)
I have seen three Hype-Cycle.
Tags: healthydebate
Published: 2020-06-20 01:48:32

I have seen/feel/sense three Hype-Cycle in my tech-life(2010-Present).
These are the obvious ones and needn't require the name and also people get angry these days if you speak straight truth on their face so I haven't mentioned the names but you can do a bullseye in a comment.

**2013 B**

**2015-16-17 M**

**2019 B**

{% youtube glWAEi3tjFE %}

In My limited vision, I believe in **LID** approach
{Logic + Infrastructure + Data-Flow}

Share your views?
2nd Generation JavaScript -Geertjan Wielenga (FOSDEM'20 Talk)
Tags: news, javascript, webdev
Published: 2020-06-20 01:32:49


Geertjan Wielenga, author of the book Developer, Advocate!, and Oracle developer focusing on NetBeans and Oracle JET recalled the evolution of JavaScript frameworks and libraries in the past decades. Dojo (1.x), Mootools, Extjs, jQuery, and YUI were among the first libraries to get traction and help developers build web applications. Backbone, Knockout, Ember, Angularjs (not to be confused with Angular) then appeared, to solve common problems that developers were facing when building ever more interactive web applications. Grunt, Gulp, Brunch, and other build tools also came to life to manage the developing complexity of building, bundling and packaging rich web applications.

Here is the video link of Geertjan's take on 2nd Generation JavaScript from FOSDEM’20 talk.

https://ftp.fau.de/fosdem/2020/H.1302/beyond_angular_react_vue.mp4
Persisting Vuex-Store in Quasar
Tags: beginners, vue, quasar
Published: 2020-06-20 00:42:09

Ok, today, I will guide you on how to successfully install and use the 

## Table Of Contents
   * [Installing The vuex-persistedstate package From using npm](#chapter-1)
   * [Import and Using the Package](#chapter-2)

### Installing The vuex-persistedstate <a name="chapter-1"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f32cqw95frukig3cu98y.jpg)

Run the above code in the terminal of the root of your project, 

### Import and Using the Package <a name="chapter-2"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cjloyief3qqpmh9wx2nk.jpg)

#### From the Above image, 
##### Line-4: Is used to import the vuex-persistedstate package as createPersistedState 

 PS: You can name it anything you want :), 

##### Line-28: This is where you would add the importated package into your store.

Thats all.....have fune :)
Persisting Vuex-Store in Quasar
Tags: beginners, vue, quasar
Published: 2020-06-20 00:42:09

Ok, today, I will guide you on how to successfully install and use the almighty Vuex-persistate on quasar :)

## Table Of Contents
   * [Installing The vuex-persistedstate package From using npm](#chapter-1)
   * [Import and Using the Package](#chapter-2)

### Installing The vuex-persistedstate <a name="chapter-1"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f32cqw95frukig3cu98y.jpg)

Run the above code in the terminal of the root of your project, 

### Import and Using the Package <a name="chapter-2"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cjloyief3qqpmh9wx2nk.jpg)

#### From the Above image, 
##### Line-4: Is used to import the vuex-persistedstate package as createPersistedState 

 PS: You can name it anything you want :), 

##### Line-28: This is where you would add the importated package into your store.

Thats all.....have fune :)
What are my day-to-day tools as a full-stack developer?
Tags: webdev, tools
Published: 2020-06-20 00:26:50

I've divided a list of tools that I use every day working as a full-stack developer by category.

## Design

####Graphic [link](https://www.graphic.com/): 
I can't afford Illustrator monthly so I found this alternative, I paid once and it worth all. I can edit vectors, AI files, export everything that you can do with Illustrator.

####SketchApp [link](https://www.sketch.com/):
When it comes to design mockups I use Sketch, it has a friendly interface that makes it easy to design.

####Zeplin [link](https://zeplin.io/):
If you are developing an application you should have quick access to the mockup assets like images, colors, icons, etc. Zeplin is a design collaboration tool that allows uploading your mockups to the cloud you all the development team can access them quickly and easily.


## Development

####Iterm2 [link](https://www.iterm2.com/)
An alternative to default terminal on macOS

####Vim [link](https://www.vim.org/)
I use Vim as the code editor, I've customized shortcuts and plugins for fast development. 

####Docker [link](https://www.docker.com/)
Docker to containerize my apps

####Xcode[link](https://developer.apple.com/xcode/)
When I need to develop an IOS app I use Xcode with Swift.

####TMUX [link](https://github.com/tmux/tmux/wiki)
When I'm developing a web application I need quick access to different terminals, for example, to run a server, to use my Vim editor all in just one terminal in a single session.

####Homebrew [link](https://brew.sh/)
A package manager for macOS.

####Repl [link](https://repl.it)
Sometimes I need to write quick methods to see what returns on the console.

## Services
####Gitlab [link](https://gitlab.com/)
I'm a fan of Gitlab, private repositories, CI/CD and you can also use the community edition to install in your own server.

####HEROKU [link](https://heroku.com)
Where I deploy my personal projects.

####AWS S3 [link](https://aws.amazon.com/s3/)
When I'm working on a big application I store the resources in a bucket in AWS S3, and when I need to create a CDN as well.

####PivotalTracker [link](https://www.pivotaltracker.com/)
Every developer should use a tool to track progress on the development or specific task, I use PivotalTracker for big projects and Gitlab board for small.

## Utilities
- 1Password: My generate and store passwords.
- Boostnote: Save my snippets or documentation.
- Workspace: I organize my apps in workspaces, so I can access them in one click.
- Toggle Alfred: Enhanced spotlight in mac.
- ExpressVPN: A VPN to navigate safely.

I'm not a Rich guy that can afford a Mac, I use a Mac because I feel more comfortable work design, develop Web and iOS applications. I work for years to get a MacBook 2017 before I used to go to my university to use design tools.

I would appreciate it if you can share the tools you use in your day-to-day.

Have a nice day!
The `import()` Syntax of ES2020 Looks Promising; How to Detect if Such Feature Available Then?
Tags: question, javascript
Published: 2020-06-20 00:12:31

> With the plan, `import()` is proposed to work in **both** modules and scripts, giving script code an easy asynchronous entry point into the module world and allowing it to start running module code.

> https://www.infoworld.com/article/3538809/ecmascript-2020-spec-for-javascript-approved.amp.html

Can I check the existence of this feature as it was a function? And if that is possible, is it conform to the standard?

What I am thinking:

~~~ js
if ('function' === typeof import) {
    import('taufik-nurrohman/f3h.js').then(F3H => {
        let f3h = new F3H;
    });
}
~~~

Also, how do I expose module in the file to import, without causing syntax errors in the `window` environment?

~~~ js
// :|
if ('function' === typeof import) {
    export default F3H;
} else {
    window.F3H = F3H;
}
~~~

Thanks!
How to loop over properties in objects in JavaScript?
Tags: javascript
Published: 2020-06-20 00:00:00

---
  title: How to loop over properties in objects in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Jun 20 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/loop-over-properties-methods-objects-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-1aae16c8145d41e6cc4faf6099b1884f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/loop-over-properties-methods-objects-javascript)
  
Looping over properties and methods can be achieved by combining `for...of` expression and `Object.entries()` method.

---

Let's say you have an object `John` with properties `name` and `age`.

```javascript
const John = {
  name: "John Doe",
  age: 23,
};
```

Now let's loop over this object.

First, let's convert our object into an array using the `Object.entries()` method.

```javascript
const John = {
  name: "John Doe",
  age: 23,
};

// convert object into an array
const arr = Object.entries(John);
```

The `arr` variable now contains the key and value as an inner array in its index positions as shown below.

```javascript
[
  ["name", "John Doe"],
  ["age", 23],
];
```

Now you can loop over the array using the `for...of` expression.

```javascript
const John = {
  name: "John Doe",
  age: 23,
};

// convert object into an array
const arr = Object.entries(John);

// loop over array
for (let [key, value] of arr) {
  console.log(key, ":", value);
}
```

You can use the array destructuring to get the value when looping over the array.

### Feel free to share if you found this useful 😃.

---
Increase code quality with Github Actions
Tags: ops, github, actions, code
Published: 2020-06-20 00:00:00

---
title: Increase code quality with Github Actions
date: '2020-06-20'
spoiler: We are always writing, every day, tons of lines of code…
tags: ops, github, actions, code
published: true
---

![](https://firebasestorage.googleapis.com/v0/b/from-tatooine.appspot.com/o/increase-code-quality-github-actions%2F0_PxKtXQ9gla_nvBCQ.jpg?alt=media&token=b1d2cee1-b8c6-4fbd-a8a2-cbfde2afe62f)

We are always writing, every day, tons of lines of code. We add new features and change existing ones. We fix bugs and, sometimes, we may create some bugs too.

You can avoid basic bugs by creating some automatic routines such as lint and test your app every push or pull request.

Let me show you a simple example of a bug easily catch by a lint workflow.

You have to implement a new feature on your app that changes a function calculation using parameters.

Take a look at this code below.

```javascript
// your great method
const getCalcResult = (parameterA, parameterB) => {
    return parameterA + parameterB
}

// your method call
function feature1() {
    const result = getCalcResult(1, 2)
    // more great code
}

// ------------------------

// your new feature
function feature2() {
    const result = getCalcResult(1, 2, 2)
    // more great code
}

// now your great method has changed to adapt
const getCalcResult = (parameterA, parameterB, parameterC) => {
    return parameterA + parameterB - parameterC
}

// but you forgot something...
// you didn't update the feature1() call
```

In this example above, someone forgot to take a look at all places where that function is called, causing side effects.

Now, let’s go to check out an Github Workflow file to execute a npm lint and test before our feature actually goes to master and production environment.

```
name: Lint and test
on:
  pull_request:
    branches:
    - master
jobs:
  build:
    name: Lint and Test on Ubuntu
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm install
    - name: Lint and test
      run: npm run test
```

Now take a look at a sample of workflow that failed and pull request is now bloqued until the details are fixed.

![](https://firebasestorage.googleapis.com/v0/b/from-tatooine.appspot.com/o/increase-code-quality-github-actions%2F1_ckHE_N8zxRSe8ObdEm0iFg.png?alt=media&token=384f577b-7de8-44b9-be0a-23168c74928f)

Hope this helps you to implement some automatic validations. These types of tips are essential to solve some points that go unnoticed by us developers.

Let me know if there is anything I can help you with. See you soon!
Day 19 of #100daysofCode - Hashes 101
Tags: ruby, codenewbie, womenintech, 100daysofcode
Published: 2020-06-19 23:48:37

During my project review, I was asked to iterate over a hash and sanitize the params inside. I am used to iterating over arrays and had forgotten how to iterate over a hash. Along came GOOGLE. I quickly googled, <i> how do you iterate over a hash?</i>

I was only allowed to use the Ruby docs and found this <a href="https://ruby-doc.org/core-2.5.1/Hash.html"> Ruby-Doc </a>

I realized iterating over a hash is relatively similar to an array, so I attempted to use a ``.map`` method. It did not take long for me to realize that using the  the ``.map`` method on a hash returns an array. WHO KNEW? So, I quickly realized that it was necessary to use the ``.each`` method. The docs revealed that ``.each`` on a hash should be used like this:

```
h.each {|key, value| puts "#{key} is #{value}" }
```

Pretty simple. I took this and created a ``santize_hash`` in my helpers and copied the code below.  

```
     def sanitize_hash(h)
       h.each {|key, value| [key] = sanitize(value)}
     end
```

However, this method was not going to work just yet. I had to create an empty hash and place the keys and values into that hash. I had to think back to the beginning, when I first started studying hashes and arrays. 

Hashes are essentially dictionaries. They are similar to arrays except they use objects as an index instead of numbers. 

There are two ways to create a hash:

```
hash = Hash.new 
```

OR

```
hash = {}
```

In order to complete my ``sanitize_hash`` method I adding an empty hash before iterating. Upon iteration, I added the key to the empty hash with the sanitized value, like this: 

```
     def sanitize_hash(h)
       hash = {}
       h.each {|key, value| hash[key] = sanitize(value)}
       hash
     end
```

I have discovered how important it is to have an understanding of hashes and plan to expand my knowledge on hashes in the near future. 

<center>
<h1> JUNETEENTH </h1>
Song of the day
</center>

{% youtube 6kxI1fcOjSY %}
Serve Static File with Koa✨
Tags: javascript, node, koa, koajs
Published: 2020-06-19 23:19:45

__[Koa.js](https://github.com/koajs/koa)__ is a very minimal and high perf. Node.js framework. For that, it will be one of the best solution for serve static files.

## Let's Start 🐣

After initializing a new project by generate new `package.json` file and creating an `index.js` file, we need to add `koa` and `koa-static`:

```bash
# npm .. 
npm i koa koa-static
# yarn ..
yarn add koa koa-static
```

Now, we are ready to setup the Koa.js application (*instance*), then add koa-static as middleware:

```js
// Modules
const Koa = require('koa');
const path = require('path');
const serve = require('koa-static');

// Expected here; serve static files from public dir
const staticDirPath = path.join(__dirname, 'public');

// Init Koa.js server
const server = new Koa();

// Mount the middleware
server.use(serve(staticDirPath));

// Run Koa.js server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server Listening on PORT ${PORT} 🚀 ..`));
```

**⚠️ I know that it's not the only way, but it's the fastest.**

## Example 👾

Let's say the folder we expected to use contains these files;

```bash
├── public/
|   ├── test.html
|   ├── test.md
|   └── test.png
|   └── test.txt
|   └── ...
```

So, you can use the following entrypoint to access these static files;

  - http://localhost:3000/test.html
  - http://localhost:3000/test.md
  - http://localhost:3000/test.png
  - http://localhost:3000/test.txt
  - http://localhost:3000/...

#### Thank you for reading ❤️. I hope, I didn't waste your time 😇.
Python Data Types
Tags: python, beginners, computerscience
Published: 2020-06-19 23:00:02


In programming, data type is an important concept.

Variables can store data of different types, and different types can do different things.

Every value in Python has a datatype. Since everything is an object in Python programming, data types are actually classes and variables are instance (object) of these classes.

## Python Contains 12 built-in data types

* 4 Numeric Type [ int , float , complex , bool ] 
* 4 Sequence Type [ str , list , tuple , range ]
* 2 Set Type [ set, frozenset ]
* 1 Mapping Type [ dict ]
* 1 Binary Type: [ bytes ]


## Mutable VS Immutable

|                |                            |
| -------------- |:--------------------------:|
| Mutable        | Values Changed             |
| Immutable      | Values Cannot Be Changed   |


![Mutable VS Immutable](https://intellipaat.com/mediaFiles/2019/02/pyhon3.png)

![Data Types: Mutable VS Immutable](https://dev-to-uploads.s3.amazonaws.com/i/4u1iub6zx9627iifrks3.png)



## Data Type In Action

<table>
<tbody>
<tr>
<th>Example</th>
<th>Data Type</th>
</tr>
<tr>
<td>x = "Hello World"</td>
<td>str</td>
</tr>
<tr>
<td>x = ["apple", "banana", "cherry"]</td>
<td>list</td>
</tr>
<tr>
<td>x = ("apple", "banana", "cherry")</td>
<td>tuple</td>
</tr>
<tr>
<td>x = range(6)</td>
<td>range</td>
</tr>
<tr>
<td>x = 20</td>
<td>int</td>
</tr>
<tr>
<td>x = 20.5</td>
<td>float</td>
</tr>
<tr>
<td>x = 1j</td>
<td>complex</td>
</tr>
<tr>
<td>x = True</td>
<td>bool</td>
</tr>
<tr>
<td>x = {"apple", "banana", "cherry"}</td>
<td>set</td>
</tr>
<tr>
<td>x = frozenset({"apple", "banana", "cherry"})</td>
<td>frozenset</td>
</tr>
<tr>
<td>x = {"name" : "John", "age" : 36}</td>
<td>dict</td>
</tr>
<tr>
<td>x = b"Hello"</td>
<td>bytes</td>
</tr>
</tbody>
</table>

Thus, Try with these snippets.
Let's discuss: Frontend Architecture
Tags: discuss, architecture, frontend
Published: 2020-06-19 22:24:59

Today I created a notion file with some **Posts**, **Books**, **Videos**, and **Courses** about frontend architecture and shared as public.

This document has contents in **PT** and **EN** languages.

[>> Frontend Architecture](https://www.notion.so/Frontend-Architecture-a87c79a1ae834708a8866140f014b548)

The focus here is to share knowledge about my studies and experiences with front-end architecture and get your feedback, tips, and tricks about this awesome and very important subject.

So, what's your experience with frontend architecture? Do you have any amazing content to share? Feel free to comment on this post. ✨
A-List of List of Resources on Github
Tags: github, git
Published: 2020-06-19 22:00:31

Here are some good resources lists I gathered from Github.

1. [awesome-math](https://github.com/rossant/awesome-math) (A curated list of awesome mathematics resources)
2. [free-for-dev](https://github.com/ripienaar/free-for-dev)
3. [awesome-for-beginners](https://github.com/MunGell/awesome-for-beginners) (A list of awesome beginners-friendly projects.)
4. [awesome](https://github.com/sindresorhus/awesome) (😎 Awesome lists about all kinds of interesting topics)
5. [nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) (The Node.js best practices list)
6. [javascript-questions](https://github.com/lydiahallie/javascript-questions)
7. [wtfjs](https://github.com/denysdovhan/wtfjs) (A list of funny and tricky JavaScript examples)
8. [awesome-selfhosted](https://github.com/picwellwisher12pk/awesome-selfhosted) (List of Free Software network services and web applications which can be hosted locally)
9. [awesome-sysadmin](https://github.com/picwellwisher12pk/awesome-sysadmin) (A curated list of amazingly awesome open source sysadmin resources)
10. [awesome-codeigniter](https://github.com/codeigniter-id/awesome-codeigniter) (A list of awesome Codeigniter core, helpers, hooks, language, libraries, third party and other cool resources for CodeIgniter 🔥)
11. [awesome-gif](https://github.com/davisonio/awesome-gif) (😎 A curated list of awesome GIF resources)
12. [A-to-Z-Resources-for-Students](https://github.com/dipakkr/A-to-Z-Resources-for-Students) (Curated list of resources for college students)
13. [awesome-vscode](https://github.com/viatsko/awesome-vscode) (🎨 A curated list of delightful VS Code packages and resources.)
14. [frontend-case-studies](https://github.com/andrew--r/frontend-case-studies) (A curated list of technical talks and articles about real-world enterprise frontend development)
15. [Checklist-Checklist](https://github.com/huyingjie/Checklist-Checklist) (🌈 A Curated List of Checklists ✔︎✔︎)
16. [Awesome-Linux-Software](https://github.com/luong-komorebi/Awesome-Linux-Software) (🐧 A list of awesome applications, software, tools and other materials for)
17. [awesome-casestudy](https://github.com/luruke/awesome-casestudy) (📕 Curated list of technical case studies about front-end development)
18. [awesome-angular](https://github.com/PatrickJS/awesome-angular) (📄 A curated list of awesome Angular resources by @AngularClass a @OneSpeed-io company)


___
_Original gist can be found here._
[github_resource_of_resources.md](https://gist.github.com/picwellwisher12pk/873d2c8d82a6aed19fa259d81b0578f2)