teleren/devto huggingface dataset:
🚀10 Trending projects on GitHub for web developers - 7th August 2020
Tags: react, javascript, webdev, typescript
Published: 2020-08-07 11:39:32

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Ink

Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. If you are already familiar with React, you already know Ink.

{% github vadimdemedes/ink %}

---

### 2. Flowy

A javascript library to create pretty flowcharts with ease.

{% github alyssaxuu/flowy %}

---

### 3. Nativefier

Nativefier is a command-line tool to easily create a desktop app for any web site with minimal configuration. Apps are wrapped by Electron (which uses Chromium under the hood) in an OS executable (.app, .exe, etc) for use on Windows, macOS and Linux.

{% github jiahaog/nativefier %}

---

### 4. FullCalendar

A full-sized drag & drop JavaScript event calendar

{% github fullcalendar/fullcalendar %}

---

### 5. GPT-3 Sandbox

The goal of this project is to enable users to create cool web demos using the newly released OpenAI GPT-3 API with just a few lines of Python.

{% github shreyashankar/gpt3-sandbox %}

---

### 6. Blog post workflow

List your latest blog posts from different sources on your Github profile/project readme automatically using this github action.

{% github gautamkrishnar/blog-post-workflow %}

---

### 7. Stencil

Stencil is a simple compiler for generating Web Components and static site generated progressive web apps (PWA). Stencil was built by the Ionic team for its next generation of performant mobile and desktop Web Components.

{% github ionic-team/stencil %}

---

### 8. How to Secure Anything

Its lessons are not just applicable to computer security. In fact, in this repo, I aim to document a process for securing anything, whether it's a medieval castle, an art museum, or a computer network.

{% github veeral-patel/how-to-secure-anything %}

---

### 9. Babylon.js

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

{% github BabylonJS/Babylon.js %}

---

### 10. Electron Fiddle

Electron Fiddle lets you create and play with small Electron experiments. It greets you with a quick-start template after opening – change a few things, choose the version of Electron you want to run it with, and play around. Then, save your Fiddle either as a GitHub Gist or to a local folder. 

