DEV Community: Aphinya Dechalert

#004: The Week In Stories —AI-driven fruit growing to SaaS bridge

Aphinya Dechalert — Mon, 21 Feb 2022 00:00:12 +0000

Hi all!

This week of {Tech & Dev} includes a varied list of articles and tech finds across the web. From AI-driven fruit growing (mmmmmmm….yummier fruit, that is) to things you didn’t know you could do in Chrome — I hope you enjoy my selection for this week’s stories.

1. Add CSV import to your Node.js app using UseCSV

CSV is convenient. The likes of Excel, Google Docs, spreadsheet export functions, and reporting applications all support CSV in some capacity. CSV works well with large data sets and the major perk is that it can easily be converted to other formats such as XML or JSON.

This is where the hard part starts — how do you easily convert CSV data for your app, MVP, or SaaS? For JavaScript-based applications, there’s a plethora of free CSV parsers available. While these libraries are great, open-source is known to pose a security risk such as relaxed integration oversight and potentially poor and integrated practices.

So what are your options? What alternatives to free CSV parsers do you have? One solution is to use UseCSV.

Read it here 👉 Add CSV import to your Node.js app using UseCSV

2. Human-Readable JavaScript: A Tale of Two Experts

Everyone wants to be an expert. But what does that even mean? Over the years I’ve seen two types of people who are referred to as “experts.” Expert 1 is someone who knows every tool in the language and makes sure to use every bit of it, whether it helps or not. Expert 2 also knows every piece of syntax, but they’re pickier about what they employ to solve problems, considering a number of factors, both code-related and not.

Read it here 👉 Human-Readable JavaScript: A Tale of Two Experts

3. Thoughts On Markdown

Markdown in all its flavors, interpretations, and forks won’t go away. However, it’s important to look at emerging content formats that try to encompass modern needs. In this article, Knut shares his advice against Markdown by looking back on why it was introduced in the first place, and by going through some of the major developments of content on the web.

Read it here 👉 Thoughts On Markdown

4. Semantic Versioning for Express APIs

Software versioning is the process of assigning a unique identifier for a specific state of a software application, API or library. As developers, it is essential to follow a formal convention for versioning since it helps to communicate the changes and their impact.

Semantic versioning is one of the most used and straightforward versioning conventions available, and it provides a three-part version number for your application. Here is a quick guide on using semantic versioning for Express APIs.

Read it here 👉 Semantic Versioning for Express APIs

5. Your fruit is gonna get tastier — and you’ve got AI to thank for it

Which flavors and chemical compounds make a particular variety of fruit more appealing to consumers can be identified and predicted using artificial intelligence, according to our recently published study.

Flavor, defined by scientists as the interaction between aroma and taste, is chemically complex. The sugars, acids, and bitter compounds in food interact with the taste receptors on our tongues to invoke taste, while volatile compounds that interact with olfactory receptors in our noses are responsible for aroma.

Read it here 👉 Your fruit is gonna get tastier — and you’ve got AI to thank for it

6. Subsetting Font Awesome to Improve Performance

Font Awesome is an incredibly popular icon library. Unfortunately, it’s somewhat easy to use in a way that results in less-than-ideal performance. By subsetting Font Awesome, we can remove any unused glyphs from the font files it provides. This will reduce the number of bytes transmitted over the wire, and improve performance.

Let’s subset fonts together in a Font Awesome project to see the difference it makes. As we go, I’ll assume you’re importing the CSS file Font Awesome provides, and using its web fonts to display icons.

Read it here 👉Subsetting Font Awesome to Improve Performance

7. Firebase vs. Digital Ocean App Platform vs. AWS Amplify

Which bootstrap cloud stack should you choose?

Google Firebase, Digital Ocean App Platform, and AWS Amplify all seem to do the same thing — they exist to help you launch your app into the cloud as quickly as possible. But how comparable are they as a full-stack cloud service?

Here is a quick rundown of everything you need to know about the services, things to consider, and how each cloud platform impacts your short and long-term infrastructure and strategy.

But before we begin, there is a question that needs to be answered — are full-stack app platforms worth the time and investment?

Read it here 👉 Firebase vs. Digital Ocean App Platform vs. AWS Amplify

