Netlify Forms – Manage forms and submissions without any server-side code

Wow, this is an awesome addition to Netlify:

On Netlify, any HTML form can instantly accept submissions—no backend code or infrastructure required. As soon as your form is deployed, you start seeing submissions appear in your Netlify dashboard.

Just add the netlify attribute to any form and everything gets wired up automatically.

Netlify will automatically create some backend code to handle the form submissions. The submissions will be stored and then shown in your control panel. Comes with a free tier of 100 submissions/month.

Netlify Forms →

Video by Phil Hawksworth

React Native CLI 3.1.0 and 4.0.0 – What’s New?

Mike Grabowski on the recent changes in React Native CLI:

In this short article, I want to give you an overview of what’s new and what’s coming up in React Native CLI. Also, I’ll tell how do we plan our work going forward on it.

The fact that React Native now shares the build cache with XCode is a welcome change. The “Improved support for different build flavors on Android” is a relief.

Version 4 comes with the latest RC of React Native 0.62: 0.62.0-rc.2

React Native CLI 3.1.0 and 4.0.0 – What’s New? →

Use the Bootstrap 3 Glyphicons with Bootstrap 4

Bootstrap 4 no longer bundles (a subset of) glyphicons. Instead, Bootstrap recommends to buy the full set or use a different set of icons.

However, if you want to quickly copy-and-paste some stuff over from a legacy Bootstrap 3 project, the easiest of getting the old icons is through loading bootstrap4-glyphicons. It’s a project that only contains the glyhpicons from Bootstrap 3.

Once installed link to its CSS file and you’re good to go.

<link href="/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css" rel="stylesheet" type="text/css" />

bootstrap4-glyphicons →

Redux in 30 lines of PHP

To get the full details behind Redux, Sorin Nunca has recreated it using PHP:

As I usually try to understand the tools I’m using, the following tries to be a toy implementation of Redux in PHP, in the hopes of gaining a deeper understanding of the concepts behind Redux.

Also covers combineReducers.

Redux in 30 lines of PHP →

⁉️ Looking to get started with Redux? Egghead has a great video course by Redux’ creator Dan Abramov.

💡 Also check this recent implementation of Redux in 24 Lines of JavaScript

The Hooks of React Router

If you’re looking to get started with React Router – or looking to migrate away from version 4 – this article on CSS-Tricks will introduce to it and its hooks:

React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router.

The Hooks of React Router →

The CSS Cascade – Or, How browsers resolve competing CSS styles

Amelia Wattenberger is at it again with this nice interactive page on the CSS Cascade

Every time we write a CSS declaration (or rule), it will enter the CSS Cascade, which will determine whether or not it will end up as the final style. The further down the cascade a declaration falls, the less likely it will end up as the final style.

Time to get your specificity mojo on! But don’t be fooled, there’s more to only element/class/id differences …

The CSS Cascade →

React Native + SwiftUI

Kureev Alexey on how to use SwiftUI Components in an React Native App.

Today, we’ll write a proxy that allows developers to use SwiftUI in their React Native applications.

The Native SwiftUI Button Component looks like this:

struct SwiftUIButton : View {
  @ObservedObject var props = ButtonProps()
  
  var body: some View {
    VStack {
      Text("Count \(props.count)")
        .padding()
      
      Button(action: {
        self.props.onCountChange(["count": self.props.count + 1])
      }) {
        Image(systemName: "plus.circle.fill")
          .foregroundColor(.white)
          .padding()
          .background(Color.red)
          .clipShape(Circle())
      }
    }
    .padding()
    .clipShape(Circle())
  }
}

You’d then use like you’d use any other Native Component:

import React, {useState} from 'react';
import {requireNativeComponent} from 'react-native';

const SwiftUIButton = requireNativeComponent('SwiftUIButton');

const App = () => {
  const [count, updateCount] = useState(0);
  return (
    <SwiftUIButton
      style={styles.container}
      count={count}
      onCountChange={e => updateCount(e.nativeEvent.count)}
    />
  );
};

To make it work he created two new macros to use: RCT_EXPORT_SWIFTUI_PROPERTY and RCT_EXPORT_SWIFTUI_CALLBACK.

React Native Meets SwiftUI →
ReactNativeWithSwiftUITutorial Repository →

Building further upon the code, some nice integrations have already been made. Such as this one:

Google Cloud Build + Google Cloud Run: Fixing “ERROR: (gcloud.run.deploy) PERMISSION_DENIED: The caller does not have permission”

Google Cloud Build is cool. Google Cloud Run is awesome. But when configuring Google Cloud Build to automatically deploy your built container to Google Cloud Run you might see this error:

ERROR: (gcloud.run.deploy) PERMISSION_DENIED: The caller does not have permission

If you’re seeing this error you forgot to set up the required IAM Permissions for the Cloud Build Service Account. Below I’ll show you the commands to fix this error.

~

As detailed in the Cloud Run documentation, a user needs the following permissions to deploy new Cloud Run services or revisions:

  1. run.services.create and run.services.update on the project level. Typically assigned through the roles/run.admin role.
  2. iam.serviceAccounts.actAs for the Cloud Run runtime service account. By default, this is [email protected]. The permission is typically assigned through the roles/iam.serviceAccountUser role.

By default – for security reasons – the Cloud Build Service Account does not have the permissions to manage Cloud Run, explaining why you’re getting errors.

~

You can set up these required permissions using the Google Cloud Console, yet I prefer to do this from the CLI using the Google Cloud SDK (gcloud), by invoking the commands below:

# Config
GC_PROJECT=your-gcp-project-id
GC_PROJECT_NUMBER=your-gcp-project-number

# Grant the Cloud Run Admin role to the Cloud Build service account
gcloud projects add-iam-policy-binding $GC_PROJECT \
  --member "serviceAccount:[email protected]" \
  --role roles/run.admin

# Grant the IAM Service Account User role to the Cloud Build service account on the Cloud Run runtime service account
gcloud iam service-accounts add-iam-policy-binding \
  [email protected] \
  --member="serviceAccount:[email protected]" \
  --role="roles/iam.serviceAccountUser"

💡 To know the values for GC_PROJECT(_ID) and GC_PROJECT_NUMBER, run gcloud projects list or go to the Home of your project inside Cloud Console.

After running these two commands, re-trigger a build and Google Cloud Build will be able to deploy your built container onto Google Cloud Run.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face. Thanks!

☕️ Buy me a Coffee ($3)