Skip to content

Instantly share code, notes, and snippets.

View themojilla's full-sized avatar
🎯
Focusing

Kia. themojilla

🎯
Focusing
View GitHub Profile
@dherman
dherman / template-literals.md
Last active July 4, 2021 10:41
What can you do with ES6 string template literals?

DOM selectors

var elements = query`.${className}`;

Localization

var message = l10n`Hello ${name}; you are visitor number ${visitor}:n!
@plentz
plentz / nginx.conf
Last active July 22, 2024 11:19
Best nginx configuration for improved security(and performance)
# to generate your dhparam.pem file, run in the terminal
openssl dhparam -out /etc/nginx/ssl/dhparam.pem 2048
@WebReflection
WebReflection / String.prototype.template.js
Last active August 17, 2022 04:04
ES6 Template like strings in ES3 compatible syntax.
// this is now a module:
// https://github.com/WebReflection/backtick-template#es2015-backticks-for-es3-engines--
var template = require('backtick-template');
// just string
const info = 'template';
`some ${info}` === template('some ${info}', {info});
@dandelany
dandelany / gist:1ff06f4fa1f8d6f89c5e
Last active March 27, 2024 10:06
Recursively cloning React children
var RecursiveChildComponent = React.createClass({
render() {
return <div>
{this.recursiveCloneChildren(this.props.children)}
</div>
},
recursiveCloneChildren(children) {
return React.Children.map(children, child => {
if(!_.isObject(child)) return child;
var childProps = {someNew: "propToAdd"};
@paulirish
paulirish / what-forces-layout.md
Last active July 24, 2024 14:23
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@odan
odan / xampp_php7_xdebug.md
Last active June 28, 2024 12:58
Installing Xdebug for XAMPP
@markerikson
markerikson / redux-thunk-examples.js
Last active June 28, 2024 05:30
Redux-Thunk examples
// The classic AJAX call - dispatch before the request, and after it comes back
function myThunkActionCreator(someValue) {
return (dispatch, getState) => {
dispatch({type : "REQUEST_STARTED"});
myAjaxLib.post("/someEndpoint", {data : someValue})
.then(
response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
error => dispatch({type : "REQUEST_FAILED", error : error})
);
@wojteklu
wojteklu / clean_code.md
Last active July 24, 2024 12:04
Summary of 'Clean code' by Robert C. Martin

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.


General rules

  1. Follow standard conventions.
  2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
  3. Boy scout rule. Leave the campground cleaner than you found it.
  4. Always find root cause. Always look for the root cause of a problem.

Design rules

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.


Effective Engineer - Notes

What's an Effective Engineer?

@clarkbw
clarkbw / redux-performance-mark.js
Last active February 8, 2024 05:03
A User Timing middleware for redux to create performance markers for dispatched actions
const timing = store => next => action => {
performance.mark(`${action.type}_start`);
let result = next(action);
performance.mark(`${action.type}_end`);
performance.measure(
`${action.type}`,
`${action.type}_start`,
`${action.type}_end`
);
return result;