8. Implement Authentication & Security Using SuperTokens in Your React and HarperDB App

Adding authorization & authentication to an app is a common task for developers. When you’re launching a new product, a startup, or a side project, it can feel like a mission.

This tutorial will teach us how to make a music player app that uses SuperTokens for authentication and HarperDB for the backend.

Read it here 👉 Implement Authentication & Security Using SuperTokens in Your React and HarperDB App

9. Browsers can do that?

For the past few years since I began my endeavor to make a web desktop environment I’ve become fascinated to know what is possible with a modern web browser and where the limits are. Throughout that time I’ve been repeatedly surprised with how far we’ve come and what features have made it into some of todays browsers.

Here is my list of the amazing things browsers can do!

Read it here 👉 Browsers can do that?

10. How to Use Google Chrome’s Enhanced Safety Mode

AS SOON AS you dip a virtual toe in the online waters, you’re exposing yourself to danger, whether from suspicious links, dodgy downloads, data harvesters, or something else. The good news is that our web browsers have evolved to become more secure and savvy.

If Google Chrome is your browser of choice, you have access to an Enhanced Safe Browsing mode, which you might not be aware of: It’s essentially what it sounds like, an extra layer of protection that you’re able to switch on if you want to be as cautious as possible.

Why wouldn’t it be on by default?

Read it here 👉 How to Use Google Chrome’s Enhanced Safety Mode

Add CSV import to your Node.js app using UseCSV

Aphinya Dechalert — Wed, 16 Feb 2022 23:27:12 +0000

This is where the hard part starts - how do you easily convert CSV data for your app, MVP, or SaaS? For JavaScript-based applications, there's a plethora of free CSV parsers available. While these libraries are great, open-source is known to pose a security risk such as relaxed integration oversight and potentially poor and integrated practices.

So what are your options? What alternatives to free CSV parsers do you have? One solution is to use UseCSV.

What is UseCSV?

UseCSV is a SaaS (software as a service) that provides you with a simple-to-use interface and tools to easily and securely transform your CSV datasets into JSON format.

Here is a shortlist of UseCSV perks:

supports CSV and all Excel formats (xlsx, xls, xlt), including legacy Excel versions.
easy to integrate into your frontend
can handle large import files and doesn't use arbitrary upload limits, so you're not required to split up your files
secure and compliant to best practice security standards
comes with an easy to use the console to configure your validation rules

Without further ado, let's get on with setting up UseCSV into your React + Node.js app.

Setting up your React frontend

Setting up your React frontend for UseCSV is super simple. All you have to do is install the UseCSV importer plugin, add some code to your app and make sure you add your importerKey.

Here is a series of snippets to get you started.

Step 1: Download UseCSV package from npm.

npm install @usecsv/react

Or, if you prefer to use Yarn:

yarn add @usecsv/react

Step 2: Add the UseCSV component to your app. Here is an example of what it looks like:

import UseCSV from "@usecsv/react";

function App() {
  return (
    <div className="App">
      <h1>Start importing your data</h1>
      <UseCSV importerKey="<your importer key here>">
        Import Data
      </UseCSV>
    </div>
  );
}

export default App;

There are two props available for UseCSV:

importerKey - this is a string and connects your frontend to importer. You can store this value as an .env for security reasons. This key is available in the admin panel of your importer.
user - this is a JSON object that can be used to pass additional data to the webhook and is relayed to the backend.

Setting up a barebones backend with Node.js

In this portion of the tutorial, we are going to set up a barebones Node.js API backend. There will be two endpoints -

GET /users to test that the data received from POST is processed correctly to our app
POST /users to act as our example endpoint for receiving CSV to JSON data

To set up your Node.js application, add express and bodyParser to your app's folder.

npm i express body-parser

What is Express? Express is a web framework for Node. It lets you do routing and comes with HTTP helpers that we are going to be using for this tutorial walkthrough.

What is bodyParser? body-parser is a middleware for parsing incoming requests and making them available under the re.body property.

Once you have both packages installed, make sure to import them into your application. For this tutorial, it is the server.js file. Here is the fully-functional code for a bare-bones backend with comments.

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

// Make sure you place body-parser before your CRUD handlers or else it will not work.
app.use(bodyParser.json());

