Durul duruld

## prepack-gentle-intro-1.md

      
              1 file
            
          
              26 forks
            
          
              14 comments
            
          
              638 stars
            
          
                gaearon
                / prepack-gentle-intro-1.md
            
            
              Last active
              May 3, 2024 12:56
            
              
                A Gentle Introduction to Prepack, Part 1
              
          
Note:
When this guide is more complete, the plan is to move it into Prepack documentation.

For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.


## what-forces-layout.md

      
              1 file
            
          
              818 forks
            
          
              109 comments
            
          
              8124 stars
            
          
                paulirish
                / what-forces-layout.md
            
            
              Last active
              June 26, 2024 20:47
            
              
                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


## iframe.html
<!DOCTYPE html>
<html>
<head>
	<title>My Iframe</title>
</head>
<body>

<button>Botão</button>

<script type="text/javascript">

## query_finder.sql
SELECT id,state,command,time,left(replace(info,'\n','<lf>'),120)
FROM information_schema.processlist
WHERE command <> 'Sleep'
AND info NOT LIKE '%PROCESSLIST%'
ORDER BY time DESC LIMIT 50;

## After-Selector-Shadow.css
/*
Used :after psuedo selector to create a shadow on an element. I did this instead of just box-shadow on the element , because I wanted the shadow slightly more narrow than the element.

Depending on your styles, the shadow will look something like this: http://cl.ly/2fua


*/
.bottom {
  background: rgb(254, 243, 216) url(../images/background.png) top left repeat;
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Iframe</title>
	</head>
	<body>

	<button>Botão</button>

	<script type="text/javascript">
	SELECT id,state,command,time,left(replace(info,'\n','<lf>'),120)
	FROM information_schema.processlist
	WHERE command <> 'Sleep'
	AND info NOT LIKE '%PROCESSLIST%'
	ORDER BY time DESC LIMIT 50;
	/*
	Used :after psuedo selector to create a shadow on an element. I did this instead of just box-shadow on the element , because I wanted the shadow slightly more narrow than the element.

	Depending on your styles, the shadow will look something like this: http://cl.ly/2fua



	*/
	.bottom {
	background: rgb(254, 243, 216) url(../images/background.png) top left repeat;