עיצוב UI/UX

מפוטושופ וסקץ' לאתר בנוי: RapidUI הופכת את העיצוב הסטטי שלך לאתר חי ונושם

שגיא שרייבר
| 16/05/2017

חברים, הכירו את הפלטפורמה שהופכת את ה-PSD's וה-Sketchים שלכם לאתרים חיים ורספונסיביים, ללא צורך בכתיבת קוד. סטרטאפ כחול לבן.

מכירים את התהליך הבלתי נגמר לאחר שסיימתם לעצב אתר ועד הרגע שהוא עולה לאוויר? אם אתם משתמשי פוטושופ וסקץ', חכו לראות את הסרטון הבא…

מעיצוב לקוד, הדבר האמיתי!

איך זה עובד?

גררו את קובץ ה-PSD או ה-Sketch שלכם לתוך המערכת וצפו בו הופך לHTML ו-CSS תוך דקות ספורות.

בשלב הבא נותנים חיים לעיצוב – הפלטפורמה מאפשרת להפוך את העיצוב המקורי לאינטראקטיבי: טפסים, סליידרים, תפריטים, וידאו, מפות, פופאפים ועוד ועוד. בנוסף, ניתן להוסיף אנימציות ואפקטים מתקדמים, והכל על-ידי כמה קליקים בממשק.

עם הכלי הזה תוכלו להמשיך לעצב בעזרת הכלים שאתם מכירים, ובאמצעות טכנולוגיה מתקדמת האתר כבר כמעט ונבנה מעצמו.

ומה בנוגע לרספונסיביות?

הכל בפנים!

ישנם כלים לשליטה מלאה על האתר בכל הרזולוציות, וכלים לניהול ה-breakpoints (נקודות שבירה פר רזולוציה).

חוץ מזה, אפשר גם להכין עיצוב נפרד למובייל ולדסקטופ אם תרצו.

מה עוד?

בנוסף לכל הדבר הזה, הקוד נגיש לחלוטין ומסונכרן עם העיצוב – מה שמאפשר שיתוף פעולה מלא עם מתכנתים במידת הצורך.

תוכלו להוסיף ולשנות html, css & javascript events בחופשיות, וכמובן מנגד, כל שינוי ויזואלי מעדכן את הקוד בלייב.

למעשה, אין שום מגבלה למה שאפשר לבנות בפלטפורמה הזו.

יתרון נוסף של הקוד הנגיש הוא היכולת לנהל פעילות SEO בצורה המקצועית ביותר ולדאוג שהאתר יקודם בצורה אידיאלית בגוגל.

קייס סטאדי ומדריך מאת מעצבת ישראלית (סופר מוכשרת) שבנתה אתר עם Rapid UI

שיר זלצברג בנתה פורטפוליו מדהים ללא שורת קוד אחת. האתר שלה גם יצא מהמם אז בכלל כיף לקרוא את המדריך הזה וללמוד ממנו.

אז למה אתם מחכים?

מוזמנים להתנסות ב-Rapid UI ולהינות :)

קצת על המחבר:

שגיא שרייבר

שגיא שרייבר מעצב UI & UX, מייסד של פיקסל פרפקט מגזין, וקו-מייסד של הסטרטאפ Tapdog למעקב אחר אתרים ותחרות ברשת. בוגר שנקר במגמה לעיצוב מדיה אינטראקטיבית. מתמחה בעיצוב אתרים מונחי conversion (המרה) וחווית משתמש, ובעל ידע נרחב ב-html, css ו- wordpress. ניתן למצוא את שגיא בפורטפוליו שלו, בטוויטר, בלינקד אין או מכדרר בדריבל.

תמצאו את שגיא שרייבר ב:

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

המדריך ל- 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)}]));

מפוטושופ וסקץ' לאתר בנוי: RapidUI הופכת את העיצוב הסטטי שלך לאתר חי ונושם

איך זה עובד?

ומה בנוגע לרספונסיביות?

מה עוד?

קייס סטאדי ומדריך מאת מעצבת ישראלית (סופר מוכשרת) שבנתה אתר עם Rapid UI

Share

קצת על המחבר:

שגיא שרייבר

תמצאו את שגיא שרייבר ב:

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

המדריך ל- UI HACKING

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

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

המדריך ל- UI HACKING

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

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

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

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

לא כדאי לפספס

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

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

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

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