// default route
app.get("/", function (req, res) {
  res.send("Hello Layercode");
});

/* Setting the data */
let users = [
  {
    first_name: "Shane",
    last_name: "Oaks",
    username: "SOaks",
  },
  {
    first_name: "Elwood",
    last_name: "Horsfield",
    username: "Elwooders",
  },
];

/* Create POST */
const addUsers = (req, res) => {
  content.forEach((row) => {
    users.push(row);
  });

  res.send(users);
};

app.post("/users", addUsers);

/* Read GET */
const getUsers = (req, res) => {
  res.send(users);
};

app.get("/users", getUsers);

/* the port and server 
   to run, use the command - node server.js
*/
app.listen(3000, function () {
  console.log("listening on 3000");
});

To start your app, run the command node server.js This will make localhost:3000 available for your APIs.

Creating your project and attaching a webhook

Step 1: Sign up for the free UseCSV developer account.

Step 2: Click on Add importer button to create a new importer. Give your importer a name.

Step 3: Once you've clicked Save, you will be given a screen where you can do the following things:

find your importer Key. This value is to be added to your React component prop.
the Webhook URL field. This is where you can add your backend endpoint URL. For localhost testing, you can use a tunnel service. Cloudflare has a free tunneling service. You can check out the tutorial on how to set it up here.
Configure your fields by clicking on Add Column. Fill in the fields and repeat for all your other required columns.

Add your importer Key to your React app and set up your columns. Boot up your localhost tunnel and add it as your webhook endpoint.

Upload your CSV data via your React frontend

Once you've added your importer Key as the prop, you can start uploading CSV data to your backend right away. Your column settings will show up here and all you have to do is follow the easy-to-use wizard.

Once completed, the interface will give a green success tick.

That's it. You can check if your data was sent correctly via a REST client on the GET endpoint we created earlier. Stay tuned for more free tutorials. Comment below if you want anything specific.

And that's it for this tutorial! Stay tuned for more free tutorials. Comment below if you want anything specific.

#003: The Week In Stories — React, Supabase, Next.js, and tech things

Aphinya Dechalert — Mon, 14 Feb 2022 21:38:26 +0000

Hi all!

Welcome to another edition of {Tech & Dev} Newsletter. This week is an eclectic collection of internet finds, React, cloud platforms, and articles that you may have missed.

Without further ado, let’s dive into this week’s stories.

Top 10 JavaScript CSV Parsers

CSV — love them or hate them, they are part of many businesses and how they operate. These comma-separated values come in the form of a text file with a specific format that allows for data to be translated into a tabulated structure when imported into spreadsheet software and apps such as Excel and Google Sheets. These table-based reports are often used by analysts, accountants, commercial, and marketing to view, add, and manipulate.

As developers, a majority of us work primarily with JSON, making CSV an incompatible dataset. We cannot easily filter it in its raw form or hook into the data the way we can with JSON. This is where JavaScript CSV parsers come in. For JavaScript-based apps, CSV parsers are bridging libraries that translate tabular data into JSON compatible formats.

Here are the top 10 free JavaScript CSV parsers that you can use for your next (or current) project that contains comma-separated values.

Read it here 👉 Top 10 JavaScript CSV Parsers

Next.js is the next best thing — but what’s the catch?

Next.js is a popular open-source JavaScript framework for developing server-side rendered React applications. It’s simple, lightweight, and efficient, making it an ideal choice for small- to medium-sized projects.

In a nutshell, the framework enables you to get up and running with React quickly and easily. It provides a number of powerful features and components that make developing React applications simpler and more efficient. These include automatic code-splitting, hot module reloading, and routing.

But what are the good and the bad parts of Next.js?

Read it here 👉 Next.js is the next best thing — but what’s the catch?

Moving from JavaScript to TypeScript

JavaScript is already pretty time-consuming to learn and nobody truly masters it because the API keeps getting updated along with the documentation as the language evolves. There are also a lot of frameworks and libraries to learn.

It was outdated thinking and fortunately, I saw the light when I was between jobs looking for work. Companies were looking for polyglot developers which essentially means a person who knows and is able to use several programming languages.

Here’s an article outlining the experiences of moving from JavaScript to TypeScript.