{% github electron/fiddle %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
How to master CSS?
Tags: discuss, css, html, codequality
Published: 2020-08-07 11:37:16

In Web Development when we start to code the first things that we learn are HTML, CSS and JavaScript, but more we learn more far we go from the basic. 

Now I am in a point of my career where I want to focus on learning CSS. Not the syntax nor the basic bits of knowledge that are needed to build a stylesheet, but the best practices and best ways to build a responsive application — using pure CSS.

**Thus, what do you think? What is the best way to master CSS?**
Automate Sending a Proposal from Dropbox via SendGrid 
Tags: beginners, tutorial, wayscript
Published: 2020-08-07 11:28:09

Introduction
------------

If your business resolves issues for other businesses or some clients, you might want to send them a proposal justifying that you are the perfect fit. And if you have many potential customers per day, then sending proposals manually can be a difficult task.  
Today, we’ll use Wayscript to build a script to Send a proposal from dropbox via Sendgrid.

Prerequisites
-------------

No prerequisites for this tutorial but here is some documentation you might find useful :

*   [Working with Text SMS trigger](https://docs.wayscript.com/library/triggers/text-message-trigger)
*   [Working with SendGrid](https://docs.wayscript.com/library/modules/sendgrid)
*   [Working with DropBox](https://docs.wayscript.com/library/modules/dropbox)

Trigger
-------

For this post, I’ll use the Text SMS trigger. By sending a text message to (415) WYS-CRPT (+1 415 997 2778), you can easily trigger your script.  
The text message body will contain the program name followed by a colon, then any variables values, all separated by commas.  
Add it as a trigger.

![Adding the Trigger](https://wayscript.com/blog_img/126/1.png)

In this tutorial, the text message will look like this: Send a proposal from DropBox via SendGrid:\[email\].

![Text Message configuration](https://wayscript.com/blog_img/126/2.png)

Dropbox
-------

Wayscript provides a Dropbox module you can use to read or write specific documents. We’ll use this module to extract the text of the proposal and register it in the body of the email in Sendgrid.  
Add it as a new module.

![Adding DropBox module](https://wayscript.com/blog_img/126/3.png)

Once it’s added, add your account and set the mode to Read File from Dropbox. Set the file type to read and the path of the file.

![Configuring Dropbox module](https://wayscript.com/blog_img/126/4.png)

Now, it’s time to choose the outputs. Here we’ll get the full text.

![Selecting outputs](https://wayscript.com/blog_img/126/5.png)

Sendgrid
--------

Wayscript also provides a Sendgrid module you can use to make amazing and efficient integrations. We’ll use this module to send emails to the customers.  
Add it as a new step.

![Adding SendGrid module](https://wayscript.com/blog_img/126/6.png)

Once you’ve added the module and added your account, set the mode to simple email. For the inputs, we’ll provide the sender email (our account), the receiver email, and the body of the email.

![Configuring the module](https://wayscript.com/blog_img/126/7.png)

Once it’s done, be sure your trigger is on. Every time you’ll send a text message to (415) WYS-CRPT (+1 415 997 2778), the script will run.

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/user/mangabo_kolawole/v8gtA_o9
        ).
Native, web and hybrid applications: what to choose?.
Published: 2020-08-07 11:26:23

https://geniusee.com/single-blog/native-web-and-hybrid-applications-what-to-choose

Nowadays, only the lazy one does not wonder about the development of his mobile application. There are thousands of startups on the market trying to promote their ideas, and more and more business owners are trying to automate the most monotonous processes within companies, promote their products, or establish closer contact with an online audience.

However, the growing popularity of applications has led to the emergence of various types: there are native, hybrid, web applications on the market - which, in turn, has given rise to another headache - which type to choose? Well, this is exactly the question that we will try to answer in this article to help you make an informed decision, taking into account all the pros and cons of each type of application.

To get started, let's repeat the basics …

    What is a native application? A native application is an application that is available only on one platform and on no other, for example, an application that is available only for iPhone or Android phones.
    What is a web application? Web applications, again, are only available on one device, but this time on a computer / web browser. This is essentially a mobile-optimized site.
    What is a hybrid app? A hybrid application, if you haven’t guessed yet, is an app that works on both platforms. Hybrid applications are typically developed using Javascript and HTML5 for web applications, and are subsequently transformed into mobile ones.

Now let's compare the various aspects of Native, web and hybrid applications.

More Articles - https://geniusee.com/blog
I'm starting a newsletter!
Tags: showdev
Published: 2020-08-07 11:01:40

My two primary side projects get plenty of attention from me but I'm now at a stage where I'd like to look at a bit of promotion and to improve my reach.

I've been tweeting a link to every piece of content for both projects but it's time for something more than that so I decided to try my hand at creating a newsletter.

I'm using TinyLetters.com and my first newsletter was sent out this morning, you can find the archive here: https://tinyletter.com/cchana/archive

Feedback is appreciated and of course so are any additional subscriptions.

I'll continue to cross-post web development related articles here on dev.to and I'll be looking at how best to automate the curation of content to make sure I can get it out at the start of each month.
AWS Amplify - Mixed Public & Private Application Routing
Tags: aws, react, amplify
Published: 2020-08-07 10:58:17

Hi.  This is my first post!  I wanted to begin with something simple yet informative that has helped me on my side projects with Amplify.

This post assumes basic knowledge of setting up an Amplify project and is based on a React UI implementation.

Creating authenticated react applications with [@AWSAmplify](https://twitter.com/AWSAmplify) is simple when you want to wrap the App using *withAuthenticator(App)*.

This works well when you are creating a demo site but when you want to send this to production you usually would want a homepage and some public links to talk about your products etc.  There are many results on google relating to this kind of question and many ways to go about it.

Mixing public and private routes is usually a bit more involved.  You would start using *AmplifyAuthenticator* in a custom component and track the users logged in state rather than use *withAuthenticator*.

This GitHub example by [Mat Warger](https://dev.to/mwarger) is very informative, if your site needs it and worth learning how it works. https://github.com/mwarger/amplify-auth-examples

## A Simple Solution

But wait! I want to use the free goodness of *withAuthenticator*, my site isn't that complicated.  Here is where nested routing using react-router comes in.

Declare you main App component which contains the top level routing that contains a ProtectedApp component which could be for admin functions.

App.js

```
const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/" exact render={() => <Home/>}/>
                <Route path="/admin" render={() => <ProtectedApp />}/>
            </Switch>
        </Router>
    );
}

export default App;
```

The *ProtectedApp* contains the routes for the admin function and this is wrapped in *withAuthenticator(ProtectedApp)*

ProtectedApp.js

```
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

const ProtectedApp = () => {

    return (
        <div>
            <Header />
            <Switch>
                <Route path="/admin" exact render={() => <AdminPanel />}/>
                <Route path="/admin/create" exact render={() => <CreateUser />}/>
            </Switch>
        </div>
    );
}

export default withAuthenticator(ProtectedApp);
```

Now you can have private application routes protected but still able to use *withAuthenticator* to handle the auth while having easily accessible public routes for advertising and as a home page.

Hopefully this will help others navigate auth with Amplify!
How to find the best Dedicated Team of Developers?

Tags: devops, startup
Published: 2020-08-07 10:47:41

It is basic to discover and hire a dedicated team of software developers to guarantee the expert, ease of use and timely completion of any product launch. For new businesses that are hoping for great success, recruiting or hiring skilled and brilliant experts is essential to make a successful MVP. However, discovering developers with the perfect ability, experience, and dedication is very troublesome in the real world. If you too are facing issues to <a href="https://nuvento.com/dedicated-software-development-teams/">hire a dedicated development team</a> of developers to turn your project into reality, at that point we are here with a list of tips that will assist you with accomplishing your goal.

Tips to Find the Best Dedicated Team of Developers

1. Find Talented Developers on the Internet

Look for good developers in their social communities — Courses, lectures, conferences, special Facebook groups, or referrals from colleagues and friends. The best freelance websites allow you to find developers quickly. Social networking sites like Facebook and Twitter can add to your quest for a software developer, notwithstanding, however, as these sites aren’t devoted to developers, it might turn out to be quite a challenge by itself.

2. Consider Recommendations for the Best Developers

It's not easy to staff the best software developers and engineers. Either you can consider someone in your company, or someone you know, knows them and recommends them highly. It may sound like the most convenient way of finding the best talent.

3. Make Sure to Hire The Right Developers

When it comes to developers, not every person may have comparative ranges of abilities. For instance, some might be extraordinary in web designing, others in backend coding, while some might be sound in creating algorithms. There are 5 ways to check developers' coding skills before hiring them.
Dig into their programmer portfolio. 
Take a look at their GitHub account.
Ask about their use of Stack Overflow.
Live coding.
Programming tests

4. Hackathons & Ideathons - Next Gen Tools to Hire Quality Talent Developers

Developers these days are anxious to learn and keep in contact with modern technologies. The most ideal approach to discover talented and exceptional  developers is by attending events such as hackathons where you can discover capable developers eager to showcase their skills and improve their learning.
The MQTT Essentials are Back - New HiveMQ Video Series
Tags: news, startup
Published: 2020-08-07 10:43:15

[MQTT](https://www.hivemq.com/mqtt/) is the top choice of large companies worldwide for data exchange with constrained devices and server applications. You are just as likely to find MQTT connecting things in your living room, in a car as within a factory. The widespread adoption of MQTT led to the acceptance as an open OASIS and ISO standard. Today, MQTT is the absolute standard protocol for the Internet of Things worldwide.

In 2015, HiveMQ wrote the [MQTT essentials blog series](https://www.hivemq.com/mqtt-essentials/). A new article introducing the core concepts of MQTT was published every Monday - that was the beginning of the MQTT Monday. By explaining the features of the protocol and other essential information, our aim was to provide easy access to the subject. The idea was to make it easy to understand and implement MQTT quickly and successfully. 

Five years later, our blog series is still very successful. That's why we want to make the MQTT content even more accessible. We are happy to announce that MQTT Monday is back - this time in video format. Every Monday, from now on, we will publish a short MQTT Essential video on [our YouTube Channel](https://www.youtube.com/c/HiveMQ). Our new series of videos will provide a basic understanding of the MQTT protocol and will familiarize everyone with the MQTT protocol without reading the full specification.

There's a lot going on in the MQTT world right now: With the release of [MQTT 5](https://www.hivemq.com/mqtt-5/), the most feature-rich update to the MQTT specification ever, new features such as session & message expiry intervals, improved client feedback & negative ACKs, payload format description, and many more, have been introduced. The industry initiative “[Sparkplug](https://www.hivemq.com/blog/hivemq-eclipse-sparkplug-initiative/)” has evolved to define a common MQTT data specification to promote interoperability between device manufacturers and SCADA vendors. We believe this is just the beginning. Over the next few years, we expect continued massive growth of MQTT application in all industries, including manufacturing, automotive, critical infrastructure, logistics, smart cities, etc.

HiveMQ will continue to provide high-quality content that helps developers understand and adopt MQTT for their IoT applications. Keep watching our Youtube channel or subscribe to our newsletter to keep up to date on the latest news.

## MQTT Essentials - Part 1 | Introduction to MQTT

{% youtube jTeJxQFD8Ak %}
Make my game run on Android (Indie Game Devlog)
Tags: unity2d, android, game, devlog
Published: 2020-08-07 10:34:46

Hey!
This is the forth episode in this develog series, where I document the entire game making process.
In this week I finish working on the touch controls and fix some ui bugs, and also reveal when my game will be ready for launch!

{% youtube TE0Oq7a1MYU %}

> Like this post? 
> Consider Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Or Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
Issue: Cached version of index.html
Tags: react, html, cache
Published: 2020-08-07 10:24:50

I'm looking for a solution or insight on the following issue I have experienced. And please be kind - I'm relatively new to the React universe :)

When me or my team release updates to our website, created in React as a Single Page Application, simply refreshing a browser in an attempt to see the update, a cached older version of the website is commonly seen.

Since I have a background of being a web developer, noticing this issue, made me wonder how the caching of the index.html file is handled. I'm thinking, it's all nice and sweet that compiled JS files are hashed in order to announce new versions, but the index.html will always be called the same.

My mind is a bit boggled on what is telling the client side browser to get the updated JS files!?

Why is it hard to find SPA websites with an index.html that includes META tags regarding cache control (no-cache, expires, etc.)?

Is not caching the index file of SPA's always handled server side, which could indicate a problem with our hosting?

Looking really forward to any insights and feedback here :)
How the Global Elite Rules the World

Tags: business, entrepreneur, finance
Published: 2020-08-07 10:16:43

https://www.ziadabdelnourfinance.com/how-the-global-elite-rules-the-world-and-why-this-power-structure-must-be-dismantled/

The World Bank. The IMF. The Federal Reserve. These are just some of the central financial institutions that ensure that the global elite continues to rule us by using a very tight core of banks and other mega-corporations to dominate the world.
Future of Commodities Trading | Ziad K Abdelnour

Tags: business, entrepreneur
Published: 2020-08-07 10:15:41

https://www.ziadabdelnourblackhawk.com/the-future-of-commodities-trading/
All the economic markets and trading platforms, commodities trading is perhaps the most volatile. Successful traders invest time and resources in learning and following trends, activities, and global-scale economic indicators
How to Resolve Component Error In Lightning Web Component
Tags: salesforce, apex
Published: 2020-08-07 10:08:13

In lightning web component has excellent feature errorCallback which creates a error boundary. This error boundary captures all errors from its descendent component tree for life cycle events.errorCallback handler should be put in parent or container components. This will help us in getting all errors from child or grand child components. We can show errors in UI based on our UI design.

Here is parent or container component code which will catch all child component errors.

<template>
    <template if:true={hasError}>
        <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
            <span class="slds-assistive-text">error</span>
            <h2>Application Error:{error.message}
            </h2>
          </div>
    </template>
    <c-child-module></c-child-module>
</template>

import { LightningElement } from 'lwc';

export default class ErrorModule extends LightningElement {
    error;
    stack;
    hasError;
    errorCallback(error, stack) {
       this.hasError=true;
       this.error=error;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

You don’t have to use if:[true|false] in a template. For example, let’s say you define a single component template. If this component throws an error, the framework calls errorCallback and unmounts the component during rerender. https://www.quora.com/profile/Shailesh-Chaudhary-115
Native Cross-Platform Frameworks: Which to use?
Tags: ios, android, app, native
Published: 2020-08-06 14:57:46

Software development teams are always looking for tools to help them more efficient — and to provide their users with better apps. This is particularly true today when it comes to app creation. With the growth of our market, technologies we create are more commonly used and more connected devices than ever before.

Tools that can help developers to build cross - platform experiences and reuse code, features and prototypes can be extremely valuable with this sophistication. Cross - platform systems will reduce development costs — and off. The more technologies you are able to share across networks, the quicker you are able to market the app idea. Yet saving money and this time isn't a one-time thing. The experience further simplifies support and maintenance using cross - platform tools and leads to the constant development of the product roadmap.

## React-Native App Development
Like other cross-platform development frameworks, React Native was developed to help streamline application development – but built around popular web development tools beginning from JavaScript. React Native combines the best elements of native development with React, a JavaScript platform for user interface design.

In principle, it seems incredibly helpful to use a JavaScript framework for cross - platform mobile applications — and the similarities with the React JS syntax makes it even more fascinating. It is possible to develop both native apps and web applications using the same language and syntax.

React Native was developed during a hackathon on Facebook in 2013 and became open source in 2015. Facebook continues to invest and customer growth is accelerating in the React environment. Organizations such as Twitter, Airbnb, Uber, Target and Pinterest have introduced [development of React Native apps](https://underlabs.ca).

## Appcelerator Titanium
Appcelerator Titanium is another great mobile app development platform which can be used for fast app development launched on 25 November 2019. This application enables you to build cross - platform apps for different mobile platforms like Android and iOS.

This mobile app development platform allows you to build apps very quickly through drag - and - drop features. While you don't have a lot of software development experience, you can create a mobile app quickly with this great tool.

Titanium gives you a free version of this programme, but not all features and equipment. You are therefore required to purchase the premium version of this framework for mobile app development.