Notes

This article is useful when you’re almost ready to push an app live to production. Consider the following workflow. You’ve already implemented most of the frontend and backend of your app, and it’s ready to go live in to production. All the while during development, you’re using the local Mongodb. You push it live onto Vercel, changing the environment variables for the DB to point to the production DB instead of the test DB. You then deploy it. ...

So, I’ve previously written about Zustand before, and implemented it with Immer to get and set simple states, but I realized my understanding of it is not deep enough for me to implement cases where I need to set nested states. The purpose of this little write up is to figure out what exactly is going on with Zustand and Immer, so that I can achieve my goals. Understanding Zustand Using Zustand is simple. All you need to do is to create a store ...

There’s basically 3 main things you need do to set up a shared state via useContext. Determine the top level component you want to pass your context to. For my “Smarter Way to Learn X” case, it was the App component, because any other route beneath it would consume that state. Create the context in its own file, and export it. This involves a simple 2 line code, in a ‘context’ folder of your app: ...

Deploying Site to Netlify Upload project into Github Login to Netlify Click Add a New Site -> import an existing project Follow instructions Changing Domain Go to Netlify Site Setting -> Domain Management Select Add custom domain -> select Verify You need to add DNS records on your provider to point your domain or subdomain to your site on Netlify. -> under Custom Domains, click Check DNS Configuration It should open up to a DNS configuration page, with a list of name server hostnames: dns1.p01.nsone.net dns2.p01.nsone.net dns3.p01.nsone.net dns4.p01.nsone.net ...

Alright the previous Mail merge workflow is shit. I found a new workflow, that leverages on the python mailmerge package. Here’s the new workflow: Open Bash, cd mailmerge && code . Go to mailmerge_database.csv and paste the info inside from whereever. Use the VSCode csv plugin. Edit mailmerge_template.txt or pick the right template Run mailmerge to dry run. Run mailmerge --no-limit to dry run again Run mailmerge --no-dry-run Run mailmerge --no-dry-run --no-limit Amazing.