Read it here 👉 Moving from JavaScript to TypeScript

How to set up Firebase Authentication in React

Firebase authentication is part of the services suite offered by Google’s full-stack app platform. It covers a majority of authentication options including email, and federated identity providers such as Google, Facebook, Twitter, and GitHub. Firebase authentication is a free service, with the exception of phone verification — which is free for the first 10k API calls.

There are multiple ways to implement Firebase authentication, including a ‘drop-in’ solution where an external user flow is provided to sign in users. Another way is to use the Firebase SDK authentication, which is a package that can be leveraged for backend and native applications.

For this tutorial, we are going to focus on implementing Firebase authentication in a React app.

Read it here 👉 How to set up Firebase Authentication in React

Level-Up Your React Game with Testing

Are you currently learning React JS or using it in your work?

Let’s step up your React game by learning how to test a React App. In this series, we will learn how to test using packages that come bundled with create-react-app, Jest and React Testing Library. In this first part of the series, let's understand these two packages and a simple test.

Read it here 👉 Level-Up Your React Game with Testing

Killing me softly…the slow death of Bootstrap

CSS is hard.

There, I said it. It’s hard to create a cohesive, consistent design across different browsers, devices, and screen sizes. It’s hard to keep up with the latest advancements and trends in web design. It’s hard to make your website look good, period.

But it doesn’t have to be.

Read it here 👉 Killing me softly…the slow death of Bootstrap

Is Supabase your new Firebase alternative?

The implementation of PostgresSQL on Supabase also makes it highly accessible and low-code projects. What is low-code? Low code is a growing trend and software approach that’s supported by an infrastructure that enables minimal coding to build fully functional applications.

The interface for PostgresSQL on Supabase is akin to working on a spreadsheet, with the ability to easily add, edit, and update data in a no-code manner. Meanwhile, there is also an SQL editor interface that lets you create tables, functions, joins, and whatever else is required for your data needs.

Read it here 👉 Is Supabase your new Firebase alternative?

How do React Fragments work under the hood?

React aims to stay neat and clean that’s why fragments are out there. They allow getting rid of excess wrappers while rendering multiple elements!

That’s pretty cool, but how do they work under the hood?

Read it here 👉 How do React Fragments work under the hood?

7 Toxic Habits of bad programmers and why teams fall apart

As developers, we’ve all encountered that toxic programmer in some form. However, it’s also easy to be blindsided by our own behaviors.

Bad programmers can be one of the biggest sources of toxic habits in an organization. Here is a rundown of common toxic behaviors and what they can do to teams.

Read it here 👉 7 Toxic Habits of bad programmers and why teams fall apart

How does React allow creating custom components?

React strives to give its users the ability to build encapsulated, reusable components, but how does it implement this logic in JSX?

Here is a solid article about custom components with walkthrough code.

Read it here 👉 How does React allow creating custom components?

This is How I Switch from Angular to React

The story began when I was working as a frontend engineer at my first workplace using Angular at that time. At first, I enjoyed Angular but it changed when I want to switch jobs in the mid of 2021. Most of the job vacancies required React as the main skillset. After that, I change my mind and take a maneuver from Angular to React as my main frontend tech stack.

Not only that, when I did some troubleshooting or debugging I need more time to google some stuff if I code using Angular. It’s very different when I use React, I just enter some keywords and the search result will display more accurately based on my needs. This lasted for about almost one year until I finally realized it was time for me to change.

Here is a developer’s tale on what he experienced during the switch from Angular to React.

Read it here 👉 This is How I Switch from Angular to React

How to create a countdown timer using React Hooks

React(aka ReactJS) is a library that builds declarative and component-based user interfaces. With the inclusion of functional components and hooks, it is even more potent in reusability, better code organization, and data flow.

Web developers widely use React’s standard hooks like useState, useEffect to manage state within the components. However, the practice of writing custom hooks seems to be a bit lesser. This article aims to explain the usages of the custom hook in a beginner-friendly manner. What could be better than learning it by developing a small but practical application?

We will create a countdown timer that will allow us to set an initial date and time to start the countdown. Once the date and time expire, it will show an expiry notice.

Read it here 👉 How to create a countdown timer using React Hooks

