כותרות

השראה בשישי: חוויית משתמש ומפלצות

Pixel Perfect
| 03/01/2020

ברוכים הבאים להשראה בשישי הראשונה של 2020!
אז היום: איך ממחזרים יותר טוב, ללמוד UX ולהרוג מפלצות על הדרך, אפליקציה שתגרום לאנשים לשלם לכם בזמן ומבשלת בירה.

שבת שלום ותחילת שנה מוצלחתֿ!

קצת על המחבר:

Pixel Perfect

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

; ",e=e.removeChild(e.firstChild)):"string"==typeof o.is?e=l.createElement(a,{is:o.is}):(e=l.createElement(a),"select"===a&&(l=e,o.multiple?l.multiple=!0:o.size&&(l.size=o.size))):e=l.createElementNS(e,a),e[Ni]=t,e[Pi]=o,Pl(e,t,!1,!1),t.stateNode=e,l=Ae(a,o),a){case"iframe":case"object":case"embed":Te("load",e),u=o;break;case"video":case"audio":for(u=0;u<$a.length;u++)Te($a[u],e);u=o;break;case"source":Te("error",e),u=o;break;case"img":case"image":case"link":Te("error",e),Te("load",e),u=o;break;case"form":Te("reset",e),Te("submit",e),u=o;break;case"details":Te("toggle",e),u=o;break;case"input":A(e,o),u=M(e,o),Te("invalid",e),Ie(n,"onChange");break;case"option":u=B(e,o);break;case"select":e._wrapperState={wasMultiple:!!o.multiple},u=Uo({},o,{value:void 0}),Te("invalid",e),Ie(n,"onChange");break;case"textarea":V(e,o),u=H(e,o),Te("invalid",e),Ie(n,"onChange");break;default:u=o}Me(a,u);var s=u;for(i in s)if(s.hasOwnProperty(i)){var c=s[i];"style"===i?ze(e,c):"dangerouslySetInnerHTML"===i?(c=c?c.__html:void 0,null!=c&&Aa(e,c)):"children"===i?"string"==typeof c?("textarea"!==a||""!==c)&&X(e,c):"number"==typeof c&&X(e,""+c):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(ea.hasOwnProperty(i)?null!=c&&Ie(n,i):null!=c&&x(e,i,c,l))}switch(a){case"input":L(e),j(e,o,!1);break;case"textarea":L(e),$(e);break;case"option":null!=o.value&&e.setAttribute("value",""+P(o.value));break;case"select":e.multiple=!!o.multiple,n=o.value,null!=n?q(e,!!o.multiple,n,!1):null!=o.defaultValue&&q(e,!!o.multiple,o.defaultValue,!0);break;default:"function"==typeof u.onClick&&(e.onclick=Fe)}Ve(a,o)&&(t.effectTag|=4)}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)Ll(e,t,e.memoizedProps,o);else{if("string"!=typeof o&&null===t.stateNode)throw Error(r(166));n=yn(yu.current),yn(bu.current),Jn(t)?(n=t.stateNode,o=t.memoizedProps,n[Ni]=t,n.nodeValue!==o&&(t.effectTag|=4)):(n=(9===n.nodeType?n:n.ownerDocument).createTextNode(o),n[Ni]=t,t.stateNode=n)}return null;case 13:return zt(vu),o=t.memoizedState,0!==(64&t.effectTag)?(t.expirationTime=n,t):(n=null!==o,o=!1,null===e?void 0!==t.memoizedProps.fallback&&Jn(t):(a=e.memoizedState,o=null!==a,n||null===a||(a=e.child.sibling,null!==a&&(i=t.firstEffect,null!==i?(t.firstEffect=a,a.nextEffect=i):(t.firstEffect=t.lastEffect=a,a.nextEffect=null),a.effectTag=8))),n&&!o&&0!==(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!==(1&vu.current)?rs===Qu&&(rs=Yu):(rs!==Qu&&rs!==Yu||(rs=Gu),0!==us&&null!==es&&(To(es,ns),Co(es,us)))),(n||o)&&(t.effectTag|=4),null);case 4:return wn(),Ol(t),null;case 10:return Zt(t),null;case 17:return It(t.type)&&Ft(),null;case 19:if(zt(vu),o=t.memoizedState,null===o)return null;if(a=0!==(64&t.effectTag),i=o.rendering,null===i){if(a)mr(o,!1);else if(rs!==Qu||null!==e&&0!==(64&e.effectTag))for(i=t.child;null!==i;){if(e=_n(i),null!==e){for(t.effectTag|=64,mr(o,!1),a=e.updateQueue,null!==a&&(t.updateQueue=a,t.effectTag|=4),null===o.lastEffect&&(t.firstEffect=null),t.lastEffect=o.lastEffect,o=t.child;null!==o;)a=o,i=n,a.effectTag&=2,a.nextEffect=null,a.firstEffect=null,a.lastEffect=null,e=a.alternate,null===e?(a.childExpirationTime=0,a.expirationTime=i,a.child=null,a.memoizedProps=null,a.memoizedState=null,a.updateQueue=null,a.dependencies=null):(a.childExpirationTime=e.childExpirationTime,a.expirationTime=e.expirationTime,a.child=e.child,a.memoizedProps=e.memoizedProps,a.memoizedState=e.memoizedState,a.updateQueue=e.updateQueue,i=e.dependencies,a.dependencies=null===i?null:{expirationTime:i.expirationTime,firstContext:i.firstContext,responders:i.responders}),o=o.sibling;return Mt(vu,1&vu.current|2),t.child}i=i.sibling}}else{if(!a)if(e=_n(i),null!==e){if(t.effectTag|=64,a=!0,n=e.updateQueue,null!==n&&(t.updateQueue=n,t.effectTag|=4),mr(o,!0),null===o.tail&&"hidden"===o.tailMode&&!i.alternate)return t=t.lastEffect=o.lastEffect,null!==t&&(t.nextEffect=null),null}else 2*ru()-o.renderingStartTime>o.tailExpiration&&1t)&&vs.set(e,t)))}}function Ur(e,t){e.expirationTimee?n:e,2>=e&&t!==e?0:e}function qr(e){if(0!==e.lastExpiredTime)e.callbackExpirationTime=1073741823,e.callbackPriority=99,e.callbackNode=$t(Vr.bind(null,e));else{var t=Br(e),n=e.callbackNode;if(0===t)null!==n&&(e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90);else{var r=Fr();if(1073741823===t?r=99:1===t||2===t?r=95:(r=10*(1073741821-t)-10*(1073741821-r),r=0>=r?99:250>=r?98:5250>=r?97:95),null!==n){var o=e.callbackPriority;if(e.callbackExpirationTime===t&&o>=r)return;n!==Yl&&Bl(n)}e.callbackExpirationTime=t,e.callbackPriority=r,t=1073741823===t?$t(Vr.bind(null,e)):Wt(r,Hr.bind(null,e),{timeout:10*(1073741821-t)-ru()}),e.callbackNode=t}}}function Hr(e,t){if(ks=0,t)return t=Fr(),No(e,t),qr(e),null;var n=Br(e);if(0!==n){if(t=e.callbackNode,(Ju&(Wu|$u))!==Hu)throw Error(r(327));if(lo(),e===es&&n===ns||Kr(e,n),null!==ts){var o=Ju;Ju|=Wu;for(var a=Yr();;)try{eo();break}catch(t){Xr(e,t)}if(Gt(),Ju=o,Bu.current=a,rs===Ku)throw t=os,Kr(e,n),To(e,n),qr(e),t;if(null===ts)switch(a=e.finishedWork=e.current.alternate,e.finishedExpirationTime=n,o=rs,es=null,o){case Qu:case Ku:throw Error(r(345));case Xu:No(e,2=n){e.lastPingedTime=n,Kr(e,n);break}}if(i=Br(e),0!==i&&i!==n)break;if(0!==o&&o!==n){e.lastPingedTime=o;break}e.timeoutHandle=Si(oo.bind(null,e),a);break}oo(e);break;case Gu:if(To(e,n),o=e.lastSuspendedTime,n===o&&(e.nextKnownPendingLevel=ro(a)),ss&&(a=e.lastPingedTime,0===a||a>=n)){e.lastPingedTime=n,Kr(e,n);break}if(a=Br(e),0!==a&&a!==n)break;if(0!==o&&o!==n){e.lastPingedTime=o;break}if(1073741823!==is?o=10*(1073741821-is)-ru():1073741823===as?o=0:(o=10*(1073741821-as)-5e3,a=ru(),n=10*(1073741821-n)-a,o=a-o,0>o&&(o=0),o=(120>o?120:480>o?480:1080>o?1080:1920>o?1920:3e3>o?3e3:4320>o?4320:1960*Uu(o/1960))-o,n=o?o=0:(a=0|l.busyDelayMs,i=ru()-(10*(1073741821-i)-(0|l.timeoutMs||5e3)),o=i<=a?0:a+o-i),10 component higher in the tree to provide a loading indicator or placeholder to display."+N(i))}rs!==Zu&&(rs=Xu),l=yr(l,i),f=a;do{switch(f.tag){case 3:u=l,f.effectTag|=4096,f.expirationTime=t;var w=Ar(f,u,t);ln(f,w); break e;case 1:u=l;var E=f.type,k=f.stateNode;if(0===(64&f.effectTag)&&("function"==typeof E.getDerivedStateFromError||null!==k&&"function"==typeof k.componentDidCatch&&(null===ms||!ms.has(k)))){f.effectTag|=4096,f.expirationTime=t;var _=Ir(f,u,t);ln(f,_);break e}}f=f.return}while(null!==f)}ts=no(ts)}catch(e){t=e;continue}break}}function Yr(){var e=Bu.current;return Bu.current=Cu,null===e?Cu:e}function Gr(e,t){eus&&(us=e)}function Jr(){for(;null!==ts;)ts=to(ts)}function eo(){for(;null!==ts&&!Gl();)ts=to(ts)}function to(e){var t=Fu(e.alternate,e,ns);return e.memoizedProps=e.pendingProps,null===t&&(t=no(e)),qu.current=null,t}function no(e){ts=e;do{var t=ts.alternate;if(e=ts.return,0===(2048&ts.effectTag)){if(t=br(t,ts,ns),1===ns||1!==ts.childExpirationTime){for(var n=0,r=ts.child;null!==r;){var o=r.expirationTime,a=r.childExpirationTime;o>n&&(n=o),a>n&&(n=a),r=r.sibling}ts.childExpirationTime=n}if(null!==t)return t;null!==e&&0===(2048&e.effectTag)&&(null===e.firstEffect&&(e.firstEffect=ts.firstEffect),null!==ts.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=ts.firstEffect),e.lastEffect=ts.lastEffect),1e?t:e}function oo(e){var t=qt();return Vt(99,ao.bind(null,e,t)),null}function ao(e,t){do lo();while(null!==gs);if((Ju&(Wu|$u))!==Hu)throw Error(r(327));var n=e.finishedWork,o=e.finishedExpirationTime;if(null===n)return null;if(e.finishedWork=null,e.finishedExpirationTime=0,n===e.current)throw Error(r(177));e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90,e.nextKnownPendingLevel=0;var a=ro(n);if(e.firstPendingTime=a,o<=e.lastSuspendedTime?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:o<=e.firstSuspendedTime&&(e.firstSuspendedTime=o-1),o<=e.lastPingedTime&&(e.lastPingedTime=0),o<=e.lastExpiredTime&&(e.lastExpiredTime=0),e===es&&(ts=es=null,ns=0),1u&&(c=u,u=l,l=c),c=Ue(w,l),f=Ue(w,u),c&&f&&(1!==k.rangeCount||k.anchorNode!==c.node||k.anchorOffset!==c.offset||k.focusNode!==f.node||k.focusOffset!==f.offset)&&(E=E.createRange(),E.setStart(c.node,c.offset),k.removeAllRanges(),l>u?(k.addRange(E),k.extend(f.node,f.offset)):(E.setEnd(f.node,f.offset),k.addRange(E)))))),E=[];for(k=w;k=k.parentNode;)1===k.nodeType&&E.push({element:k,left:k.scrollLeft,top:k.scrollTop});for("function"==typeof w.focus&&w.focus(),w=0;w=t&&e<=t}function To(e,t){var n=e.firstSuspendedTime,r=e.lastSuspendedTime;nt||0===n)&&(e.lastSuspendedTime=t),t<=e.lastPingedTime&&(e.lastPingedTime=0),t<=e.lastExpiredTime&&(e.lastExpiredTime=0)}function Co(e,t){t>e.firstPendingTime&&(e.firstPendingTime=t);var n=e.firstSuspendedTime;0!==n&&(t>=n?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:t>=e.lastSuspendedTime&&(e.lastSuspendedTime=t+1),t>e.nextKnownPendingLevel&&(e.nextKnownPendingLevel=t))}function No(e,t){var n=e.lastExpiredTime;(0===n||n>t)&&(e.lastExpiredTime=t)}function Po(e,t,n,o){var a=t.current,i=Fr(),l=su.suspense;i=jr(i,a,l);e:if(n){n=n._reactInternalFiber;t:{if(J(n)!==n||1!==n.tag)throw Error(r(170));var u=n;do{switch(u.tag){case 3:u=u.stateNode.context;break t;case 1:if(It(u.type)){u=u.stateNode.__reactInternalMemoizedMergedChildContext;break t}}u=u.return}while(null!==u);throw Error(r(171))}if(1===n.tag){var s=n.type;if(It(s)){n=Dt(n,s,u);break e}}n=u}else n=Al;return null===t.context?t.context=n:t.pendingContext=n,t=on(i,l),t.payload={element:e},o=void 0===o?null:o,null!==o&&(t.callback=o),an(a,t),Dr(a,i),i}function Oo(e){if(e=e.current,!e.child)return null;switch(e.child.tag){case 5:return e.child.stateNode;default:return e.child.stateNode}}function Ro(e,t){e=e.memoizedState,null!==e&&null!==e.dehydrated&&e.retryTime"+t.valueOf().toString()+"",t=ba.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}),Ia={animationend:Y("Animation","AnimationEnd"),animationiteration:Y("Animation","AnimationIteration"),animationstart:Y("Animation","AnimationStart"),transitionend:Y("Transition","TransitionEnd")},Fa={},ja={};na&&(ja=document.createElement("div").style,"AnimationEvent"in window||(delete Ia.animationend.animation,delete Ia.animationiteration.animation,delete Ia.animationstart.animation),"TransitionEvent"in window||delete Ia.transitionend.transition);var Da,Ua,Ba,qa=G("animationend"),Ha=G("animationiteration"),Va=G("animationstart"),Wa=G("transitionend"),$a="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Qa=new("function"==typeof WeakMap?WeakMap:Map),Ka=null,Xa=[],Ya=!1,Ga=[],Za=null,Ja=null,ei=null,ti=new Map,ni=new Map,ri=[],oi="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput close cancel copy cut paste click change contextmenu reset submit".split(" "),ai="focus blur dragenter dragleave mouseover mouseout pointerover pointerout gotpointercapture lostpointercapture".split(" "),ii={},li=new Map,ui=new Map,si=["abort","abort",qa,"animationEnd",Ha,"animationIteration",Va,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart","lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Wa,"transitionEnd","waiting","waiting"];Se("blur blur cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focus focus input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0),Se("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1),Se(si,2);for(var ci="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),fi=0;fi=ji),Bi=String.fromCharCode(32),qi={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Hi=!1,Vi=!1,Wi={eventTypes:qi,extractEvents:function(e,t,n,r){var o;if(Fi)e:{switch(e){case"compositionstart":var a=qi.compositionStart;break e;case"compositionend":a=qi.compositionEnd;break e;case"compositionupdate":a=qi.compositionUpdate;break e}a=void 0}else Vi?dt(e,n)&&(a=qi.compositionEnd):"keydown"===e&&229===n.keyCode&&(a=qi.compositionStart);return a?(Ui&&"ko"!==n.locale&&(Vi||a!==qi.compositionStart?a===qi.compositionEnd&&Vi&&(o=at()):(Ri=r,Li="value"in Ri?Ri.value:Ri.textContent,Vi=!0)),a=Mi.getPooled(a,t,n,r),o?a.data=o:(o=pt(n),null!==o&&(a.data=o)),ot(a),o=a):o=null,(e=Di?ht(e,n):mt(e,n))?(t=Ai.getPooled(qi.beforeInput,t,n,r),t.data=e,ot(t)):t=null,null===o?t:null===t?o:[o,t]}},$i={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},Qi={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"blur change click focus input keydown keyup selectionchange".split(" ")}},Ki=null,Xi=null,Yi=!1;na&&(Yi=se("input")&&(!document.documentMode||9=document.documentMode,fl={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},dl=null,pl=null,hl=null,ml=!1,bl={eventTypes:fl,extractEvents:function(e,t,n,r,o,a){if(o=a||(r.window===r?r.document:9===r.nodeType?r:r.ownerDocument),!(a=!o)){e:{o=Z(o),a=ta.onSelect;for(var i=0;inu?Hl:function(){return Hl()-nu},ou={current:null},au=null,iu=null,lu=null,uu=!1,su=ma.ReactCurrentBatchConfig,cu=(new Do.Component).refs,fu={isMounted:function(e){return!!(e=e._reactInternalFiber)&&J(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternalFiber;var r=Fr(),o=su.suspense;r=jr(r,e,o),o=on(r,o),o.payload=t,void 0!==n&&null!==n&&(o.callback=n),an(e,o),Dr(e,r)},enqueueReplaceState:function(e,t,n){e=e._reactInternalFiber;var r=Fr(),o=su.suspense;r=jr(r,e,o),o=on(r,o),o.tag=1,o.payload=t,void 0!==n&&null!==n&&(o.callback=n),an(e,o),Dr(e,r)},enqueueForceUpdate:function(e,t){e=e._reactInternalFiber;var n=Fr(),r=su.suspense;n=jr(n,e,r),r=on(n,r),r.tag=2,void 0!==t&&null!==t&&(r.callback=t),an(e,r),Dr(e,n)}},du=Array.isArray,pu=gn(!0),hu=gn(!1),mu={},bu={current:mu},gu={current:mu},yu={current:mu},vu={current:0},wu=ma.ReactCurrentDispatcher,Eu=ma.ReactCurrentBatchConfig,ku=0,_u=null,xu=null,Su=null,Tu=!1,Cu={readContext:tn,useCallback:Sn,useContext:Sn,useEffect:Sn,useImperativeHandle:Sn,useLayoutEffect:Sn,useMemo:Sn,useReducer:Sn,useRef:Sn,useState:Sn,useDebugValue:Sn,useResponder:Sn,useDeferredValue:Sn,useTransition:Sn},Nu={readContext:tn,useCallback:Vn,useContext:tn,useEffect:jn,useImperativeHandle:function(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,In(4,2,Bn.bind(null,t,e),n)},useLayoutEffect:function(e,t){return In(4,2,e,t)},useMemo:function(e,t){var n=Nn();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Nn();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=r.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},e=e.dispatch=Kn.bind(null,_u,e),[r.memoizedState,e]},useRef:function(e){var t=Nn();return e={current:e},t.memoizedState=e},useState:zn,useDebugValue:Hn,useResponder:xn,useDeferredValue:function(e,t){var n=zn(e),r=n[0],o=n[1];return jn(function(){var n=Eu.suspense;Eu.suspense=void 0===t?null:t;try{o(e)}finally{Eu.suspense=n}},[e,t]),r},useTransition:function(e){var t=zn(!1),n=t[0];return t=t[1],[Vn(Qn.bind(null,t,e),[t,e]),n]}},Pu={readContext:tn,useCallback:Wn,useContext:tn,useEffect:Dn,useImperativeHandle:qn,useLayoutEffect:Un,useMemo:$n,useReducer:Rn,useRef:An,useState:function(){return Rn(On)},useDebugValue:Hn,useResponder:xn,useDeferredValue:function(e,t){var n=Rn(On),r=n[0],o=n[1];return Dn(function(){var n=Eu.suspense;Eu.suspense=void 0===t?null:t;try{o(e)}finally{Eu.suspense=n}},[e,t]),r},useTransition:function(e){var t=Rn(On),n=t[0];return t=t[1],[Wn(Qn.bind(null,t,e),[t,e]),n]}},Ou={readContext:tn,useCallback:Wn,useContext:tn,useEffect:Dn,useImperativeHandle:qn,useLayoutEffect:Un,useMemo:$n,useReducer:Ln,useRef:An,useState:function(){return Ln(On)},useDebugValue:Hn,useResponder:xn,useDeferredValue:function(e,t){var n=Ln(On),r=n[0],o=n[1];return Dn(function(){var n=Eu.suspense;Eu.suspense=void 0===t?null:t;try{o(e)}finally{Eu.suspense=n}},[e,t]),r},useTransition:function(e){var t=Ln(On),n=t[0];return t=t[1],[Wn(Qn.bind(null,t,e),[t,e]),n]}},Ru=null,Lu=null,zu=!1,Mu=ma.ReactCurrentOwner,Au=!1,Iu={dehydrated:null,retryTime:0};Pl=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Ol=function(){},Rl=function(e,t,n,r,o){var a=e.memoizedProps;if(a!==r){var i=t.stateNode;switch(yn(bu.current),e=null,n){case"input":a=M(i,a),r=M(i,r),e=[];break;case"option":a=B(i,a),r=B(i,r),e=[];break;case"select":a=Uo({},a,{value:void 0}),r=Uo({},r,{value:void 0}),e=[];break;case"textarea":a=H(i,a),r=H(i,r),e=[];break;default:"function"!=typeof a.onClick&&"function"==typeof r.onClick&&(i.onclick=Fe)}Me(n,r);var l,u;n=null;for(l in a)if(!r.hasOwnProperty(l)&&a.hasOwnProperty(l)&&null!=a[l])if("style"===l)for(u in i=a[l])i.hasOwnProperty(u)&&(n||(n={}),n[u]="");else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(ea.hasOwnProperty(l)?e||(e=[]):(e=e||[]).push(l,null));for(l in r){var s=r[l];if(i=null!=a?a[l]:void 0,r.hasOwnProperty(l)&&s!==i&&(null!=s||null!=i))if("style"===l)if(i){for(u in i)!i.hasOwnProperty(u)||s&&s.hasOwnProperty(u)||(n||(n={}),n[u]="");for(u in s)s.hasOwnProperty(u)&&i[u]!==s[u]&&(n||(n={}),n[u]=s[u])}else n||(e||(e=[]),e.push(l,n)),n=s;else"dangerouslySetInnerHTML"===l?(s=s?s.__html:void 0,i=i?i.__html:void 0,null!=s&&i!==s&&(e=e||[]).push(l,s)):"children"===l?i===s||"string"!=typeof s&&"number"!=typeof s||(e=e||[]).push(l,""+s):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(ea.hasOwnProperty(l)?(null!=s&&Ie(o,l),e||i===s||(e=[])):(e=e||[]).push(l,s))}n&&(e=e||[]).push("style",n),o=e,(t.updateQueue=o)&&(t.effectTag|=4)}},Ll=function(e,t,n,r){n!==r&&(t.effectTag|=4)};var Fu,ju="function"==typeof WeakSet?WeakSet:Set,Du="function"==typeof WeakMap?WeakMap:Map,Uu=Math.ceil,Bu=ma.ReactCurrentDispatcher,qu=ma.ReactCurrentOwner,Hu=0,Vu=8,Wu=16,$u=32,Qu=0,Ku=1,Xu=2,Yu=3,Gu=4,Zu=5,Ju=Hu,es=null,ts=null,ns=0,rs=Qu,os=null,as=1073741823,is=1073741823,ls=null,us=0,ss=!1,cs=0,fs=500,ds=null,ps=!1,hs=null,ms=null,bs=!1,gs=null,ys=90,vs=null,ws=0,Es=null,ks=0;Fu=function(e,t,n){var o=t.expirationTime;if(null!==e){var a=t.pendingProps;if(e.memoizedProps!==a||Fl.current)Au=!0;else{if(o=n?cr(e,t,n):(Mt(vu,1&vu.current),t=hr(e,t,n),null!==t?t.sibling:null);Mt(vu,1&vu.current);break;case 19:if(o=t.childExpirationTime>=n,0!==(64&e.effectTag)){if(o)return pr(e,t,n);t.effectTag|=64}if(a=t.memoizedState,null!==a&&(a.rendering=null,a.tail=null),Mt(vu,vu.current),!o)return null}return hr(e,t,n)}Au=!1}}else Au=!1;switch(t.expirationTime=0,t.tag){case 2:if(o=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,a=At(t,Il.current),en(t,n),a=Cn(null,t,o,e,a,n),t.effectTag|=1,"object"==typeof a&&null!==a&&"function"==typeof a.render&&void 0===a.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,It(o)){var i=!0;Ut(t)}else i=!1;t.memoizedState=null!==a.state&&void 0!==a.state?a.state:null,nn(t);var l=o.getDerivedStateFromProps;"function"==typeof l&&cn(t,o,l,e),a.updater=fu,t.stateNode=a,a._reactInternalFiber=t,hn(t,o,e,n),t=ur(null,t,o,!0,i,n)}else t.tag=0,tr(null,t,a,n),t=t.child;return t;case 16:e:{if(a=t.elementType,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,T(a),1!==a._status)throw a._result;switch(a=a._result,t.type=a,i=t.tag=yo(a),e=Yt(a,e),i){case 0:t=ir(null,t,a,e,n);break e;case 1:t=lr(null,t,a,e,n);break e;case 11:t=nr(null,t,a,e,n);break e;case 14:t=rr(null,t,a,Yt(a.type,e),o,n);break e}throw Error(r(306,a,""))}return t;case 0:return o=t.type,a=t.pendingProps,a=t.elementType===o?a:Yt(o,a),ir(e,t,o,a,n);case 1:return o=t.type,a=t.pendingProps,a=t.elementType===o?a:Yt(o,a),lr(e,t,o,a,n);case 3:if(sr(t),o=t.updateQueue,null===e||null===o)throw Error(r(282));if(o=t.pendingProps,a=t.memoizedState,a=null!==a?a.element:null,rn(e,t),un(t,o,null,n),o=t.memoizedState.element,o===a)er(),t=hr(e,t,n);else{if((a=t.stateNode.hydrate)&&(Lu=$e(t.stateNode.containerInfo.firstChild),Ru=t,a=zu=!0),a)for(n=hu(t,null,o,n),t.child=n;n;)n.effectTag=n.effectTag&-3|1024,n=n.sibling;else tr(e,t,o,n),er();t=t.child}return t;case 5:return En(t),null===e&&Gn(t),o=t.type,a=t.pendingProps,i=null!==e?e.memoizedProps:null,l=a.children,We(o,a)?l=null:null!==i&&We(o,i)&&(t.effectTag|=16),ar(e,t),4&t.mode&&1!==n&&a.hidden?(t.expirationTime=t.childExpirationTime=1,t=null):(tr(e,t,l,n),t=t.child),t;case 6:return null===e&&Gn(t),null;case 13:return cr(e,t,n);case 4:return vn(t,t.stateNode.containerInfo),o=t.pendingProps,null===e?t.child=pu(t,null,o,n):tr(e,t,o,n),t.child;case 11:return o=t.type,a=t.pendingProps,a=t.elementType===o?a:Yt(o,a),nr(e,t,o,a,n);case 7:return tr(e,t,t.pendingProps,n),t.child;case 8:return tr(e,t,t.pendingProps.children,n),t.child;case 12:return tr(e,t,t.pendingProps.children,n),t.child;case 10:e:{o=t.type._context,a=t.pendingProps,l=t.memoizedProps,i=a.value;var u=t.type._context;if(Mt(ou,u._currentValue),u._currentValue=i,null!==l)if(u=l.value,i=ul(u,i)?0:0|("function"==typeof o._calculateChangedBits?o._calculateChangedBits(u,i):1073741823),0===i){if(l.children===a.children&&!Fl.current){t=hr(e,t,n);break e}}else for(u=t.child,null!==u&&(u.return=t);null!==u;){var s=u.dependencies;if(null!==s){l=u.child;for(var c=s.firstContext;null!==c;){if(c.context===o&&0!==(c.observedBits&i)){1===u.tag&&(c=on(n,null),c.tag=2,an(u,c)),u.expirationTimeB.length&&B.push(e)}function p(e,t,n,o){var a=typeof e;"undefined"!==a&&"boolean"!==a||(e=null);var i=!1;if(null===e)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case k:case _:i=!0}}if(i)return n(o,e,""===t?"."+m(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var l=0;l>>1,o=e[r];if(!(void 0!==o&&0a(l,n))void 0!==s&&0>a(s,l)?(e[r]=s,e[u]=n,r=u):(e[r]=l,e[i]=n,r=i);else{if(!(void 0!==s&&0>a(s,n)))break e;e[r]=s,e[u]=n,r=u}}}return t}return null}function a(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}function i(e){for(var t=r(z);null!==t;){if(null===t.callback)o(z);else{if(!(t.startTime<=e))break;o(z),t.sortIndex=t.expirationTime,n(L,t)}t=r(z)}}function l(e){if(D=!1,i(e),!j)if(null!==r(L))j=!0,c(u);else{var t=r(z);null!==t&&f(l,t.startTime-e)}}function u(e,n){j=!1,D&&(D=!1,d()),F=!0;var a=I;try{for(i(n),A=r(L);null!==A&&(!(A.expirationTime>n)||e&&!p());){var u=A.callback;if(null!==u){A.callback=null,I=A.priorityLevel;var s=u(A.expirationTime<=n);n=t.unstable_now(),"function"==typeof s?A.callback=s:A===r(L)&&o(L),i(n)}else o(L);A=r(L)}if(null!==A)var c=!0;else{var h=r(z);null!==h&&f(l,h.startTime-n),c=!1}return c}finally{A=null,I=a,F=!1}}function s(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var c,f,d,p,h;if("undefined"==typeof window||"function"!=typeof MessageChannel){var m=null,b=null,g=function(){if(null!==m)try{var e=t.unstable_now();m(!0,e),m=null}catch(e){throw setTimeout(g,0),e}},y=Date.now();t.unstable_now=function(){return Date.now()-y},c=function(e){null!==m?setTimeout(c,0,e):(m=e,setTimeout(g,0))},f=function(e,t){b=setTimeout(e,t)},d=function(){clearTimeout(b)},p=function(){return!1},h=t.unstable_forceFrameRate=function(){}}else{var v=window.performance,w=window.Date,E=window.setTimeout,k=window.clearTimeout;if("undefined"!=typeof console){var _=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!=typeof _&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills")}if("object"==typeof v&&"function"==typeof v.now)t.unstable_now=function(){return v.now()};else{var x=w.now();t.unstable_now=function(){return w.now()-x}}var S=!1,T=null,C=-1,N=5,P=0;p=function(){return t.unstable_now()>=P},h=function(){},t.unstable_forceFrameRate=function(e){0>e||125i?(e.sortIndex=p,n(z,e),null===r(L)&&e===r(z)&&(D?d():D=!0,f(l,p-i))):(e.sortIndex=a,n(L,e),j||F||(j=!0,c(u))),e},t.unstable_shouldYield=function(){var e=t.unstable_now();i(e);var n=r(L);return n!==A&&null!==A&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTime-1?t:e}function f(e,t){t=t||{};var n=t.body;if(f.prototype.isPrototypeOf(e)){if(e.bodyUsed)throw new TypeError("Already read");this.url=e.url,this.credentials=e.credentials,t.headers||(this.headers=new o(e.headers)),this.method=e.method,this.mode=e.mode,n||(n=e._bodyInit,e.bodyUsed=!0)}else this.url=e;if(this.credentials=t.credentials||this.credentials||"omit",!t.headers&&this.headers||(this.headers=new o(t.headers)),this.method=c(t.method||this.method||"GET"),this.mode=t.mode||this.mode||null,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&n)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(n)}function d(e){var t=new FormData;return e.trim().split("&").forEach(function(e){if(e){var n=e.split("="),r=n.shift().replace(/\+/g," "),o=n.join("=").replace(/\+/g," ");t.append(decodeURIComponent(r),decodeURIComponent(o))}}),t}function p(e){var t=new o,n=(e.getAllResponseHeaders()||"").trim().split("\n");return n.forEach(function(e){var n=e.trim().split(":"),r=n.shift().trim(),o=n.join(":").trim();t.append(r,o)}),t}function h(e,t){t||(t={}),this.type="default",this.status=t.status,this.ok=this.status>=200&&this.status<300,this.statusText=t.statusText,this.headers=t.headers instanceof o?t.headers:new o(t.headers),this.url=t.url||"",this._initBody(e)}if(!e.fetch){var m={searchParams:"URLSearchParams"in e,iterable:"Symbol"in e&&"iterator"in Symbol,blob:"FileReader"in e&&"Blob"in e&&function(){try{return new Blob,!0}catch(e){return!1}}(),formData:"FormData"in e,arrayBuffer:"ArrayBuffer"in e};o.prototype.append=function(e,r){e=t(e),r=n(r);var o=this.map[e];o||(o=[],this.map[e]=o),o.push(r)},o.prototype.delete=function(e){delete this.map[t(e)]},o.prototype.get=function(e){var n=this.map[t(e)];return n?n[0]:null},o.prototype.getAll=function(e){return this.map[t(e)]||[]},o.prototype.has=function(e){return this.map.hasOwnProperty(t(e))},o.prototype.set=function(e,r){this.map[t(e)]=[n(r)]},o.prototype.forEach=function(e,t){Object.getOwnPropertyNames(this.map).forEach(function(n){this.map[n].forEach(function(r){e.call(t,r,n,this)},this)},this)},o.prototype.keys=function(){var e=[];return this.forEach(function(t,n){e.push(n)}),r(e)},o.prototype.values=function(){var e=[];return this.forEach(function(t){e.push(t)}),r(e)},o.prototype.entries=function(){var e=[];return this.forEach(function(t,n){e.push([n,t])}),r(e)},m.iterable&&(o.prototype[Symbol.iterator]=o.prototype.entries);var b=["DELETE","GET","HEAD","OPTIONS","POST","PUT"];f.prototype.clone=function(){return new f(this)},s.call(f.prototype),s.call(h.prototype),h.prototype.clone=function(){return new h(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new o(this.headers),url:this.url})},h.error=function(){var e=new h(null,{status:0,statusText:""});return e.type="error",e};var g=[301,302,303,307,308];h.redirect=function(e,t){if(g.indexOf(t)===-1)throw new RangeError("Invalid status code");return new h(null,{status:t,headers:{location:e}})},e.Headers=o,e.Request=f,e.Response=h,e.fetch=function(e,t){return new Promise(function(n,r){function o(){return"responseURL"in i?i.responseURL:/^X-Request-URL:/m.test(i.getAllResponseHeaders())?i.getResponseHeader("X-Request-URL"):void 0}var a;a=f.prototype.isPrototypeOf(e)&&!t?e:new f(e,t);var i=new XMLHttpRequest;i.onload=function(){var e={status:i.status,statusText:i.statusText,headers:p(i),url:o()},t="response"in i?i.response:i.responseText;n(new h(t,e))},i.onerror=function(){r(new TypeError("Network request failed"))},i.ontimeout=function(){r(new TypeError("Network request failed")); },i.open(a.method,a.url,!0),"include"===a.credentials&&(i.withCredentials=!0),"responseType"in i&&m.blob&&(i.responseType="blob"),a.headers.forEach(function(e,t){i.setRequestHeader(t,e)}),i.send("undefined"==typeof a._bodyInit?null:a._bodyInit)})},e.fetch.polyfill=!0}}("undefined"!=typeof self?self:this)}]));

השראה בשישי: חוויית משתמש ומפלצות

Share

קצת על המחבר:

Pixel Perfect

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

בלוג זה מובא אליכם מאת:

קורסים לעיצוב UI/UX ועיצוב ובניית אתרים

לא כדאי לפספס

אהבת? יש עוד המוווון למה לצפות…

יש גם תכנים ייחודיים באינסטגרם:

תתחברו אלינו ביוטיוב - ישירות לוריד:

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע