teleren/devto huggingface dataset:
AtroPIM - modern, free, open-source Product Information Management (PIM) System
Tags: php, pim, productinformationmanagement, productdatamanagement
Published: 2021-03-01 12:06:25

**Provider description**
AtroCore specializes in the development and long-term support of MDM, PIM and DAM solutions based on its own open source software products such as AtroCore, AtroPIM and AtroDAM. The systems can be used individually or in a software instance, depending on customer needs. The functionality of the system can be expanded with numerous free or paid modules. As a 360° PIM service provider, AtroCore offers consulting, implementation, development, support, migration and integration.

**Special features of the solution**
AtroPIM is a modern, free and very flexible [PIM system](https://atropim.com/journal/what-is-a-pim-system). AtroPIM has a configurable data model and layouts. A new field, entity or relation can be set up in a few minutes.
[AtropIM is an open-source software](https://atropim.com/), ie there are no license fees and the customer retains full control over the code and his own data.

The system has a modern service-based architecture and thus a REST API for 100% of the functionality. It is easily scalable and can be integrated fully automatically with any third-party system - ERP, WMS, CMS, marketplaces, online shops, etc.

The system is web-based, has user-friendly and responsive user interfaces and can be used on desktops, tablets and even smartphones. The users only see the fields and data records that they are allowed to see according to the authorization concept. The authorizations can even be configured at field level for the individual data records.

Thanks to the ordering module, the system can be used as a full-fledged e-commerce middleware system.

**System characteristics**:
• **Speed ​​& flexibility**: AtroPIM is extremely fast and very flexible in terms of configuration options
• **Excellent usability**: AtroPIM user interfaces are very well thought out, easy to use and will not overwhelm the user with unnecessary information. AtroPIM has responsive UI design.
• **Teamwork**: work together with your colleagues like a team in order to get the qualitative results as quickly as possible.
• **Functional scope**: AtroPIM offers many functions straight out of the box and can meet very high demands.
• **Independent of workplace**: Work with AtroPIM where you want and when you want, even from your smartphone, like with a real app.
CompileSwift Podcast - Season 2 Episode 13
Tags: podcast, swift
Published: 2021-03-07 00:32:06

---
title: CompileSwift Podcast - Season 2 Episode 13
published: true
date: 2021-03-01 12:00:00 UTC
tags: podcast, swift
canonical_url: 
---

[Play the episode here](https://anchor.fm/compileswift/episodes/My-M1-Mac-Mini-Set-up-Experiences-and-Tips-er7vlh)

## Show Notes

As a proud owner of a new Apple M1 Mac Mini, I set up the machine from a new install and go through the highlights and the gotchas in the hope that it helps you get that new hardware up and running.

### Mentioned in this episode

[My Mac Install Script](https://gist.github.com/GrfxGuru/12b1941f561d5e7b5be8ae7a5e07b98c)

[SetApp Software Service](https://go.setapp.com/invite/f8627428-ba2a-4c15-8976-3b78f218ce2b)
Get ready for element()
Tags: css, webdev, html
Published: 2021-03-01 11:59:51

<sup>**hold on**, the below only have support on Firefox but I will include screenshot of results.</sup>

Let's take a look into an unknown property called `element()`. From [the specification](https://drafts.csswg.org/css-images-4/#element-notation):

>The element() function allows an author to **use an element in the document as an image.** As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.

Yes, we can transform any elemet (having any content) to an image. A lot of magic can be done with this.

Here is some intresting use cases I have found

## Text masking

Combined with `mask()`, I can easily create "see through" effect with text without using SVG or JS. I can even animate it:

{% codepen https://codepen.io/t_afif/pen/OJbPRBq %}

![CSS masking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szv6nkn5vllozsaki7pa.png)![element masking CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2hodg1y7dfn49snwqh1.png)![animated CSS mask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4s96xzbpz3crhlee6fc.gif)

The main structure of the code is like below:

```html
<!-- the mask (The element used as mask need to be hidden) -->
<div style="height:0;overflow:hidden">
 <div id="text">
   Your text or any content here
 </div>
</div>
<!-- -->
<div class="main">

</div>
```

```css
/* we style the text like we want (font-family, font-size, etc)*/
#text {
  ....
}
/**/
.main {
  background:red; /* a random background, even a gradient can be used */
  mask:
    element(#text) center/contain no-repeat, /* element is used here like a background-image */
    linear-gradient(#fff 0 0); /* a bottom opaque layer */
   mask-composite:exclude;  /* we exclude the top layer from the bottom one to create the see through effect */
}
```

That's it! all the remaining is basic CSS.

## Watermark

Another useful (or maybe not) idea to create the repeated text we always see above content either for some copyright stuff or anything else:

{% codepen https://codepen.io/t_afif/pen/zYoxorP %}

![Watermark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6er5n559q4yp71wlzug9.png)


## Infinite image Slider

We all stumble upon the common issue of how to re-place the first image at the end to have an infinite slider. This can be done easily with JS or by using some complex CSS tricks. Using `element()` it's now a trivial task:

{% codepen https://codepen.io/t_afif/pen/MWbYPeJ %}

![Infinite slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqzcvwxcok99ratj9uqr.gif)
<sup>I know, my screen recorder is very bad ...</sup>

## A timer or a clock

An idea of a timer with a reduced html code. The same code can be modified to create a digital clock

{% codepen https://codepen.io/t_afif/pen/gOLeJOV %}

That's it for now but I am pretty sure there is a lot of funny ideas we can achieve with `element()`
How to use Forelse loop in Laravel Blade?
Tags: laravel, php, webdev
Published: 2021-03-01 11:36:22

# Introduction

If you have ever done any coding you are most likely well familiar with the `foreach` loops. Without any doubt, a `foreach` loop is one of the best ways to iterate over the elements of the collection.

However, in case you have an empty collection, you would need an additional `if` statement so that you could point a valid message to your users.

Luckily Laravel provides awesome Blade Templates that you could use to make your life easier!

In this post, I will show you how to use `forelse` in Laravel!

# Prerequisites

Before you get started you would need to have Laravel already installed.

If this is not the case you can follow the steps here on [How to Install Laravel on DigitalOcean with 1-Click?](https://devdojo.com/bobbyiliev/how-to-install-laravel-on-digitalocean-with-1-click)!

# Check if not empty then

What I would usually do in order to check if a collection is empty in my Blade view is to use an `if-else` statement like this:

```
@if($posts->isNotEmpty())
  @foreach ($posts as $post)
    
    <p>This is the post title {{ $post->title}}</p>


  @endforeach
@else
  
    <p>No posts found</p>

@endif
```

In the above example, we first wrap up our `foreach` loop in an `if` statement, and by using the `isNotEmpty()` we check if the collection is empty, and in case that it is empty we then print the `No posts found` message.

This works pretty well, but Laravel has a more elegant way of doing things!

# Forelse example

Rather than having to nest our `foreach` loop inside of an `if` statement, what we could do instead is use the `forelse` blade template:

```
@forelse ($posts as $post)
    
    <p>This is the post title {{ $post->title}}</p>

@empty
    
    <p>No posts found</p>

@endforelse
```

As you can see we would get the same result but with less code and it is much easier to read!

# Conclusion

You now know how to use `forelse` in Blade views and have much more cleaner and easier to read code!

For more great Blade templates, I would recommend checking out the official documentation [here](https://laravel.com/docs/7.x/blade).

If you are just getting started with Laravel, make sure to check this [introduction to Laravel video series](https://devdojo.com/course/laravel-7-basics)!

Hope that this helps!
how do I turn a JASON schema to a javascript object?
Published: 2021-03-01 10:39:07

I need to work with a "complex" object that contains an array of objects that contains an array of objects. 
I have a JASON schema that describes this object.
I need to create a javascript object according the this schema.
I do NOT need need to validate data according to this JASON schema. The javascript code populates the array's items and properties by means of direct assignment, such as:
mainObj.series[1].instance[2].mode = "Mode 2";
Following is the JSON schema of the object:
{ "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "My-Special-Schema-Or-Data-Structure-Title",
  "description": "Whatever I have to say about my described structure",
  "type": "object",
  "properties": {
    "version": {
      "description": " ... ",
      "type": "string"
    },
    "series": {
      "description": " ... ",
      "type": "array",
      "minItems": 1,
      "items": {
        "description": " ... ",
        "type": "object",
        "properties": {
          "name": {
            "type": "string"
          },
          "possModes": {
            "description": " ... ",
            "type": "array"
          },
          "instance": {
            "description": " ... ",
            "type": "array",
            "minItems": 1,
            "items": {
              "description": " ... ",
              "type": "object",
              "properties": {
                "date": {
                  "type": "string"
                },
                "mode": {
                  "type": "string"
                }
              },
              "required": [
                "date",
                "mode"
              ]
            }
          }
        },
        "required": [
          "name",
          "possModes",
          "instance"
        ]
      }
    }
  },
  "required": [
    "version",
    "series"
  ]
}
Gineko - Code search extension for GitHub
Tags: showdev, opensource, github
Published: 2021-03-01 10:37:11

Gineko is a code search extension for GitHub, available for Chrome.

Features 🔥
🔎 Search Code: Press Cmd+Shift+F to quickly search over all files in the current branch.
🗂 Jump Files: Press Cmd+/ to open the file list and let you navigate to any file
🎨 Support Dark Theme and Rich icons
↔️  Resizable layout

Github repo: https://github.com/codolab/gineko
Chrome store: https://chrome.google.com/webstore/detail/gineko-github-code-search/kcehbgaiaeifnpdhleceeckldighdlgk
How much for my personnal data on the Dark Web ?
Tags: security, privacy
Published: 2021-03-01 10:00:14

Since the Covid crisis, we have seen more and more attacks targeting hospitals and health establishments. 🏥

But how is it possible in the present day to say that we are going to attack a hospital? !! This is the question I asked myself. 🤔

And the answer is ultimately quite simple. There is a lot of money to be made with the data processed by a healthcare facility. 💰

And if you dig a little deeper, you find that many other types of data are worth a lot of money. 👷🏼

In this video, I show you the price of different types of data on the Dark Net and what to think about it. 📺

{% youtube RkX7rotBp9E %}

---

If you're more a visual person, here you can find the infography I used.

![How much for my personnal data on the Dark Web  Infography](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfoukuj71x73oejmsx13.jpg)

---

*If you like this content, push the like button, that helps spread the message.* 👍🏼
*If you think it can be useful to anyone in your network, share it.* 📨

---

Video produced by [Wild & Secure](https://wildnsecure.com), your consulting firm to all things security and real estate.
If you want to receive weekly quality content about security, subscribe to our newsletter [on our website](https://wildnsecure.com/contact).
Why EventEmitters instead of Subjects in Angular
Tags: angular, typescript, webdev, rxjs
Published: 2021-03-01 09:50:14

Recently I was thinking about how Angular uses the awesome library [RxJS](https://rxjs.dev/), and specifically when observable objects are created and expected.

One of them is the `EventEmitter` class that's used solely for emitting custom events in `@Output`-decorated properties, like this:

```ts
@Component({ ... })
class MyTab {
  @Output() selected = new EventEmitter<void>();
  ...
}
```

But what *are* `EventEmitter`s? Why are they used for `@Output` properties only? What do they add to the mix?

It turns out that the class `EventEmitter`, as of Angular 11.2.3, [extends RxJS' `Subject`](https://github.com/angular/angular/blob/11.2.3/packages/core/src/event_emitter.ts#L105), adding just two things to the mix:

* an `emit` method that internally just calls `super.next`;
* an optional, less-known constructor argument `isAsync` (defaulting to `false`), that schedules the event emission on a subsequent task upon subscription (using the plain old `setTimeout`).

That's it. `EventEmitter`s don't automatically complete when the view is destroyed (that would be great, IMO). They don't do anything special, but the async option *could* be useful somewhere else, right?

{% stackblitz angular-event-emitter-vs-subject %}

But digging a little deeper, it looks like the Angular team initially designed `EventEmitter` to be an extension of `Subject` out of... convenience? And had something else in mind that *could* probably not involve observables *at all*. That's why Ward Bell [stated](https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949) you shouldn't use `EventEmitter`s for *anything* else than `@Output` properties, and none should `pipe` them or `subscribe` to them.

But... that comment is five years old. And nothing has changed since then. `EventEmitter` still extends `Subject`, and I know for a fact that there's code in production that explicitly subscribes to `EventEmitter`s, or that uses simpler observables for `@Output` properties. And now the fact that `EventEmitter` extends `Subject` is also explictly [mentioned in the official documentation](https://angular.io/api/core/EventEmitter#usage-notes).

I think the Angular team should set this in stone and call it a day. I see no reason to change the observable nature of Angular's custom events.

Maybe I'm missing something here, and anything can change in the future. For the time being, I'll still refrain from using `EventEmitter`s for anything that they're not supposed to be used for, just in case. (Also because they don't actually add much. And the class name is pretty specific, and misleading if not used for... emitting events, duh.)

But coding `@Output` properties that are *not* `EventEmitter`s... eh, that could actually be useful and simplify some code. With caveats.
Which test will fall if we delete this piece of code?
Tags: rspec, ruby, testing, beginners
Published: 2021-03-01 09:34:05

Look, there is an alarm like this:

```ruby
class Alarm
  def to_human
    at.strftime("%k:%M").strip
  end
end
```

And this test:
```ruby
it "returns alarm in human-readable 24-hour format" do
  time = Time.local(2019, 7, 7, 10, 35)
  alarm = described_class.new(at: time)

  expect(alarm.to_human).to eq "10:35"
end
```

To see if these tests are enough, I look at the module being tested and ask myself: what would happen, if I remove this piece of code, which expectation will fail? If none, then I'm 100% missing checks or expectations.

In the alarm clock example, the `.strip` is in question. If you delete it, the test stays green. So the expectation is missing:

```ruby
it "strips any leading spaces" do
  time = Time.local(2019, 7, 7, 7, 15)
  alarm = described_class.new(at: time)

  expect(alarm.to_human).to eq "7:15"
end
```
Strapi & Gatsby Catalog Starter
Published: 2021-03-01 09:29:44

It's 2021 and e-commerce is booming. Everyone is using the internet to purchase anything and everything, from groceries to exercise equipment. This demands an engaging online experience where people research products before they buy them. They expect to see beautiful pictures and read detailed descriptions. If they know what they are looking for they want to find it easily.  Otherwise, browsing should be as enjoyable as window shopping.

In response to these needs, we at Strapi decided to make it easy for anyone to create a catalog website. The [Strapi catalog starter](https://strapi.io/starters/strapi-starter-gatsby-catalog) is complete with categories, search, related products, and plenty of room for product details. It is a great way to jumpstart your next e-commerce project.

All the product data can be managed from the Strapi admin and then connected to a blazing fast [Gatsby](https://www.gatsbyjs.com/) frontend. After deploying the Strapi Catalog template you can head into the CMS and change all the products to fit your needs. Then all you need to do is deploy the Gatsby starter frontend and you're all set!
If you want to take it one step further you can theme the website to your liking using [Tailwind CSS](https://tailwindcss.com/). Since creating new web experiences shouldn't be complicated we've made all the code open source. Use the Catalog starter as a jumping-off point then add or remove features as you wish. If you want you can even contribute to the project by reporting bugs and submitting pull requests.


You will find everything you need to get started on the [Github repository](https://github.com/strapi/strapi-starter-gatsby-catalog).

Want to learn more about the benefits of using Strapi together with Gatsby? Check out our [Gatsby CMS](https://strapi.io/integrations/gatsby-cms) page for tutorial and video resources. 

As always we are eager to see what you build, so please share it with us on [Twitter](https://twitter.com/strapijs).

Something not clear? Let me know in the comments and I'll be sure to reply!
Coding Live Stream #2: Stripe Integration
Tags: java, webdev
Published: 2021-03-01 09:23:06

If you want to find out how we developed our Stripe payment app further during yesterday's live-coding stream, check out [this brand new episode](https://youtu.be/gUqMdwgEAIQ).

We enhanced the application, so that users can submit custom $ amounts and feature requests, then started with Spring Boot database programming and much more!

See you next time (in ~2 weeks)!

{% youtube gUqMdwgEAIQ %}

Marco: https://twitter.com/MarcoBehler  | https://www.marcobehler.com
Throttle a series of fetch requests in JavaScript
Tags: node, javascript, 429, throttle
Published: 2021-03-01 09:19:23

Let's say you need to make API requests to process a huge array of data. With JavaScript's asynchronous nature it is easy to make a lot of requests in parallel. 

```js
import fetch from "node-fetch";

const data = [{ id: 1 }, { id: 2 }, [+1000 more objects]];

const fetchFromApi = (id) => {
  const url = `https://example.com/api/my-resource/${id}`;

  const response = fetch(url)
    .then((x) => x.json())
    .catch((error) => console.log(error));
  return response;
};

for (const i of data) {
  fetchFromApi(i.id).then((result) => // do something with result);
}

```
### HTTP code 429: Too many requests
However, most API providers don't like if you flood them with too many requests at the same time.
What you usually would get in return is a HTTP error code 429. If you check the documentation there might be a limitation of let's say maximum 5 requests per second.
But even if it is an internal API that isn't that restricted you might want to reduce the amount of parallel requests.

### Wait for the response before making another request?
What you could do is introducing a blocking structure to wait for the response of the previous call, before making another one using JavaScripts async/await syntax.

```javascript
import fetch from "node-fetch";

const data = [{ id: 1 }, { id: 2 }, [+1000 more objects]];

const fetchFromApi = async (id) => {
  const url = `https://example.com/api/my-resource/${id}`;

  const response = fetch(url)
    .then((x) => x.json())
    .catch((error) => console.log(error));
  return response;
};

for (const i of data) {
  const response = await fetchFromApi(i.id);
  // do something with result
}
```
While this would take longer to run, it would not solve the issue. The API might respond very quickly and you would still reach the limit of 5 requests per second.
On the other hand if the API responds slowly, you wouldn't benefit of parallelism at all, which would make the whole operation take longer than needed.

### Semaphore to the rescue
Using a throttling mechanism would be the more elegant way to deal with this issue. In computer science there's the concept of a [semaphore](https://en.wikipedia.org/wiki/Semaphore_(programming)) which describes a way to control access to a common resource by multiple processes.
There is a [library](https://github.com/vercel/async-sema) which implements that and allows you to limit the maximum parallel requests. The code would look something like this:

```javascript
import fetch from "node-fetch";
import {RateLimit} from "async-sema";

// configure a limit of maximum 5 requests / second
const limit = RateLimit(5);

const data = [{ id: 1 }, { id: 2 }, [+1000 more objects]];

const fetchFromApi = (id) => {
  const url = `https://example.com/api/my-resource/${id}`;

  // use the configured throttle here
  const response = fetch(url)
    .then((x) => x.json())
    .catch((error) => console.log(error));
  return response;
};

for (const i of data) {
  // checks if limit is reached
  await limit()
  fetchFromApi(i.id).then((result) => console.log(result));
}
```
9 features for banking app I learned after 1 year work in industry
Published: 2021-03-01 08:58:06

Hey guys! Here`s the list of the features i experienced while working as a web-developer in VTB. It will be great if you add yours in comments. 

1. Create a responsive design so that your banking website will display correctly on any device, from laptops and personal computers to smartphones and tablets.

2. Maximize customers’ data security; it should be among your priorities.

3. Maintain brand integrity, use corporate colors, and develop your design conception to follow.

4. Make banking website’s navigation simple and clean; it helps enhance user experience.

5. Make your website accessible for clients with visual disabilities.

6. Create a corporate blog with financial advice, company news, and helpful tips for clients; unique content will also attract new visitors to your banking website.

7. Use prominent, creative and appealing calls-to-actions; it’s one of the ways to improve conversions.

8. Make your banking website search engine friendly; it’s a crucial part of any online marketing strategy.

9. Integrate marketing automation tools (e.g., lead forms) into your website’s CRM to enhance email communications.

Summary of my thoughts about it you may find here   <a href="How to Create a Banking Website – Examples, Design, Features, and Cost">website banking development</a>