Hacker Kselax – the best hacker in the world
Sometimes need to remove an image from the google search. First of all you should remove the image from the site and then make a request to the google. On the google help page is not clear written what to do. There is said you have to copy link and put it to their remove…
How to add react to the wordpress WordPress has a wp-element object. It is a react you can include by using next code
|
1 2 3 4 5 6 7 8 |
wp_enqueue_script( 'main', // plugin_dir_url(__FILE__).'js/main.js', plugin_dir_url(__FILE__).'js/main.js', ['wp-element', 'babel'], time(), // Change this to null for production true ); |
Now you can use react by using an object wp.element it has a render() function and others here is code of main file
|
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 |
// import Test from 'components/Test.js' const Hello = () => <p>Hello World</p>; class Form extends wp.element.Component { render() { return ( <div> <div> <h1>Enter Your Text</h1> </div> <div> <input placeholder="Enter Your Text" /> </div> <div> <div> <label>Choose Font</label> </div> <div> <input /> </div> </div> <div> <div> <label>Paint Coverage</label> </div> <div> <select> <option>Choose Paint Coverage...</option> <option>Unpainted</option> <option>WallMount</option> <option>Standing</option> </select> </div> </div> <div> <div> Approx.Width: </div> <div> Enter text and select a Height to see Approx. Width. </div> </div> <div> Total Letter Count: 0 </div> <div> <input type="checkbox" /> </div> <div> <div>Starting At: $8.19</div> <div>Qty: <input /></div> <div><button type="submit" name="add-to-cart" value="12" class="single_add_to_cart_button button alt">Add to cart</button></div> </div> <div class="pr-field-wrap"> <label for="pr-field">Your name:</label> <input type="text" name='pr-field' id='pr-field' value='' /> </div> </div> ) } } let root = document.getElementById("root") if (root) { wp.element.render(<Form />, document.getElementById("root") ); } |
It won’t work without including babel to include babel…
How to set up webpack to work with React React is written in es6 so we have to transpile es6 to es5, so we have to use bable. Wabpack uses a concepts ‘loaders‘. Loader is a transformer. We want to install babel-loader that will transform the code. Obviously babel-loader makes use of babel and babel…
On the IOS devices position fixed doesn’t work. I had a task where needs to add the button above the appeared keyboard. The button stuck to the bottom, so I did such a code show »
|
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 |
<script> console.log('1hello world'); window.addEventListener('resize', () => { console.log('window') }) let flag = null var userAgent = navigator.userAgent || navigator.vendor || window.opera; const f = () => { console.log('userAgent = ', userAgent); if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream && window.innerWidth < 800 && !flag) { console.log('once'); flag = true document.getElementById('ServiceFilter_1163_MIN').addEventListener('focus', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1164_MIN').addEventListener('focus', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1163_MAX').addEventListener('focus', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1164_MAX').addEventListener('focus', () => {console.log('focus2') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="calc(50% + 10px)" document.querySelector('.bx_filter_button_box').style.display="block" },1000) }) document.getElementById('ServiceFilter_1163_MAX').addEventListener('blur', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) document.getElementById('ServiceFilter_1164_MAX').addEventListener('blur', () => {console.log('focus2') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) document.getElementById('ServiceFilter_1163_MIN').addEventListener('blur', () => {console.log('focus1') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) document.getElementById('ServiceFilter_1164_MIN').addEventListener('blur', () => {console.log('focus2') setTimeout(() => { document.querySelector('.bx_filter_button_box').style.bottom="0px" },0) }) } } setTimeout(() => { console.log('here we are'); f() },0) window.addEventListener("resize", function () { // console.log(window.innerWidth); // console.log('flag = ', flag); console.log('userAgent = ', userAgent); // iOS detection from: http://stackoverflow.com/a/9039885/177"20 f() }); </script> |
And after clicking on the input field the button was jumping in any places. It wasn’t fixed. Do…
How to initialize moment from the data so we can have different data and that’s why we have to pass our own format as the second argument link
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// get current date const currentDate = moment() console.log(`currentDate = ${currentDate.format('DD-MM-YYYY')}`); // output: currentDate = 08-06-2019 // from the string const birthday = moment("25.10.1966", "DD-MM-YYYY") console.log(`birthday = ${birthday.format('DD-MM-YYYY')}`); // output: birthday = 25-10-1966 // from the timestamp in miliseconds const day = moment(1559991288388, 'x') console.log(`day = ${day.format('DD-MM-YYYY')}`); // output: day = 08-06-2019 // from the timestamp in seconds const day2 = moment(1559991288, 'X') console.log(`day2 = ${day2.format('DD-MM-YYYY')}`); // output: day2 = 08-06-2019 |
How to get the difference between two dates. The standard functions doesn’t support such a functionality, so you have to use a special plugin….
You can create a route with express that will handle a few pages like portfolio, projects, reviews, using such a structure as shows below
|
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 |
const express = require('express'); const router = express.Router(); const DB = require('../../core/my_db/DB.js') // # 1 /* /api/v1/users/:login/portfolio/?user&portfolio */ router.get(/\/(.*)\/(portfolio|projects|reviews)/, function(req, res, next) { let login = req.params[0] const getUser = (login) => { return new Promise((resolve, reject) => { DB.pool.query( `SELECT * FROM `users` WHERE login = ?`, [login], (err, r) => { if (err) throw err if (r.length === 1) { delete r[0].pass return resolve({ user: r[0] }) } return reject({ error: "notFound" }) } ) }) } const getPortfolio = (login) => { return new Promise((resolve, reject) => { DB.pool.query( `SELECT p.* FROM `users` u INNER JOIN `portfolios` p ON p.userId = u.id AND u.login = ?`, [login], (err, r) => { if (err) throw err resolve({ portfolios: r }) } ) }) } const getProjects = (login) => { return new Promise((resolve, reject) => { DB.pool.query( `SELECT p.* FROM `users` u INNER JOIN `projects` p ON p.userId = u.id AND u.login = ?`, [login], (err, r) => { if (err) throw err resolve({ projects: r }) } ) }) } const getReviews = (login) => { return new Promise((resolve, reject) => { DB.pool.query( `SELECT r.*, u2.id as u2_id, u2.login, u2.avatar, u2.firstName, u2.secondName FROM `users` u INNER JOIN `reviews` r ON r.userId = u.id AND u.login = ? INNER JOIN `users` u2 ON r.authorId = u2.id`, [login], (err, r) => { if (err) throw err resolve({ reviews: r }) } ) }) } let requests = [] console.log('req.query = ', req.query); if (req.query.hasOwnProperty('user')) { requests.push(getUser(login)) } if (req.query.hasOwnProperty('portfolio')) { requests.push(getPortfolio(login)) } if (req.query.hasOwnProperty('projects')) { requests.push(getProjects(login)) } if (req.query.hasOwnProperty('reviews')) { requests.push(getReviews(login)) } Promise.all(requests) .then(values => { console.log(values); // [3, 1337, "foo"] res.json(values) }) .catch(err => { res.json(err) }) }); // # 2 /* /api/v1/users/:login/projects/ */ router.get('/:login/projects/', function(req, res, next) { res.json({ hello:'world' }) }) module.exports = router; |
It’s very important the line that specifies the regex should be a js regular expression. Not a string!
|
1 |
router.get(/\/(.*)\/(portfolio|projects|reviews)/, function(req, res, next) { |
the end
|
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 |
import { Formik, Form, Field, ErrorMessage } from 'formik' <Formik initialValues={{ username: '', password: '', rememberMe: true }} validate={values => { // handle errorrs let errors = {} if (!values.username) { errors.username = 'Required' } return errors }} onSubmit={(values, actions) => { // could accept such actions actions.resetForm() actions.setSubmitting(false); actions.setErrors({ onSubmit: 'the server unavailable' }); actions.setStatus({ msg: 'Set some arbitrary status or data' }); }} render={({ errors, status, touched, isSubmitting }) => ( <Form className="loginForm"> <div className="title"> <h2>To come in...</h2> </div> <div className="emailOrLogin" > <Field type="text" name="username" placeholder="Email or login" /> <ErrorMessage className="error" name="username" component="div" /> </div> <div className="password"> <Field type="password" name="password" placeholder="Password" /> <ErrorMessage className="error" name="password" component="div"/> </div> <div className="rememberMe"> <label> <Field type="checkbox" name="rememberMe" /> Remember me </label> </div> <ErrorMessage className="submitError" name="onSubmit" component="div"/> <button type="submit" disabled={isSubmitting}> Log in </button> {errors && errors.onSubmit && <div className="error">{errors.onSubmit}</div>} {status && status.msg && <div className="error">{status.msg}</div>} <div className='loginAndRegistration'> <Link to={`/${this.props.locale}/recover/`}>Recover forgotten password</Link> <Link to={`/${this.props.locale}/registration/`}>Registration</Link> </div> </Form> )} /> |
How to load a file on the server with the formik https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc Formik doesn’t support such functionality, so you have to use this code
|
1 2 3 4 5 6 7 8 9 |
<input id="thumbnail" name="thumbnail" type="file" onChange={(event) => { setFieldValue("thumbnail", event.currentTarget.files[0]); return true; }} /> |
If we change input on the field it won’t work, we’ll get the error that tells that impossible to assign a file some data, we can assign…
#Content table: Preface Installation Create the authentication router Implementation of a JWT protected router Test the JWT authentication and authorization Conclusions A few words about https and http all the code files /routers/auth.js, /routers/users.js, /app/passport.js and app.js Resources #Preface JWT is a json web token. It is used for authentication between server and client….
It is frequently need to create a site that will support a few languages, for example I’m going to create multilingual site which will support 3 languages for a while. Then I’m going to add a few more. So, I want to build with 3 ua, ru, en. And in this article I’ll explain to…
In this article we’ll overview socket io + apache as a reverse proxy. CentOS by default delivered with modules needed to work a reverse – proxy properly, so we don’t need to do anything but customize a virtual host. Beforehand you have to open port 3000 or whatever. Open the file where is your <VirtualHost….></VirtualHost>…