deniapps / dna-comments Goto Github PK

https://deniapps.com/blog/syntax-highlight-with-ckeditors-code-block

CKEditor 5 does not ship with Code Blocks by default, but it could be added via custom build. The simplest way to use it is from ckeditor5-build-classic-dna. However, it does not support Syntax Highlighting. The good thing is that it's fairly easy to add one via the front-end library, like prismjs.

https://deniapps.com/blog/how-tokens-work-in-amazon-cognito-user-pools

AWS provides us Amazon Cognito User Pools, which could be used as authorizer to control access to our application. The article will explain all three tokens implemented by Cognito User Pools, and discuss some common questions of how to use those tokens.

https://deniapps.com/blog/save-jwt-to-httponly-cookie-instead-of-localstorage

NextFeathers uses JSON web token (JWT) for authentication when calling the Restful API implemented by FeathersJS. The JWT token was simply saved in the browser's localStorage and removed when the user is logged out. Many people said this is very bad because the hacker could run Javascript via what so-called XSS on your website, and read the data from localStorage. Personally, I kinda against this because it's unlikely happened, and as I know that is how AWS-amplify works by default. But there is indeed a risk, so I would like to fix it.

https://deniapps.com/blog/data-fetching-in-react-nextjs

In this article, we introduce different ways to do the Data Fetching in a React App, especially with NextJS. You will learn something like, Static generation, Server-side rendering, and Client-side rendering.

https://deniapps.com/blog/serialize-javascript-vulnerability-fix

Github Dependabot, which could detect and update packages that have known vulnerabilities. Not only it checks the package.json, but also the package-lock.json. Usually, when Dependabot finds the available update of the package to fix security vulnerability, it will submit an automated pull request. However, in the case of Dependabot cannot update to the required version, we need to manually update NPM.

http://localhost:3000/blog/another-test-for-new-post

do something

https://deniapps.com/blog/chose-gitalk-for-comment-system

GiTalk utilizes Github's Repo Issue API to create a Comment System. It's open-source and completely free without Ads. It comes with React Component, and it a good choice for a Tech blog where your audients likely have Github account.

https://deniapps.com/blog/jwt-token-auto-renew-auto-logout

In Feathers, JWT tokens are stateless with expiration date. After expiration, we need to relogin to get a new one. For a better UX, especially users are writing a very long post, the expired token could cause unsaved draft. By default Feathers' jwt strategy does not return a new jwt token, but this could be customized, then to be used for our purpose - JWT Token Auto Renew.

https://deniapps.com/blog/customize-ckeditor5-toolbar

CKEditor5 is fully customizable. Some of them could be done by CKEditor custom build, some of them could be done by custom plugins, and some of them could be simply done by config. In this article, we will learn how to customize CKEditor 5 Toolbar for React App.

https://deniapps.com/blog/set-environment-variables-in-nextjs

Before nextJS 9.4, we could use next.config.js to set up environment variables, i.e., process.env.* which we can use in our application. In nextJS version 9.4 and up, we could use .env* files. At first glance, they make this complicated, but they have been given a purpose. In the article, we will go over this, and see how we benefit from this new feature.

https://deniapps.com/blog/study-mediums-publishing-platform-design

The main part of the blog engine (or any CMS) is Publishing/Draft Saving design. In this article, we are looking into the different user cases in the Publishing/Draft Saving, and see how Medium design these, and how DNX handles these. It would be helpful as well for designing other CMS system.

https://deniapps.com/blog/false-alarm-of-cors-error

CORS error is very common when your application is using cross-domain APIs. Sometimes it could be a false alarm. When there are some other issues of your API server, for example, database connection issue or network issue, which causes “500” internal error, but the response headers of status 500 do not include “Access-Control-Allow-Origin”, so then the browser throws the error no matter what.

https://deniapps.com/blog/how-to-add-custom-css-classes-to-table-or-img-in-ckeditor

Does not like CKEditor 4, you cannot edit the source code to add whatever HTML code to the content you are editing in CKEditor 5. But sometimes, we do want to have a bit more control over the content generated by CKEditor. Good news, we have "ckeditor5-build-classic-dna" came with a plugin to allow us to add custom CSS classes to

and

.

https://deniapps.com/blog/first-post

A little bit about DeNiApps: before, now, and future.

http://localhost:3000/blog/test-3

new post -> save draft -> update draft -> publish

https://deniapps.com/blog/responsive-navigation-bar-for-semantic-ui

Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. I created the NPM package: dna-responsive-nav to fix this limitation. If you are using Semantic-UI-React, then you may give it a try.

https://deniapps.com/blog/open-external-links-in-new-tab-for-ckeditor

How to set the external links to be open in the new tab by default, i.e., set target=_blank in CKEditor 5? This short note shows you how to set the configuration in CKEditor 5 on both in HTML code and React Component.

https://deniapps.com/blog/controlled-vs-uncontrolled-confused-part

There are two types of “Controlled vs Uncontrolled” in React, and they are kind of “contradict” to each other. To better understand them, we would need to understand the context.

https://deniapps.com/blog/why-the-react-component-renders-twice

There are two possible reasons that your React component renders twice. One is that your component is not a pure component and its parent re-renders after it's initial rendering. The other is that you are using React.StrictMode, which could cause double rendering in the development mode.

https://deniapps.com/blog/setup-aws-lambda-to-use-amazon-rds-proxy

In this article, we would like to share some issues we had and resolved during setting up AWS Lambda to use Amazon RDS Proxy.

https://deniapps.com/blog/convert-csv-file-to-restful-api-using-feathersjs

In this article, we will learn how to easily convert CSV files into a Restful API using FeathersJS Command Line and MongoDB. We will also learn how to cast data type using FeatherJS hook.

https://deniapps.com/blog/how-to-set-up-a-https-image-server

Setting up an https for your website becomes a standard those days. Instead of paying $65+ every year with GoDaddy, we can get a free SSL/TLS with Let's encrypt. In this tutorial, we will cover how to set up an HTTPs image server (https://images.deniapps.com) by installing Let's Encrypt FREE TLS certificates on Ubuntu 16.04/18.04/20.04 with Apache.

https://deniapps.com/blog/clarify-react-ref-by-examples

You may find out React Refs is confusing like I did. In this article, we use real examples to explain what Ref is, how to use it to do focus, and how to do forwarding Ref, etc. We will cover the Ref usages in both Class component and Functional Component.

https://deniapps.com/blog/mysql-rds-aborted-connection-error-aws-lambda

Starting for AWS Cloudwatch logs, we spent a week looking into 'Aborted Connection" errors on RDS. Finally, we figured out that although Lambda functions do not share a connection pool, the queries in the same function do share a connection pool, so we should keep on using the pool, but we should set the pool with min 0, so it could be destroyed without taking space. And the ultimate solution is to use Amazon RDS.

https://deniapps.com/blog/create-restful-api-within-minutes-with-feathersjs

Creating a Restful API has never been easier with FeathersJS. In this tutorial, we will use MongoDB as an example to see how quickly we can set up a state of the art API. We will also go thru how to use Postman to call/test the Restful API.

https://deniapps.com/blog/upgrade-dependencies-of-your-node

Make dependencies of your NodeJS app is painful and challenging. In this article, we would go over several possible ways including Github dependabot, third-party framework, and NCU, and best practices hopefully.

https://deniapps.com/blog/a-quick-walk-through-of-useeffect

useEffect is complicated compared to useState. Maybe because it handles three states together: componentDidMount, componentDidUpdate, componentWillUnmount. In this article, we will look into all threes together to understand how useEffect hook works.