And that's it for this week. Be sure to subscribe and stay tuned for next week's edition.

#002: The Week In Stories — Metaverse, Deno, and WebHooks

Aphinya Dechalert — Sun, 06 Feb 2022 23:25:37 +0000

Hi all!

Welcome to another edition of {Tech & Dev} Newsletter. This week is all about the metaverse, remote work, and tech things with movies to watch list (if you haven’t seen them) at the end.

Without further ado, let’s dive into this week’s stories.

Metaverse jobs are on the rise, but what exactly are they?

The metaverse is coming — or rather, it is already here. The idea of virtual worlds has been around as far back as the 90s, if not earlier through the imaginations of writers and creative thinkers.

While we’re not as dramatically plugged in via a physical cord, all things digital and internet accessible tethers us to our extended worlds. From remote work to school to keeping up with our friends, our interconnectivity is the edge of the metaverse as we are about to know it.

So what exactly is the metaverse? What does it mean for our future? and what can we do to keep ourselves from being obsolete?

Read it here 👉 Metaverse jobs are on the rise, but what exactly are they?

Setting up Scalable WebSockets — WebSockets for real-time communication with Node.js

A WebSocket is web protocol that facilitates bi-directional communication between clients and servers. In addition, WebSocket can send messages in either direction in near real-time, unlike HTTP.

But why WebSockets?

You can use WebSockets whenever a low-latency, near real-time connection between the client and the server, is required. Here are a few examples:

Multiplayer gaming
Instant messaging applications
Voice/video media exchange
Live sports scores

Depending on the usage, it can influence your architecture.

Read it here 👉 Setting up Scalable WebSockets — WebSockets for real-time communication with Node.js

Work From Home or Work From Office — Why Not Both?

Working from home is hard. Sure, there are perks like no commute, increased flexibility and the ability to establish better work-life balance. Yet, working from home isn’t for everyone. The practice can erode the clear distinction between work and home life, raise stress levels at home and increase the likelihood of burnout from overworking.

As the world gets into the rhythm of remote work, what have we learned since 2020? Is working from home really the best option? Or is there an alternative solution?

Read it here 👉 Work From Home or Work From Office — Why Not Both?

What is a webhook and how to use one

At some point, you’ve probably seen the term webhooks written in the documentation or as a field for third-party application integration. It’s not an API but acts sort of like one — well, half of one.

In its simplest form, a webhook is a one-way interface to another application. For a webhook to work, it needs a trigger event that allows it to share data to a set destination.

A webhook can be seen as a type of API that’s event-driven rather than based on requests. Instead of an application making a direct request to the API endpoint, something happens to trigger the webhook. The webhook then triggers the destination API.

Webhooks are often used to bridge third-party applications to another source. It acts as an intermediary between the trigger and the destination source.

Let’s look at UseCSV as an example.

Read it here 👉 What is a webhook and how to use one

The Return of Server Side Routing

Return? It never went away. Or at least that is what some smug “told you so” is going to say. But for those who haven’t been living under a rock for the past decade, for better or for worse much of the web has been moving to client-side navigation on their sites.

This movement has been fueled by the adoption of tools that support this sort of architecture. The “modern” JavaScript framework is designed to build applications. Single Page Applications. A name originated from the fact that it does not go back to a backend server to navigate between pages. All routing happens in the browser.

The common thread is to send less JavaScript to the browser seen most recently championed by 0kb of JS frameworks. But I want to expand on this as the repercussions are about more than progressive enhancement or lazy hydration. Everything is converging on architectural change that we have not seen the likes of since when SPAs came on the scenes over a decade ago.

We’re putting routing back on the server.

Read it here 👉 The Return of Server Side Routing

How To Write Commit Messages That Won’t Tilt Your Teammates

We’ve all used git in some form or another. The code versioning system is an industry staple. With over 40 million users worldwide and 190 million repositories on GitHub, git is here to stay.

While the concept of git is easy - pull your code, do whatever, save, add, commit, and push - there is one thing that no one really talks about and that is the commit message.

The commit message is such a simple concept yet also one that can cause a lot of issues further down the road. Why? Because you can write whatever you want — including highly useless commit messages like done and updated .

