Skip to main content

Posts

Showing posts from December, 2019

realtime data with GraphQL subscriptions / apollo-server

using Apollo server: 1. server.js const { ApolloServer , gql , AuthenticationError , PubSub } = require ( 'apollo-server' ) const pubsub = new PubSub () const server = new ApolloServer ({ typeDefs , resolvers , formatError : error => { console . log ( JSON . stringify ( error )) return { ... error } }, introspection: true , playground: true , context : async ({ req , connection }) => { if ( connection ) { return { pubsub } } if ( req ) { const me = await getMe ( req ) return { me , secret: process . env . SECRET , pubsub } } } }) 2. schema: project.js extend type Subscription { projectAdded: Project } 3. resolver: project.js const PROJECT_CHANNEL = 'PROJECT_CHANNEL' Mutation: { addProject: combineResolvers ( isAuthenticated , async ( parent , { projectInput }, { models , me , pubsub }) => { ...

Styled Components - along with Material-UI

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions: https://material-ui.com/guides/interoperability/ Plain CSS Global CSS Styled Components CSS Modules Emotion React JSS Glamor https://emotion.sh/docs/styled

Barcode in OCCopier app - use QRCode to speed up data entry

import { BarCodeScanner } from 'expo-barcode-scanner' QRCode: generate QR code: https://www.the-qrcode-generator.com/

Integrate Barcode into React Native mobile app

On OC Copier mobile app, we have integrated QR Code into Contact Form, so contact info will automatically fill in when barcode is being scanned. To generate QR Code, we are using https://www.the-qrcode-generator.com Expo BarCodeScanner https://docs.expo.io/versions/latest/sdk/bar-code-scanner/ * feature: SendGrid provides service to send email notification https://sendgrid.com/ see pricing: Free Try it out! Send 40,000 emails for 30 days, then 100/day forever.

Upload file for React Native + Rest API

Using fetch : const uploadResponse = await uploadPhotoAsync ( uris [ 0 ], newFileName . concat ( ext )) const uploadResult = await uploadResponse . text () let formData = new FormData () formData . append ( 'file' , { uri: localUri , name: filename , type }) const url = ` ${ UPLOAD_PHOTO_TOANDMAP_URL }${ newFileName } ` return await fetch ( url , { method: 'POST' , body: formData , header: { 'content-type' : 'multipart/form-data' } })

Upload Files With GraphQL, Apollo, and React-Native

React-Native: we need extra component:  RNFetchBlob With React-Native, it’s a little bit more complicated. It boils down to intercepting the outgoing request and changing it to be a multi-part form and injecting the file blob. To trigger the action, you can include a special flag in your mutation that tells the code to treat the variable “file” as a file to upload.

use Quokka in Visual Studio code

To install Quokka: https://quokkajs.com/docs/ Once the extension is installed, press  Ctrl/Cmd + Shift + P  to display the editor’s command palette: export const arrayToObjectWithValue = array => array . reduce (( obj , item ) => { obj [ item . name ] = item . value return obj }, {}) export const objectToArray = obj => Object . keys ( obj ). map ( key => { return { name: key , value: obj [ key ] } }) const arr = [{ name: 'test' , value: 123 }, { name: 'test1' , value: 12 }] const obj = arrayToObjectWithValue ( arr ) console . log ( obj ) const obj2 = { test: 123 , test1: 222 } const arr2 = objectToArray ( obj2 ) console . log ( arr2 ) screen shot:

The Trip to the Pacific Garbage Patch

(My name is M&M) I was thrown into a garbage can after I was used from The Mystical Smoothie Palace. The wind was blowing and the garbage can was filled past the top, so I got blown off. I started rolling away towards the ocean. On my way to the ocean it was very rough because while I was rolling with the wind about 1 million people stepped on me (It was actually 20 people). I was flattened badly, but luckily I couldn’t feel a thing. A seagull tried to eat me but thought I didn’t taste good enough (thankfully). The wind kept blowing me until… I saw the sea for the first time!!! I’ve only heard tales about it from my old buddies, but this is better than I ever imagined!!! I can’t wait to get in!!! The wind blew me faster than ever, until I wasn’t rolling anymore, I was flying over the ocean!!! I’m in the ocean!!! The fresh smell!!! I was floating deeper in the ocean as I heard the waves roar faint away. Soon, I couldn’t see the shore, but I still heard voices. I turned around an...
3 kids: 2 pre-teens and one teenager.  I am going to use this blog to record my own foot prints in this journey of growth with our three kids as they themselves grow into young adults.  I will try to share our own experiences in helping them with their academic and extracuuricular endeavors. The goal is to provide some of our insights and hopefully encourage other parents to share their experiences and insights. 

Vocabulary Victory - Build vocabulary at your own pace

download links: iOS: https://apps.apple.com/us/app/vocabulary-victory/id1485320131 Android: https://play.google.com/store/apps/details?id=com.andmap.vocabularyvictory update: 1. max connection error on mysql, when do the subquery cards in the loop of query of project, move this function to front end => load flashCards: []  from dashboard.js to project-in-row.js flashCards : async ( project , args , { models }) => { /*const cards = await FlashCard.findAll({ where: { projectId: project.id } }) return cards */ return [] } https://www.qr-code-generator.com/