teleren/devto huggingface dataset:
Installing HAXcms on Reclaim cloud
Tags: haxtheweb, webcomponents, cloud
Published: 2020-07-29 16:04:51

[HAXcms](https://github.com/elmsln/haxcms) is our headless CMS offering that's being built as part of the [HAX universe](https://haxtheweb.org). It's an entirely web components driven solution to rapidly built blogs, doc sites, and helps support our mission of delivering educational content in a platform / format agnostic way.

## Reclaim hosting vs Reclaim cloud

Reclaim hosting is a shared hosting vendor that has one-click installs of HAXcms (via CPanel) and a provider I've enjoyed working with in the past. My students learn about CMS technology because of the low cost and simplicity of installation that Reclaim offers, but the point of reclaim hosting isn't scale, it's experimentation.

Because our interests align on experimentation and [that philosophy should drive technology need](https://www.youtube.com/watch?v=Eksr9y4nxQ4&list=PLJQupiji7J5e8t_dL8T1iVq-bMPElKTI2), they were the first hosting provider to support HAXcms, and with their new offering, they are solving the scale aspect. Reclaim.cloud is a scalable / cloud infrastructure version of the Reclaim hosting platform. If Reclaim hosting is great for my students, this is a tool built more for me (developer / educator).

In this screen-cast, I demonstrate how to use the [marketplace](https://community.reclaimhosting.com/t/haxcms-now-in-marketplace/3189) in Reclaim cloud in order to take HAXcms for a spin. It provides the same ease of setup that their CPanel based stuff does but in a way that can click a button to scale.

{% youtube xljYom-6gVc %}

## Is this overkill?
Oh totally; HAXcms's speed is entirely derived from the usage of CDNs to ship the [unbundled webcomponents](https://dev.to/btopro/part-1-how-penn-state-unbundles-web-components-for-cdn-deployments-20di) to the end user as quickly as possible. If you don't want to learn how to setup and run HAX11ty though, HAXcms on cloud infrastructure is a simple way to stamp something out with high performance and SEO.

The SEO implication comes from the PHP back-end in HAXcms serving the content into the page at run time. This way a crawler will get the content (unlike currently how haxtheweb.org is hosted off gh-pages and won't get the same SEO indexing). HAX11ty does this by statically building the pages via 11ty's build engine, which is something we'll probably switch to for these sites in the future.

So do you really need cloud infrastructure to host mini-static sites who are getting all their assets from CDNs anyway??? No, but it doesn't make it any less awesome and it gives the option of running those JS assets off of systems that are not real CDNs yet allow for local delivery (ensuring higher resiliency then a global CDN which could theoretically go down / change).
Na klienty ČS se cílí v češtině
Published: 2020-07-14 16:38:25

Česká spořitelna, coby oblíbená lokální banka, je pochopitelně také velmi populární mezi tvůrci podvodných e-mailů. Spořitelna o nich samozřejmě ví a má na svém webu dokonce [sekci](https://www.csas.cz/cs/o-nas/bezpecnost-ochrana-dat/phishing), kde o nich pravidelně píše (a je znát, že jsou čím dál sofistikovanější).

Ke mně se dostala starší verze, která není tak promyšlená, ale je plně v češtině (dokonce správně) a nese s sebou PDF přílohu:

![E-mail](https://dev-to-uploads.s3.amazonaws.com/i/g7azhk4oxzdnpd866yly.png)

![Příloha](https://dev-to-uploads.s3.amazonaws.com/i/g0mc7ym0y05pntxi9vv4.png)

Pojďme si nejprve rozebrat, co mě zaujalo na e-mailu samotném:

![Co je na e-mailu podivné](https://dev-to-uploads.s3.amazonaws.com/i/6bzbpfeo02q51q8sfmis.png)

1. Předmětem je aktualizace platebních karet...
2. ... ale v textu se dočteme o doložení podkladů k platbě, což je můstek k pohrození terorismem, ale v celku to moc nesedí.
3. Ženské příjmení je správně česky (👍).
4. Dostáváme na výběr buď odpovědět tady, nebo zajít na pobočku - což je věc, která by z banky klidně opravdu příjít mohla.
5. Chybí podpis a jakýkoliv přímý kontakt.
6. Příloha je PDF s anglickým názvem. Slovo *conformation* sice existuje, ale tady to vypadá spíš na překlep.
7. Jméno odesílatele se tváří jako CSAS, ale ve skutečnosti e-mail přišel z Jitčina Gmailu. Zajímavé je, že stejná persona je použita i dále v příloze.

![Co je na příloze podezřelé](https://dev-to-uploads.s3.amazonaws.com/i/brrth76i7883b0bvcskt.png)

1. Zajímalo by mě, kolik lidí dokáže vyplnit cokoliv přímo do PDF. Ale určitě se najdou tací, kteří si dokument vytisknou, vyplní a třeba vyfotí.
2. Přesně ty údaje, které neříkáme ani do telefonu, natož abychom je posílali kamsi e-mailem.
3. Paní Schmiedová opravdu ve Spořitelně pracovala jako ředitelka HR, ale skončila v roce 2017. To nám taky napoví, kam časově tento phishing zařadit. (Mimochodem - vůbec není podezřelé, že se lidské zdroje, tedy interní oddělení firmy, stará o bezpečnost karet zákazníků, že?)

Nikdy neposílejte své jméno, rodné číslo a hlavně veškeré informace potřebné pro placení po internetu někam e-mailem. Ale to je snad jasné 😉
3 Massive Upcoming Virtual Tech Conferences
Tags: erlang, elixir, functional
Published: 2020-07-29 15:46:38

---
title: 3 Massive Upcoming Virtual Tech Conferences
published: True
description: Code Sync, ElixirConf EU and Erlang Solutions bringing you 3 world-class tech conferences 
tags: Erlang, Elixir, FunctionalProgramming
//cover_image: https://direct_url_to_image.jpg
---

Hey team,

We're onboard to help out with three of our favourite conferences who have now gone virtual.

## Code BEAM V
10-11 of September. This is the speaking line up that was originally organised for Code BEAM STO, now delivered online. Speakers include Viktória Fördős (Cisco NSO Core), Christopher Price (Ericsson Head of Software Technology), Robert Virding (Co-Creator of Erlang & Erlang Solutions, Senior Systems Architect) just to name a few. Early Bird tickets are available but closing soon. See the full speaking line up and buy tickets [here.](https://www2.codesync.global/codebeamvreddit1) 

## ElixirConf EU Virtual
7-8 October. Our first ElixirConf EU Virtual in June had over 400 attendees, and the feedback was overwhelmingly positive. The second edition of ElixirConf EU Virtual will feature the same brilliant line-up of speakers that we had organised for this year’s physical event - only virtually. We’ve organised one of the most exciting events we’ve ever had with talks from Chris McCord, Linda Achieng' Otieno, Sigu Magwa, Marlus Saraiva and heaps more. See the full speaking line up and buy tickets [here.](https://www2.elixirconf.eu/elixirconfeuoctred)



##Code MESH V
Code Mesh is London’s leading alternative tech conference, designed to be a melting pot for curious, inquisitive innovators. The conference connects programmers who believe in finding best-of-class solutions to any problem. Going virtual means their cross-language community goes global, allowing Code Mesh V to connect and inspire even more people. Very Early Bird tickets sell out within 24h every year, but you can join the [waiting list here](https://www2.codesync.global/code-mesh-v/waiting-list-2020).

If you’d like to be part of the first ever global Code Mesh V event and inspire the cross-language community of ambitious programmers the [call-for-talks](https://eventil.com/events/code-mesh-v/cfp) and [call-for-tutorials](https://docs.google.com/forms/d/e/1FAIpQLSdhiLA9iciqIQvPTFDEO_TgLwoTr6eOabD_yoKIHUWs9t_f-Q/viewform) are now open.
Card Layout Design with Hover Effects using HTML & CSS
Tags: css, beginners, tutorial, design
Published: 2020-07-29 15:43:29

{% youtube ZtouCM6gN1M %}

In this Tutorial, we'll build Card UI Design with Hover Effects using  HTML & CSS. This Project-based Tutorial is suitable for all especially Beginners. The card also has a zooming effect when we hover on it.

📕 Images download link:  https://drive.google.com/drive/folders/16JSUYBA304iS9ijkTlw3CKPiD0RDdlaN?usp=sharing

🧠 Concepts covered in this video:
 - Flexbox
 - Opacity
 - CSS transitions
 - Transforms
 - Modern Web Design

If you are interested in more real-world **project-based tutorials** then consider checking out the [**Code League**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA) Youtube channel and inspire the tech industry.

Share this [video](https://youtu.be/ZtouCM6gN1M) with a friend

Let’s connect:
[Instagram](https://www.instagram.com/codeleague7)
[Twitter](https://www.twitter.com/codeleague7)
Under the hood webpack: core library behind the event-driven architecture
Tags: javascript, webpack
Published: 2020-07-29 15:31:09

---
title: Under the hood webpack: core library behind the event-driven architecture
published: true
description: Webpack architecture is heavily based on events (each plugin is basically a set of event listeners called during compilation). Under the hood, webpack uses a library called `tapable` to encapsulate "publish-subscribe" implementation.
tags: javascript, webpack
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lbif1t79p34nyel8utrd.jpg
---
> Read [full interactive version](https://codecrumbs.io/stories/webpack-tapable-core) of this post on my blog.

Webpack architecture is heavily based on events. Each webpack **plugin** is basically a **set of listeners** hooked on different events during compilation phases. Under the hood, webpack uses a library called `tapable` to encapsulate "publish-subscribe" implementation.

Tapable provides different "hooks" classes (`SyncBailHook`, `AsyncParallelHook`, etc.) to "hook" on events with some extra rich functionality (e.g. interceptions or cross-listeners integration).

For example, `DefinePugin` (used to define environment variables, e.g. `NODE_ENV`) and `SizeLimitsPlugin` (reports oversized chunks, e.g. *size > 250kb*) tap into compiler instance hooks: the first one listens to compilation event in order to insert extra variables and the latter to afterEmit event - to proceed with assets evaluation once they were emitted.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bio4fv5seebwzznhse2g.png)

Let's have a quick look under the hood of `webpack` at `SizeLimitsPlugin` integration.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1orqn76u9ivwu0kkx4gd.png)

1) `SizeLimitsPlugin` is instantiated and assigned to compiler in `WebpackOptionsApply` if performance option is enabled from webpack config.
2) Then `SizeLimitsPlugin` taps on `afterEmit` event and will sit still until most of the compilation flow is done and that particular event is called.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e4dhs7jvixs58cgya7vn.png)

Once the event is called the plugin will do its job (collecting oversized chunks in our case 2, 3).

> Indeed, all plugins are assigned similarly, so then you have a pipeline of plugins performing different operations but staying very loosely coupled.

> Read [full interactive version](https://codecrumbs.io/stories/webpack-tapable-core) of this post on my blog.
PHP Storm Cheat Sheet for Mac
Tags: phpstorm, php, laravel
Published: 2020-07-29 15:23:34

Command+Shift+F to find a string in your project.
Command+Shift+V to view paste and clipboard history
Command+, to open the preferences tool
Command+1 to toggle side bar

Double Click Shift to search all files
Command+O to find a class
⌘⌥O to find a symbol or function (useful for searching for php or javascript functions)
Command+Shift+O to find a file in your project.

Command+K to Commit a change to git (you need to run a git init in your project folder first though for this to work).
Control+Tab to switch views such as the projects folder or the built in terminal.
Option+Command+T to surround a block with a new directive such as a an if statement.
Command+N to create a new file
In your PHP preferences you can set the file and code templates for when each new object is created.
Command+arrowUp to open a floating project navigator.
Command+E to view recent files.
Command + Option + Z to rollback changes since last commit.
⌥⇧⌘F on the database to search for any string in the database.
Command + Option + L to for a json into a more readable format (on a json scratch file)
/** then enter to fill out function comments.
Command + N to create a new scratch file
Command + Enter on a mysql or sql create a sql query on the database
Write a small frontend reactive view-model framework based on jQuery with less than 500 lines code
Tags: framework, jquery
Published: 2020-07-29 15:21:42

---
title: Write a small frontend reactive view-model framework based on jQuery with less than 500 lines code
published: true
description: This article introduce a small frontend js framework called `jqvm` which is based on jQuery with less than 500 lines code, and the framework is reactive like Vue does.
tags: framework, jQuery
//cover_image: https://direct_url_to_image.jpg
---

<div align="center">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kln1fzl1895kw1ppw2b9.png)</div>

Last weekend I wrote a small tool which helps photo producers to bind watermark to their pictures. The tool is very easy and is written in Electron and jQuery. However, I have used Vue and React for a long time, it is sometimes awkward back to an old tech. So after I finished the tool, I summarized the practice and wrote a small reactive view-model for jQuery. 

```html
<template id="app">
  <div class="title">{{title}}</div>
  <div class="content">{{content}}</div>
  <div class="view-count">View: {{view}}</div>
</template>
```

```js
const view = $('#app')
  .vm({
    title: 'Title',
    content: 'JQVM is a small frontend jquery plugin, and even a framework.',
    view: 0,
  })
  .on('click', state => function(e) {
    state.view ++
  })
  .mount()
```

The `template` part is very like vue's template, but we do not announce event listeners in template. Events are bound with `on` as jQuery does. The listener callback function is a combination of currying function. `state` is point to inner vm state, when you change the state, the view will rerender.

The core code is less than 500 lines, you can find the source code [here](https://github.com/tangshuang/jqvm). After minizing, the bundle file's size is only 46k (without jQuery). *Small is beautiful.*

[https://github.com/tangshuang/jqvm](https://github.com/tangshuang/jqvm)

JQVM is not built with virtual dom, it is not used to build big applications, it is used to help jQuery lovers to setup a small app quickly and enjoy the reactive programming. Just play it with CDN, as you imported jQuery before. **Believe me, you can setup a jqvm app in 10 seconds!**
Keep your Code and Database in Sync
Tags: dotnet, csharp, database, sql
Published: 2020-07-29 15:13:45

---
title: Keep your Code and Database in Sync
published: true
description: In this EF Core Community Standup, software architect Tony Sneed shows how to template EF Core scaffolding to reverse engineer databases on your terms.
tags:  dotnet, csharp, database, sql
---

[Entity Framework Core](https://jlik.me/h5j) is an object mapper that enables database interactions using familiar C# code. It supports multiple backend databases including SQLite, SQL Server, Oracle, PostgreSQL, MySQL and Cosmos DB. Using nothing more than LINQ queries, developers can write code that interacts with C# classes that is automatically translated into database calls.

In this episode of the [EF Core Community Standup](https://jlik.me/h5k), software architect Tony Sneed shows how to extend a built-in feature of EF Core called [scaffolding, or reverse engineering](https://jlik.me/h6f), by using templates (via [Handlebars](https://jlik.me/h6g)) to take control of generated code.

{% youtube 6Ux7EpgiWXE %}

You can find the links that were discussed in the show at:

[https://www.theurlist.com/efcore-standup-2020-07-22](https://www.theurlist.com/efcore-standup-2020-07-22).

Have feedback for the EF Core team? [File an issue](https://github.com/dotnet/efcore/issues/new) or join one of our many [online discussions](https://github.com/dotnet/efcore/discussions).
iOS là gì? Lập trình iOS làm gì?
Tags: vntalking, ios, swift
Published: 2020-07-29 15:01:56

Có thể hiểu đơn giản, IOS là hệ điều hành có trong mỗi thiết bị di động của Apple, điển hình là trên chiếc điện thoại Iphone.

Như các bạn đã biết, sự bùng nổ trên thị trường điện thoại, "Iphone" là dòng sản phẩm đang được săn đón vô cùng rộng rãi. Với tính năng vượt trội, cấu hình khủng, khả năng tối ưu hóa hiệu năng của thiết bị cũng như cảm nhận của người dùng là một lợi thế mà hệ điều hành IOS đã lại. Đã đem lại sự vượt trội cho hãng và vượt mặt nhiều đối thủ cạnh tranh trên thị trường. Từ đó, lập trình IOS đang cũng đang trở thành một xu hướng mới của giới trẻ và đang ngày càng mở rộng.
             
Một trong những khó khăn lớn nhất ngăn cản bạn đến với nghề lập trình iOS chính là thiết bị. Để có thể bắt tay vào tìm hiểu ngôn ngữ lập trình này, bạn cần một chiếc máy tính chạy MAC OS.
Điều đó hiện giờ là không mấy khó khăn khi chỉ cần trong tay có 5-7 triệu bạn đã sắm được ngay một dòng sản phẩm của thương hiệu này. Bên cạnh đó, để bắt đầu bạn cũng cần cho mình một chiếc điện thoại Iphone để có thể tìm hiểu về hệ điều hành IOS.
            
Điều thứ 2, các bạn phải buộc học cho mình ngôn ngữ lập trình. Cũng như các ngôn ngữ khác trên thế giới dùng để giao tiếp, ngôn ngữ lập trình cũng vậy. Đó sẽ là công cụ quan trọng để bạn có thể giao tiếp với máy tính thông minh. Phải từ đó, bạn mới có thể đọc, hiểu và yêu cầu máy tính thực hiện các câu lệnh.
             
Bước tiếp theo để trở thành một lập trình viên IOS, là bạn cần phải biết được các thao tác để lập trình. Tôi khuyên các bạn nên ,sử dụng các phần mềm như : TUTSPLUS, APPCODA. Đây đều là các trang wed chứa đựng nhiều thông tin về lập trình IOS, đủ để cung cấp kiến thức cho bạn từ cơ bản đến nâng cao. Ngoài ra có thể mua thêm các khóa giảng online, học offline qua youtube....

Lưu ý: Khi [học lập trình](https://vntalking.com) IOS, bạn có thể cảm thấy chán nản bởi việc học ngôn ngữ lập trình. Không những học IOS còn đòi hỏi tính tự giác cao, tự học là chính. Nhưng nếu vượt qua được thì thành quả sẽ rất đáng trông đợi, nhất là trong xã hội đang ngày càng lan tỏa mạng di động mobile cùng hàng tỉ ứng dụng yêu cầu trình độ chuyên viên.
Nguồn: https://vntalking.com/de-thanh-chuyen-gia-lap-trinh-ban-dau-can-toi-10000-gio.html
Our First Ionic App
Published: 2020-07-02 05:49:10

---
title: Our First Ionic App
published: true
date: 2020-07-02 03:00:00 UTC
tags: 
canonical_url: https://daily-dev-tips.com/posts/our-first-ionic-app/
---

It's been a while for me since I've made an app, you must realize I did build apps for a living at one stage, and these were all built in `Ionic`.

Even though we are now years ahead, `Ionic` is still a solid bet, so let me guide you through making our first app in `Ionic`.

## What is Ionic?

`Ionic` is an open-source mobile UI Toolkit to create cross-platform native and web applications.Basic a framework to create hybrid apps.

Nowadays, they support multiple languages, which is amazing; you can choose `Angular`/`React` or `Vue`.

## Installing the Dependencies

Getting started with `Ionic` is quite easy nowadays.

> Make sure you have node installed!

Open your favorite terminal of choice (iTerm2) and run the following command:

```
npm install -g @ionic/cli
```

Then we can start creating our app

```
ionic start ionicApp tabs
```

This will start a boilerplate application with a tabbar menu.

The start command will prompt us with some questions:

- Framework, we can choose angular/react (I'll be doing Angular)
- Integrate Capacitor (Click yes)

`Ionic` has a full market place where we can get even more starter templates: [Ionic Marketplace](https://market.ionicframework.com/)

Once this command is run, we are ready to run our app for the first time.

## Running our Ionic App

So the install is done, now what.

We `cd` into the folder using `cd ionicApp` and run the command:

```
ionic serve
```

This will install all packages and open our dev server in the browser.

You will now see a basic application with three tabs at the bottom.Feel free to navigate through the tabs to see what happens.

## Ionic Structure

We will go more in-depth into making new pages in another article, but let's quickly open the project in our editor.

The application itself sits inside the `src` folder.In there we can find the following folders:

- `app`: Holds the actual pages and root `app.component`, it also holds the `app-routing` which handles the routes.
- `assets`: Holds the icon and any assets we want to use
- `environments`: Here, we find a local and prod file, we can add our variables here as well.
- `theme`: Holds a variable file, inside we can overwrite ionic variables.

There you have it, our first introduction to `Ionic`.Let's see what we can make and change to it.

Feel free to download the starter project on [GitHub](https://github.com/rebelchris/ionic-app).

### 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)
Cezerin - Open Source React Shopping Cart CMS
Tags: news, webdev, javascript, react
Published: 2020-07-29 14:58:14

Let me introduce Cezerin - https://github.com/cezerin2

Cezerin is React and Node.js based eCommerce platform. React Shopping Cart. 

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

#Cezerin Platform:

* Cezerin API - Backend.
* Cezerin Store - Frontend.
* Cezerin Admin - Dashboard.
* Cezerin Client - JavaScript client for Cezerin REST API.

#Built with:
* NodeJS
* ReactJs
* Redux
* ExpressJs
* Babel
* WebPack
* MongoDB

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

#Links

- [GitHub](https://github.com/cezerin2)
- [Community Site](https://cezerin.org)
- [Demo Store - Plusha Theme](https://plusha.cezerin.net)
- [Demo Store - Default Theme](https://cezerin.net)
- [Demo Dashboard](https://cezerin.net/admin)
- [Docs](https://cezerin.org/docs)
- [Facebook](https://facebook.com/cezerin)
- [Twitter](https://twitter.com/cezerin2)

Single-Page Application with React server-side rendering.

SEO Friendly. Google Analytics eCommerce Tracking included.

Online Demo Store - Plusha Theme

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

Online Demo Store - Default Theme

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

Dashboard

Client-side dashboard use JSON Web Token (JWT) to access REST API.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vqo4bml3wnxppjpm1so5.png)
Daily Challenge #275 - Casino Chips
Tags: challenge
Published: 2020-07-29 14:51:59

---
title: Daily Challenge #275 - Casino Chips
published: true
series: Daily Challenge
description: How many days can you play at the casino?
tags: challenge
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/rfpdxg3wbb0yswfh6z7s.png
---
You are given three piles of casino chips: white, green and black chips in the form of an array. Each day you need exactly two chips of different colors to play at the casino. You can chose any color, but you are not allowed to use two chips of the same color in a single day.

You will be given an array representing the number of chips of each color and your task is to return the maximum number of days you can play.

**Examples:**
solve([1,1,1]) = 1, because after you pick on day one, there will be only one chip left
solve([1,2,1] = 2, you can pick twice; you pick two chips on day one then on day two
solve([4,1,1]) = 2

Brute force is not the way to go here. Look for a simplifying mathematical approach.

**Tests:**
solve([8,1,4])
solve([7,4,10])
solve([12,12,12])
solve([1,23,2])

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5e0b72d2d772160011133654) comes from KenKamau on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_