So, how exactly should we be writing git commit messages? Here is a quick and opinionated guide on how to write a highly informative git commit message that won't tilt your teammates.

Read it here 👉 How To Write Commit Messages That Won’t Tilt Your Teammates

4 steps to becoming an employable self-taught developer

Developers are in demand. In the U.S, it’s a $1,989 billion industry and makes up 10% of the national economy. Approximately 3.9 million tech jobs were posted in 2020 with software, programmers, web, and QA being the highest in demand.

I’ve been in the industry for nearly over a decade now and I often get asked the same questions over and over again by devs who are trying to break into the industry. They tend to look something like this:

Do I need a degree? How do I get a job? How do I get experience when everyone wants 2–3 years in a junior role? I’ve applied to over a hundred companies but no one wants me, what am I doing wrong?

If these questions look familiar, I hope this guide will help you answer them.

Read it here 👉 4 steps to becoming an employable self-taught developer

Deno is the new Node.js — well, sort of…

It’s been three years since Ryan Dahl — the same guy behind Node.js — hatched Deno into the world wide web. This opensource and V8 runtime powered serverside has over 80k stars on GitHub, 42k followers on Twitter, and $4.9 million in seed capital from various investors and Mozilla Corporation for its commercialization.

But what exactly is Deno? How is Deno different from Node.js? and will it take over as the new Node.js?

Read it here 👉 Deno is the new Node.js — well, sort of…

How to Use Source Maps in TypeScript Lambda Functions (with Benchmarks)

TypeScript is a popular language for developers of all kinds and it’s made its mark on the serverless space. Most of the major Lambda frameworks now have solid TypeScript support. The days of struggling with webpack configurations are mostly behind us.

Read it here 👉 How to Use Source Maps in TypeScript Lambda Functions (with Benchmarks)

Caching In Node.js Applications

In the context of server-side applications, caching aims to improve the application’s response times by reusing previously retrieved or computed data. For example, instead of repeating network requests for data that do not change often or at all (such as a list of banks in your country), you could store the data in the cache after the initial request and retrieve it from there in subsequent requests. This makes the subsequent requests for that data an order of magnitude faster leading to improved application performance, decreased costs, and faster transactions.

Caching is a common technique for making your applications faster. It lets you avoid slow operations by reusing previous results. In this article, Ayo Isaiah walks us through the different options for caching in NodeJS applications.

Read it here 👉 Caching In Node.js Applications

10 Best Developer Movies And Series

The criteria to meet this list was pretty straightforward, the movie (or series) had to feature a programmer as the protagonist (or antagonist), not a supporting character like those used to hack the mainframe (looking at you Mission Impossible). Without taking any more of your time, here are my top 10 picks for the best developer movies and series that I’ve seen.

Read it here 👉 10 Best Developer Movies And Series

That's it for this week. Stay tuned for more awesome tech stories and finds next week.

#001: The Week In Stories - Tech Salaries, Freebies, and Dev Things

Aphinya Dechalert — Tue, 01 Feb 2022 03:43:37 +0000

Hi all!

Welcome to the first edition of {Tech & Dev}.

At the beginning of this year, I made a goal for myself to be more consistent with creating things — whether it be through my writing or making mini-apps on the side to learn new things and keep up with the tech.

The point is that I make and keep making — come rain, shine, lockdowns, homeschooling, and whatever life will throw at me in 2022. This newsletter is part of the consistency and creation pledge.

Without further ado, let’s dive into this week’s stories.

1. What tech companies are really paying their developers

Asking for money is a touchy business. We don’t want to lose out on a job because we’re asking too much. We also don’t want to be underpaid either. Sometimes, it’s hard to know exactly where we’re standing when it comes to paychecks and how much software developers should be paid.

Sure, there’s the old method of asking what you think you’re worth — but then we run the risk of undervaluing our skills because we don’t know what the market rates are.

So I went digging and here’s what I found.

Read it here 👉What Tech Companies Are Really Paying Their Developers

2. How to use Cloudflare tunnels for free

You’ve built an app but it still lives on your localhost:3000. You want to share a preview of this app with your friends, boss, or client without the need to deploy it. Or you might just want to test a service worker. Whatever the case, something or someone needs access to your localhost.