Steps for Mail Merge: [Go to the winners’ sheet] Go to new sheet Add Recipient and Email Sent columns (and whatever other variables you’d want to include) Draft a email template, with the variable names in {{}} Go back to sheet, add this function to Extensions/App Scripts, and save it. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 // To learn how to use this script, refer to the documentation: // https://developers.google.com/apps-script/samples/automations/mail-merge /* Copyright 2022 Martin Hawksey Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /** * @OnlyCurrentDoc */ /** * Change these to match the column names you are using for email * recipient addresses and email sent column. */ const RECIPIENT_COL = "Recipient"; const EMAIL_SENT_COL = "Email Sent"; /** * Creates the menu item "Mail Merge" for user to run scripts on drop-down. */ function onOpen() { const ui = SpreadsheetApp.getUi(); ui.createMenu('Mail Merge') .addItem('Send Emails', 'sendEmails') .addToUi(); } /** * Sends emails from sheet data. * @param {string} subjectLine (optional) for the email draft message * @param {Sheet} sheet to read data from */ function sendEmails(subjectLine, sheet=SpreadsheetApp.getActiveSheet()) { // option to skip browser prompt if you want to use this code in other projects if (!subjectLine){ subjectLine = Browser.inputBox("Mail Merge", "Type or copy/paste the subject line of the Gmail " + "draft message you would like to mail merge with:", Browser.Buttons.OK_CANCEL); if (subjectLine === "cancel" || subjectLine == ""){ // If no subject line, finishes up return; } } // Gets the draft Gmail message to use as a template const emailTemplate = getGmailTemplateFromDrafts_(subjectLine); // Gets the data from the passed sheet const dataRange = sheet.getDataRange(); // Fetches displayed values for each row in the Range HT Andrew Roberts // https://mashe.hawksey.info/2020/04/a-bulk-email-mail-merge-with-gmail-and-google-sheets-solution-evolution-using-v8/#comment-187490 // @see https://developers.google.com/apps-script/reference/spreadsheet/range#getdisplayvalues const data = dataRange.getDisplayValues(); // Assumes row 1 contains our column headings const heads = data.shift(); // Gets the index of the column named 'Email Status' (Assumes header names are unique) // @see http://ramblings.mcpher.com/Home/excelquirks/gooscript/arrayfunctions const emailSentColIdx = heads.indexOf(EMAIL_SENT_COL); // Converts 2d array into an object array // See https://stackoverflow.com/a/22917499/1027723 // For a pretty version, see https://mashe.hawksey.info/?p=17869/#comment-184945 const obj = data.map(r => (heads.reduce((o, k, i) => (o[k] = r[i] || '', o), {}))); // Creates an array to record sent emails const out = []; // Loops through all the rows of data obj.forEach(function(row, rowIdx){ // Only sends emails if email_sent cell is blank and not hidden by a filter if (row[EMAIL_SENT_COL] == ''){ try { const msgObj = fillInTemplateFromObject_(emailTemplate.message, row); // See https://developers.google.com/apps-script/reference/gmail/gmail-app#sendEmail(String,String,String,Object) // If you need to send emails with unicode/emoji characters change GmailApp for MailApp // Uncomment advanced parameters as needed (see docs for limitations) GmailApp.sendEmail(row[RECIPIENT_COL], msgObj.subject, msgObj.text, { htmlBody: msgObj.html, // bcc: 'a.bbc@email.com', // cc: 'a.cc@email.com', // from: 'an.alias@email.com', // name: 'name of the sender', // replyTo: 'a.reply@email.com', // noReply: true, // if the email should be sent from a generic no-reply email address (not available to gmail.com users) attachments: emailTemplate.attachments, inlineImages: emailTemplate.inlineImages }); // Edits cell to record email sent date out.push([new Date()]); } catch(e) { // modify cell to record error out.push([e.message]); } } else { out.push([row[EMAIL_SENT_COL]]); } }); // Updates the sheet with new data sheet.getRange(2, emailSentColIdx+1, out.length).setValues(out); /** * Get a Gmail draft message by matching the subject line. * @param {string} subject_line to search for draft message * @return {object} containing the subject, plain and html message body and attachments */ function getGmailTemplateFromDrafts_(subject_line){ try { // get drafts const drafts = GmailApp.getDrafts(); // filter the drafts that match subject line const draft = drafts.filter(subjectFilter_(subject_line))[0]; // get the message object const msg = draft.getMessage(); // Handles inline images and attachments so they can be included in the merge // Based on https://stackoverflow.com/a/65813881/1027723 // Gets all attachments and inline image attachments const allInlineImages = draft.getMessage().getAttachments({includeInlineImages: true,includeAttachments:false}); const attachments = draft.getMessage().getAttachments({includeInlineImages: false}); const htmlBody = msg.getBody(); // Creates an inline image object with the image name as key // (can't rely on image index as array based on insert order) const img_obj = allInlineImages.reduce((obj, i) => (obj[i.getName()] = i, obj) ,{}); //Regexp searches for all img string positions with cid const imgexp = RegExp('<img.*?src="cid:(.*?)".*?alt="(.*?)"[^\>]+>', 'g'); const matches = [...htmlBody.matchAll(imgexp)]; //Initiates the allInlineImages object const inlineImagesObj = {}; // built an inlineImagesObj from inline image matches matches.forEach(match => inlineImagesObj[match[1]] = img_obj[match[2]]); return {message: {subject: subject_line, text: msg.getPlainBody(), html:htmlBody}, attachments: attachments, inlineImages: inlineImagesObj }; } catch(e) { throw new Error("Oops - can't find Gmail draft"); } /** * Filter draft objects with the matching subject linemessage by matching the subject line. * @param {string} subject_line to search for draft message * @return {object} GmailDraft object */ function subjectFilter_(subject_line){ return function(element) { if (element.getMessage().getSubject() === subject_line) { return element; } } } } /** * Fill template string with data object * @see https://stackoverflow.com/a/378000/1027723 * @param {string} template string containing {{}} markers which are replaced with data * @param {object} data object used to replace {{}} markers * @return {object} message replaced with data */ function fillInTemplateFromObject_(template, data) { // We have two templates one for plain text and the html body // Stringifing the object means we can do a global replace let template_string = JSON.stringify(template); // Token replacement template_string = template_string.replace(/{{[^{}]+}}/g, key => { return escapeData_(data[key.replace(/[{}]+/g, "")] || ""); }); return JSON.parse(template_string); } /** * Escape cell data to make JSON safe * @see https://stackoverflow.com/a/9204218/1027723 * @param {string} str to escape JSON special characters from * @return {string} escaped string */ function escapeData_(str) { return str .replace(/[\\]/g, '\\\\') .replace(/[\"]/g, '\\\"') .replace(/[\/]/g, '\\/') .replace(/[\b]/g, '\\b') .replace(/[\f]/g, '\\f') .replace(/[\n]/g, '\\n') .replace(/[\r]/g, '\\r') .replace(/[\t]/g, '\\t'); }; } Refresh the sheet: it should have a mail merge button. ...

Alright, so ytd I was exposed to the basics of Hardhat. Today, I’ll get a bit more in detail on what certain pieces of the development workflow works. A big part of hardhat development is interacting with the ethers.js object. This object allows you to: Simulate accounts through signers Compile contracts through contract factories .getContractFactory Deploy contracts .deploy() Interact with deployed contracts Act as other others through .connect() Then, there are some unique test conditions that I havn’t seen before: revertedWith(). ...

Okay so after some digging around, I’ve made the decision on the 21st day of my journey into Web3 that I’ll be sticking to Hardhat for full stack dApp development. At this point, I literally know nothing about Hardhat. No matter. My first step is to use the Hardhat documentation. Basics of Hardhat Installing Hardhat npm init npm install --save-dev hardhat Creating a Hardhat project npx hardhat Getting the available commands npx hardhat in project folder ...

So I’ve got a fully functioning app and a login system - the next feature I want to add to it is an email confirmation system. How do I do that? In this article, I’ll be summarizing the main points for implementing such a system based on this website. FRONT END App.js containing routes So, within their App.js, the basic logic is this: if the path points to /, then we go to login landing. If it points to confirm/:id, it’ll bring us to the confirm component. ID here refers to the unique id the database creates and is available on ’this.props’ inside the component at this.props.match.params.id ...

Was looking through the ZKSwap project and assessing wether there’s potential in it. Overall…there’s not much going on there, although there’s some substantial capital flowing into the project, much of it in terms of ZKSwap token transactions. They’re aiming to be a contender in the Swap space, and their branding / leverage is really on the ZK technology. They’re not affiliated to ZKSync or Matter Labs, although they’ve tried to leverage on their brand name a little in their Github. ...