Skip to content →

Coding

container

Create and deploy a wordpress staging environment with docker in minutes

Are you using WordPress and want to test updates before you release them to the public? Want to avoid messing with your live environment? Docker can help! This article will show you how to create a staging environment with docker and deploy your changes.

Click here to read more

How to Overcome Distractions and Stay Focused When Working on Software

Are you constantly distracted by emails, social media notifications, and other interruptions while working on a software project? You’re not alone. According to recent research, the average software developer is interrupted at least every eleven minutes – leading to a lack of focus and decreased work productivity. But don’t give up hope! In this article, I’ll share tips for how to stay focused and overcome distractions so that you can be successful in your software development projects.

 

Click here to read more


SPA REACT Vercel-App of ways4eu.wordpress.com

Created a Website as a mirror to my wordpress.com website ways4eu.wordpress.com. This website is designed as a SPA (Single-Page- Application) REACT-based vercel-site.
It makes extensive use of the frontity framework.
SPA-View of ways4eu.wordpress.com

Click here to read more

Privacy-Policy for NewsManiac News-App in Google-Playstore

Privacy policy

General

NewsManiac News-App is developed by one main developer, with a few people helping from time to time, mostly with translations.

Privacy Policy ("Policy") describes how information obtained from users is collected, used and disclosed.

By using NewsManiac News-App, you agree that your personal information will be handled as described in this Policy.

The NewsManiac News app collects news articles via the default content provider https://www.newsapi.org
An API key is required for use, which is available from the content provider and must be purchased independently by the user.
To use the content provider's news via app, the API key must be stored in the NewsManiac news app and is stored locally on the end device.
The data will not be passed on.

Information being collected

NewsManiac News-App does not collect any personal identifiable information.



Changes to the Policy

If the Policy changes, the modification date below will be updated. The Policy may change from time to time, so please be sure to check back periodically.

Disclaimer 
The author assumes no liability for the topicality, correctness, completeness or quality of the application. Liability claims against the author relating to material or immaterial damage caused by the use or non-use of the information provided or by the use of incorrect or incomplete information are excluded in principle, unless the author can be proven to have acted with intent or gross negligence fault exists. The author expressly reserves the right to change, supplement or delete parts of the application or the entire product or to temporarily or permanently discontinue publication without prior notice.

Last modified: 14 October, 2022.

Contact

If you have any questions about the Policy, please contact me via office@ways4.me
Click here to read more

Privacy-Policy for Simple-Zeichnen-App in Google-Playstore

Privacy policy

General

Simple Zeichnen-App is developed by one main developer, with a few people helping from time to time, mostly with translations.

Privacy Policy ("Policy") describes how information obtained from users is collected, used and disclosed.

By using Simple Zeichnen-App, you agree that your personal information will be handled as described in this Policy.

The app has no internet access, so it is not sending anything outside the device whatsoever.

Information being collected

Simple Zeichnen-App does not collect any personal identifiable information.

The `WRITE_EXTERNAL_STORAGE` permission is used only for opening and saving files.

The `READ_EXTERNAL_STORAGE` permission is used only for opening and saving files.

Changes to the Policy

If the Policy changes, the modification date below will be updated. The Policy may change from time to time, so please be sure to check back periodically.

Disclaimer 
The author assumes no liability for the topicality, correctness, completeness or quality of the application. Liability claims against the author relating to material or immaterial damage caused by the use or non-use of the information provided or by the use of incorrect or incomplete information are excluded in principle, unless the author can be proven to have acted with intent or gross negligence fault exists. The author expressly reserves the right to change, supplement or delete parts of the application or the entire product or to temporarily or permanently discontinue publication without prior notice.

Last modified: 25 September, 2022.

Contact

If you have any questions about the Policy, please contact me via office@ways4.me
Click here to read more

Container Komponenten in React

Ein React-Pattern, das im Coding von React Frontends Berücksichtigung finden sollte, ist das Container-Komponenten-Pattern.

Die Idee ist einfach:

Ein Container ruft Daten ab und rendert dann die entsprechende Unterkomponente. So simpel.

"Entsprechend" bedeutet eine Komponente mit demselben Namensbestandteil:

GuineaPigsContainer => GuineaPigs
AnimalsContainer => Animals
EventListContainer => EventList

Konzept verstanden ?

Warum Container?

Angenommen, du hast eine Komponente, die Kommentare anzeigt. Da du noch nichts vom Container-Komponenten-Pattern gehört hast, platzierst du deinen Code so, dass  alles an einem Ort ist:

class CommentList extends React.Component {
  this.state = { comments: [] };

  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }  render() {
    return (
      <ul>
        {this.state.comments.map(c => (
          <li>{c.body}—{c.author}</li>
        ))}
      </ul>
    );
  }
}

Deine Komponente ist sowohl für das Abrufen als auch für das Präsentieren von Daten verantwortlich. Daran ist nichts „Falsches“, aber einige Vorteile von React werden damit nicht nutzbar, zB:

Wiederverwendbarkeit

CommentList kann nur unter genau den gleichen Umständen wiederverwendet werden.

Datenstruktur

Die Markup-Komponenten sollten die Erwartungen an die benötigten Daten angeben. PropTypes sind dafür optimal.
Unsere Komponente hat eine Erwartung an die Datenstruktur, kann diese jedoch nicht ausdrücken. Wenn sich der json-Endpunkt ändert, wird der Datenfluß zur Komponente unterbrochen (silent).

Noch einmal. Diesmal mit einem Container

Lass uns zunächst den Datenabruf in eine Containerkomponente verlagern:

class CommentListContainer extends React.Component {
  state = { comments: [] };  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }  render() {
    return <CommentList comments={this.state.comments} />;
  } 
}

Lass uns nun CommentList überarbeiten, um comments als prop zu verwenden:

const CommentList = props =>
  <ul>
    {props.comments.map(c => (
      <li>{c.body}—{c.author}</li>
    ))}
  </ul>

Also, was haben wir damit erreicht ?

Tatsächlich eine ganze Menge....

  • Wir haben das Abrufen und Rendern von Daten getrennt.
  • Wir haben unsere CommentList-Komponente wiederverwendbar gemacht.
  • Wir haben CommentList die Möglichkeit gegeben, PropTypes festzulegen und damit ggf. auch im Fehlerfall "laut" zu scheitern.

Containerkomponenten können die Struktur und Lesbarkeit von React-Code erheblich verbessern und sie erleichtern das Lesen des Komponenten-Codes.

Probiere es aus !

Click here to read more

%d bloggers like this: