(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
<?php | |
if (!isset($modules)) { | |
$modulus = 11; | |
} | |
if (!isset($model)) { | |
$models = ClassRegistry::keys(); | |
$model = Inflector::camelize(current($models)); | |
} | |
?> | |
<div class="pagination"> |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
import React, { useEffect } from 'react'; | |
import { useTranslation } from 'react-i18next'; | |
// When change language is triggered, re-validate the form as to get all errors translated | |
// the parameters here are part of the FormikProps<Values> render props | |
// https://jaredpalmer.com/formik/docs/api/formik#formik-render-methods-and-props | |
const useTranslateFormErrors = (errors, touched, setFieldTouched) => { | |
const { i18n } = useTranslation(); | |
useEffect(() => { | |
i18n.on('languageChanged', lng => { |
<Formik | |
render={({ handleSubmit, handleChange, handleBlur, setFieldTouched, values, errors, touched }) => ( | |
<WithTranslateFormErrors errors={errors} touched={touched} setFieldTouched={setFieldTouched}> | |
<form onSubmit={handleSubmit}> | |
<input | |
type="text" | |
onChange={handleChange} | |
onBlur={handleBlur} | |
value={values.name} |
<Formik | |
render={({ handleSubmit, handleChange, handleBlur, setFieldTouched, values, errors, touched }) => ( | |
<WithTranslateFormErrors errors={errors} touched={touched} setFieldTouched={setFieldTouched}> | |
<form onSubmit={handleSubmit}> | |
<input | |
type="text" | |
onChange={handleChange} | |
onBlur={handleBlur} | |
value={values.name} | |
name="name" |
... | |
<Formik component={ContactForm} />; | |
... | |
import useTranslateFormErrors from '../../hooks/use-translate-form-errors'; | |
const ContactForm = ({ | |
handleSubmit, | |
handleChange, |
import dompurify from 'dompurify'; | |
import useTranslateHtmlElement from './use-translate-html-element'; | |
// Our safe HTML rendering component | |
// From https://dev.to/jam3/how-to-prevent-xss-attacks-when-using-dangerouslysetinnerhtml-in-react-1464 | |
function SafeHTMLComponent() { | |
// title is dynamic HTML | |
const title = response.from.backend.title; | |
// sanitizer will sanitize the HTML | |
const sanitizer = dompurify.sanitize; |
### Keybase proof | |
I hereby claim: | |
* I am devakone on github. | |
* I am devakone (https://keybase.io/devakone) on keybase. | |
* I have a public key ASByeWTO9FcHZlpWp9J328OC_vGki2s2h97qmH9JJSKf_Qo | |
To claim this, I am signing this object: |
🚨 2020 Update: I recommend using mkcert to generate local certificates. You can do everything below by just running the commands brew install mkcert
and mkcert -install
. Keep it simple!
This gives you that beautiful green lock in Chrome. I'm assuming you're putting your SSL documents in /etc/ssl
, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.
sudo nano /etc/ssl/localhost/localhost.conf
Related links: