Adrien Denat Grsmto

Happy Freelancing

Je m’appelle Thibaut Assus, j’ai 30 ans, je suis freelance en développement web et ma technologie de prédilection est le Ruby on Rails. J’ai maintenant un peu d’expérience dans le domaine du freelancing et ce document a pour but de partager avec vous une partie de cette expérience.

Mon parcours de développeur Ruby

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Encoding Video

Installing

Install FFmpeg with homebrew. You'll need to install it with a couple flags for webm and the AAC audio codec.

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aac --with-opus

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

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	#########################
	# .gitignore file for Xcode4 and Xcode5 Source projects
	#
	# Apple bugs, waiting for Apple to fix/respond:
	#
	# 15564624 - what does the xccheckout file in Xcode5 do? Where's the documentation?
	#
	# Version 2.6
	# For latest version, see: http://stackoverflow.com/questions/49478/git-ignore-file-for-xcode-projects
	#

	/*!
	* Extract a function's comment, useful to have multiline string
	* @link https://gist.github.com/lavoiesl/5880516
	*
	* Don't forget to use /*! to avoid the comment being removed in minification
	*/
	// Example:
	// var myString = extractFuncCommentString(function(){/*!
	// <p>
	// foo bar


	// These window.navigator contain language information
	// 1. languages -> Array of preferred languages (eg ["en-US", "zh-CN", "ja-JP"]) Firefox^32, Chrome^32
	// 2. language -> Preferred language as String (eg "en-US") Firefox^5, IE^11, Safari,
	// Chrome sends Browser UI language
	// 3. browserLanguage -> UI Language of IE
	// 4. userLanguage -> Language of Windows Regional Options
	// 5. systemLanguage -> UI Language of Windows
	var browserLanguagePropertyKeys = ['languages', 'language', 'browserLanguage', 'userLanguage', 'systemLanguage'];

	/**
	* # `<Image>`
	*
	* This component is a merge between `next/image` and `Chakra-ui`.
	* - last updated on 2023-08-08 with `next/image` 13.4.13 and `chakra-ui/react` 2.8.0
	* - https://github.com/vercel/next.js/blob/v13.4.13/packages/next/src/client/image-component.tsx
	* - https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image-component.tsx
	* - https://github.com/vercel/next.js/commits/canary/packages/next/src/client/image-component.tsx
	* - https://github.com/vercel/next.js/compare/v13.4.4...canary
	*

	ffmpeg -ss $INPUT_START_TIME -t $LENGTH -i $INPUT_FILENAME \
	-vf "fps=$OUTPUT_FPS,scale=$OUTPUT_WIDTH:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
	-loop $NUMBER_OF_LOOPS $OUTPUT_FILENAME

	# Change these placeholders:
	# * $INPUT_START_TIME - number of seconds in the input video to start from.
	# * $LENGTH - number of seconds to convert from the input video.
	# * $INPUT_FILENAME - path to the input video.
	# * $OUTPUT_FPS - ouput frames per second. Start with `10`.
	# * $OUTPUT_WIDTH - output width in pixels. Aspect ratio is maintained.