This is where tunnels come in. Cloudflare has a free tunnel service that you can use. I’ve tested it. It’s seamless to start using and less annoying than ngrok.

Read it here 👉 How to use Cloudflare tunnels for free

3. Why custom react hooks could destroy your app performance

For performance-sensitive apps custom React hooks can very easily turn into the biggest performance killer, if not written and used very carefully. This story isn’t about how to build and use hooks — rather, it’s about their performance implication for complicated apps.

Read it here 👉Why custom react hooks could destroy your app performance

4. A quick field guide to using Remix with Apollo GraphQL

Remix is the newest and hottest full-stack React-based framework on the block. Newly minted and open-sourced in November, the framework closed off 2021 with +10k stars on GitHub. What makes Remix a different kind of React framework is that it’s primarily a server-side rendered framework. On the first page load the page is pre-rendered on the server, which ensures a super-fast load time.

But how does it work? Here is a quick tutorial on how to use Remix with Apollo GraphQL.

Read it here 👉A quick field guide to using Remix with Apollo GraphQL

5. Using Sequelize ORM with Node.js & MySQL

ORMs help developers to write complicated queries quickly and make it easier to update and reuse the code. However, getting started with ORMs can be challenging due to the learning curve. So, here is a quick tutorial on how to set up Sequelize ORM with Node.js and MySQL.

Read it here 👉Using Sequelize ORM with Node.js & MySQL

6. Wanna Upgrade your Data Science Game? Think Like an Engineer

As a society, we’re drawn to stories of overnight success and of mythical genius that achieves the impossible by building something from nothing. In reality, though, success is more often the result of slow, consistent experimentation and tinkering.

Here is a piece about creating an environment that supports the iterative development of ideas and validates them in phases.

Read it here 👉Wanna Upgrade Your Data Science Game? Think Like an Engineer.

7. Serverless — an overview starter guide

Serverless is not new. Up until the mid-2000s, servers were giant rooms that lived on-premise to provide businesses with the infrastructure they needed to run their centralized software systems. Then along came cloud computing, along with ideas like elastic load balancing, on-demand self-service, resource pooling, and infrastructure as a service.

Here is a short history with a list of serverless frameworks you can use for your next project.

Read it here 👉Serverless — an overview starter guide

8. Is Angular Dead in 2022?

In case you’re unaware, Google has had an interesting track record in the Framework category. So, what’s going on with Angular? Here is a piece that outlines Angular’s potential future fate.

Read it here 👉Is Angular Dead in 2022?

9. How to use Firebase Analytics with Angular

Firebase Analytics is one of the most exciting features of Firebase since it provides an application-focused analytics dashboard with countless features. Here is a quick tutorial on setting up Firebase Analytics with Angular.

Read it here 👉How to Use Firebase Analytics with Angular

10. Flutter vs. React Native

Making the same mobile phone app twice is not the best use of a developer’s time. That’s two different platforms to maintain and manage. By requirement, Apple uses Swift. On the other side of the ring sits Android and its Java-based compilers.

This is where ‘bridging’ frameworks and libraries come in. Flutter and React Native are two popular bridging solutions that make it possible to code once and use multiple platforms. Flutter assumed that you build an app once, and it will work on any screen. React Native is a flavor of React that leverages the current implementation of its JavaScript UI library and makes it possible to run on any mobile device. On the surface, these features sound great — but with every perk, there is a quirk.

Read it here 👉Flutter vs. React Native

And that's it for this week! Stay tuned for next week's tech and dev finds.

Every Python Dictionary Method Explained Simply

Aphinya Dechalert — Wed, 30 Jun 2021 12:03:12 +0000

Here is a quick recap of how dictionaries work.

written with {}
changeable, unordered, indexed
comes with key-pair values & no duplicates
looks something like this:

pythondictionary = {1: 'python', 2: 'data science', 'third': 'JavaScript'}

Here is every Python Dictionary method available.

Combining dictionaries

To combine two dictionaries, use a leading ** and then add them to a dictionary. Here is an example:

a = {'a':1}
b = {'b':2}
c = {**a, **b}
print(c)

# this will return:
# {'a': 1, 'b': 2}

dict.clear()

To remove all items inside a Python dictionary, use clear()

