Code Daily

Modern JavaScript for web and mobile

Start Learning Now

Latest Courses

Hasura For Beginners
15 Lessons
React Navigation for Beginners
3 Lessons
Formik for Beginners
11 Lessons

Latest Screens

Code Daily Discord

Join our community and get help with React, React Native, and all web technologies. Even recommend tutorials, and content you want to see.

Join the community

Latest Tutorials

Focus on the Next TextInput when Next Keyboard Button is Pressed in React Native
Jason Brown
Jason Brown

We will use a combination of refs, onSubmitEditing callback, returnKeyType, and blurOnSubmit to move between text inputs when submitted. This will allow us to control exactly what input to move to while avoiding keyboard thrashing.

React Native
React Native
Creating Animated Rings with React Native Reanimated
Jason Brown
Jason Brown

Use React Native Reaniamted and useEffect to create expanding rings. We'll leverage useSharedValue, useAnimatedStyle, withDelay, withRepeat, and use interpolation to achieve our animated expanding ring effect.

react-nativereanimated
React Native
React Native
Use Before Insert Postgres Triggers as SQL Column Presets with Hasura
Jason Brown
Jason Brown

Column Presets sometimes aren't enough in Hasura. We will create a Postgres trigger function that can use hasura session variables to run SQL queries. Combined with BEFORE INSERT triggers we can effectively use SQL queries for column presets.

hasurapostgresfunctionstriggerscolumn presets
Hasura
Hasura
Cancel a Scheduled Event in Hasura
Jason Brown
Jason Brown

Hasura provides the ability to schedule HTTP events to be fired at a given date and time. We will use the /v1/query endpoint and the comment section to allow for cancelling events with an id that we create.

hasurascheduled eventcancel
Hasura
Hasura
Create a Task System with Unread Filtering and User Assignment in Hasura
Jason Brown
Jason Brown

We'll create a task system with permissions, unread task filtering and assigned task filtering all without a single line of code. Walking through the Hasura console creating the tables, relationships, and finally leveraging Hasura and its role based access control. We'll finish by showing off the GraphQL queries and mutations that you would use in your application.

hasuranotificationsunread
Hasura
Hasura
How to Use Hasura with PostGIS
Jason Brown
Jason Brown

PostGIS makes querying by latitude and longitude easy. With Hasura's first class support for PostGIS we can add GIS abilities to GraphQL and make querying for data by location possible.

hasura
Hasura
Hasura
Why You Should Use Hasura
Jason Brown
Jason Brown

Hasura is an incredible new tool that offers an easier way to build an app faster and securely with flexibility when you need it. Including database migrations, websocket real time data, role base access controls, schedule events, cron jobs, and more.

It has become a swiss army knife of tooling with just the right amount of configuration, and escape hatches when you need to execute your own business logic.

hasura
Hasura
Hasura
Getting Started with Hasura Locally
Jason Brown
Jason Brown

Getting started with Hasura locally on your development machine can be accomplished in a few short minutes. It requires Docker, the Hasura CLI, and a docker-compose.yaml file provided by Hasura.

A few commands later and you have a full fledged GraphQL engine running connected to a Postgres database.

hasura
Hasura
Hasura
Setup Emotion to use Tailwind classes in Next.js
Jason Brown
Jason Brown

We'll examine how we can use Emotion, Tailwind and Babel to build out string validated Tailwind classes but leverage the power of Emotion.

tailwindbabelemotion
Emotion
Emotion
Multi List Drag and Drop With react-beautiful-dnd, Immer, and useReducer
Jason Brown
Jason Brown

Getting setup with drag and drop can be complicated, especially with multiple lists. We'll explore how to use react-beautiful-dnd to create multi-list drag and drops. We'll also use Immer and useReducer to create immutable data structures to simplify and improve the performance of our code.

drag-and-drop
React Beautiful DND
React Beautiful DND