pythondictionary = { "a":1, "b":2, "c":3 }
print(pythondictionary.clear())

# this will return:
# None

dict.copy()

copy() will create a shallow copy of the original dictionary.

pythondictionary = { "a":1, "b":2, "c":3 }
c = pythondictionary.copy()
print(c)

# this will return: 
# { "a":1, "b":2, "c":3 }

dict.fromkeys()

fromkeys() lets you create a dictionary from a set of keys stored in a list or tuple. For example:

keys = ("a", "b", "c")
value = [1,  2, 3]
d = dict.fromkeys(keys, value)
print(d)

# this will return:
# {'a': [1, 2, 3], 'b': [1, 2, 3], 'c': [1, 2, 3]}

dict.get()

You can access dictionary attributes with [] like this:

d = { "a":1, "b":2, "c":3 }
print(d["a"])

# this will return:
# 1

However, the safest way to access attributes in a Python dictionary is through using the get() function. This makes the action explicit. If the attribute doesn’t exist, it will return None. If you used [] instead of get() and the value doesn’t exist, you will get a KeyError instead.

d = { "a":1, "b":2, "c":3 }
print(d.get("a"))

# this will return:
# 1

If you want to get an attribute but not sure if it exists or not, you can also assign your own error value to something like undefined with get(). Here is an example:

d = { "a":1, "b":2, "c":3 }
print(d.get("f", "undefined))

# this will return:
# undefined

dict.items()

item() will return a dictionary’s key and value pairs as a list of tuples. Here is an example:

car = {  
  "make":"Mitsubishi",   
  "model":"Lancer",   
  "year":2007,   
  "color":"silver"
  }

result = car.items()
print(result)

# this will return:
# dict_items([('make', 'Mitsubishi'), ('model', 'Lancer'), ('year', 2007), ('color', 'silver')])

Now you can iterate over the results with a loop like this:

for item in result:  
  print(item)

# this will return:
# ('make', 'Mitsubishi')
# ('model', 'Lancer')
# ('year', 2007)
# ('color', 'silver')

dict.keys()

Use keys() if you only need the keys inside a dictionary. For example:

car = {  
   "make":"Mitsubishi",   
   "model":"Lancer",   
   "year":2007,   
   "color":"silver"
   }

for key in car.keys():   
   print(key)

# this will return:
# make
# model
# year
# color

dict.values()

To only access the values inside a dictionary, use values(). For example:

car = {  
   "make":"Mitsubishi",   
   "model":"Lancer",   
   "year":2007,   
   "color":"silver"
   }

for value in car.values():   
   print(value)

# this will return:
# Mitsubishi
# Lancer
# 2007
# silver

dict.pop()

If you want to remove a specific item from a dictionary based on key name, you can use pop(). For example:

car = {  
   "make":"Mitsubishi",   
   "model":"Lancer",   
   "year":2007,   
   "color":"silver"
   }

car.pop("year")
print(car)

# this will return:
# {'make': 'Mitsubishi', 'model': 'Lancer', 'color': 'silver'}

dict.popitem()

To remove the last item in the dictionary, use popitem(). For example:

car = {  
   "make":"Mitsubishi",   
   "model":"Lancer",   
   "year":2007,   
   "color":"silver"
   }

car.popitem()

# this will return:
# ('color', 'silver')

print(car)

# this will return:
# {'make': 'Mitsubishi', 'model': 'Lancer', 'year': 2007}

dict.setdefault()

If a key doesn’t exist, it returns None by default. However, you can set the return value through setdefault(). For example:

car = {  
   "make":"Mitsubishi",   
   "model":"Lancer",   
   "year":2007,   
   "color":"silver"
   }

print(car.setdefault("origin", "undefined"))
print(car.setdefault("model", "undefined"))

# this will return:
# undefined
# followed by (because the key exists):
# Lancer

dict.update()

To insert an item into a dictionary, use update(). For example:

car = {  
   "make":"Mitsubishi",   
   "model":"Lancer",   
   "year":2007,   
   "color":"silver"
   }

car.update({"origin":"Japan"})
print(car)

# this will return:
# {'make': 'Mitsubishi', 'model': 'Lancer', 'year': 2007, 'origin': 'Japan'}

And that's basically it.