Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Eliminating Noice from your Code

Eliminating Noice from your Code

Radoslav Stankov

November 19, 2019
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title =

    this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
  2. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title =

    this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
  3. #

  4. “In cognitive psychology, cognitive load refers to the used amount

    of working memory resources. ” - WikipediA Cognitive load
  5. “Ego depletion refers to the idea that self- control or

    willpower draws upon a limited pool of mental resources that can be used up.” - WikipediA Ego depletion
  6. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title =

    this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
  7. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title =

    this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
  8. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title =

    this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
 }); 

  9. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title =

    this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
 }); 

  10. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul

    = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  11. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul

    = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  12. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul

    = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  13. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul

    = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  14. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  15. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  16. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
  17. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 var theli = dropa.parent('li')
 theli.animate({'padding-bottom': '20px'});
 }
 });
  18. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 var theli = dropa.parent('li')
 theli.animate({'padding-bottom': '20px'});
 }
 });
  19. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
  20. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length

    > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
  21. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length

    > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
  22. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length

    > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
  23. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length

    > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
  24. “It is better to be a good programmer with great

    habits, than a great programmer.” - Kent Beck
  25. “Social psychologists and police officers tend to agree that if

    a window in a building is broken and is left unrepaired, all the rest of the windows will soon be broken.” - WikipediA Broken windows theory
  26. Code smell is any symptom in the source code of

    a program that possibly indicates a deeper problem. Code smells
  27. Code smells are usually not bugs—they are not technically incorrect

    and don't currently prevent the program from functioning. Instead, they indicate weaknesses in design that may be slowing down development or increasing the risk of bugs or failures in the future. Code smells
  28. Code refactoring is a disciplined technique for restructuring an existing

    body of code, altering its internal structure without changing its external behavior Refactoring
  29. function LoadMoreBaseOnDevice(props) { return ( <> <Device.Mobile> <LoadMoreButton {...props} />

    </Device.Mobile> <Device.TabletOrDesktop> <LoadMoreOnScroll {...props} /> </Device.TabletOrDesktop> </> ); }
  30. function LoadMoreBaseOnDevice(props) { return ( <Device.Mobile> {isMobile => isMobile ?

    ( <LoadMoreButton {...props} /> ) : ( <LoadMoreOnScroll {...props} /> ) } </Device.Mobile> ); }
  31. function LoadMoreBaseOnDevice(props) { const isMobile = useIsMobile(); return isMobile ?

    ( <LoadMoreButton {...props} /> ) : ( <LoadMoreOnScroll {...props} /> ); }
  32. function Component({ array }) { return ( <React.Fragment> {array &&

    array.length > 0 && array.map(item => <Item item={item} />)} </React.Fragment> ); }
  33. function Component({ array }) { return ( <React.Fragment> {array &&

    array.length > 0 && array.map(item => <Item item={item} />)} </React.Fragment> ); }
  34. function Component({ array }) { return ( <React.Fragment> {array &&

    array.map(item => <Item item={item} />)} </React.Fragment> ); }
  35. <ABTest variant="newsletterForm"> {(variant, complete) => { return variant == 'left'

    ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ); }} </ABTest>
  36. <ABTest variant="newsletterForm"> {(variant, complete) => { return variant == 'left'

    ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ); }} </ABTest>
  37. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? (

    viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
  38. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? (

    viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
  39. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? (

    viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
  40. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? (

    <SubscribeForm className={styles.leftForm} onSubscribe={complete} viewer={viewer} /> ) : ( <SubscribeForm className={style.topForm} onSubscribe={complete} viewer={viewer} /> ) } </ABTest>
  41. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? (

    <SubscribeForm className={styles.leftForm} onSubscribe={complete} viewer={viewer} /> ) : ( <SubscribeForm className={style.topForm} onSubscribe={complete} viewer={viewer} /> ) } </ABTest>
  42. <ABTest variant="newsletterForm"> {(variant, complete) => ( <SubscribeForm className={variant === 'left'

    ? styles.leftForm : styles.topForm} onSubscribe={complete} viewer={viewer} /> )} </ABTest>
  43. function Card({ card }) { if (card.type === 'news') {

    return <NewsCard card={card} />; } if (card.type === 'post') { return <PostCard card={card} />; } if (card.type === 'user') { return <UserCard card={card} />; } return <DefaultCard card={card} />; }
  44. const CARDS = { news: NewsCard, post: PostCard, user: UserCard,

    }; function Card({ card }) { const Component = CARDS[card.type] || DefaultCard; return <Component card={card} />; }
  45. function ShareButton({ sharable, medium }) { const icon = medium

    === 'twitter' ? <IconTwitter /> : <IconFacebook />; const onClick = () => { if (medium === 'facebook') { shareOnFacebook(sharable); } else { shareOnTwitter(sharable); } }; return ( <Button icon={medium.icon} title={`Share on ${capitalize(medium)}`} onClick={onClick} /> ); }
  46. function ShareButton({ sharable, medium }) { const icon = medium

    === 'twitter' ? <IconTwitter /> : <IconFacebook />; const onClick = () => { if (medium === 'facebook') { shareOnFacebook(sharable); } else { shareOnTwitter(sharable); } }; return ( <Button icon={medium.icon} title={`Share on ${capitalize(medium)}`} onClick={onClick} /> ); }
  47. const MEDIUMS = { twitter: { icon: <IconTwitter className={styles.twitter} />,

    title: 'Share on Twitter', share: shareOnTwitter, }, facebook: { icon: <IconFacebook className={styles.facebook} />, title: 'Share on Facebook', share: shareOnFacebook, }, }; function ShareButton({ sharable, medium }) { const medium = MEDIUMS[medium]; return ( <Button icon={medium.icon} title={medium.title} onClick={() => medium.share(sharable)} /> ); }
  48. const MEDIUMS = { twitter: { icon: <IconTwitter className={styles.twitter} />,

    title: 'Share on Twitter', share: shareOnTwitter, }, facebook: { icon: <IconFacebook className={styles.facebook} />, title: 'Share on Facebook', share: shareOnFacebook, }, linkedin: { icon: <IconLinkedIn className={styles.linkedIn} />, title: 'Share on LinkedIn', share: shareOnLinkedIn, }, }; function ShareButton({ sharable, medium }) { const medium = MEDIUMS[medium]; return ( <Button icon={medium.icon} title={medium.title} onClick={() => medium.share(sharable)} />
  49. const API_GET = '/api/:source_type/:id'; const API_GET_DETAILS = '/api/:source_type/:id/details'; const API_GET_VERSION

    = '/api/:source_type/:id/on/:year/:date/:month'; const API_GET_SUBTYPE = '/api/:source_type/:id/sub/:subtype/:subtype_id';
  50. const API = 'api'; const SOURCE_ID = '/:id'; const SOURCE_DATE

    = '/:year/:month/:day'; const SUBTYPE = '/:subtype'; const SUBID = '/:subtype_id'; const API_GET = API + SOURCE_TYPE + SOURCE_ID; const API_GET_DETAILS = API + SOURCE_TYPE + SOURCE_ID + '/details'; const API_GET_VERSION = API + SOURCE_TYPE + SOURCE_ID + '/on' + SOURCE_DATE; const API_GET_SUBTYPE = API + SOURCE_TYPE + SOURCE_ID + '/sub' + SUBTYPE + SUBID;
  51. function path(rest = '') { return `${BASE_PATH}${rest}`; } function token(string)

    { return `${SEPARATOR}${string}`; } const SEPARATOR = '/'; const API = 'api'; const SOURCE_TYPE = ':source_type'; const SOURCE_ID = ':id'; const YEAR = ':year'; const MONTH = ':month'; const DAY = ':day'; const SUBTYPE = ':subtype'; const SUBID = ':subtype_id'; const DETAILS = 'details'; const ON = 'on'; const SUB = 'sub'; const BASE_PATH = token(API) + token(SOURCE_TYPE) + token(SOURCE_ID); const DATE_PART = token(YEAR) + token(MONTH) + token(DAY); const SUB_PART = token(SUBTYPE) + token(SUBID); const API_GET = path(); const API_GET_DETAILS = path(token(DETAILS)); const API_GET_VERSION = path(token(ON) + token(DATE_PART)); const API_GET_SUBTYPE = path(token(SUB) + token(SUB_PART));
  52. Don't repeat yourself (DRY) is a principle of software development

    aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy. Don't repeat yourself
  53. The DRY principle is stated as "Every piece of knowledge

    must have a single, unambiguous, authoritative representation within a system" Don't repeat yourself
  54. function Cart() { const [cart, setData] = useState<T>(selectData(DataSource)); const callback

    = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
  55. function Cart() { const [cart, setData] = useState<T>(selectData(DataSource)); const callback

    = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
  56. function Cart() { const [cart, setData] = useState<T>(selectData(DataSource)); const callback

    = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
  57. function Cart() { const cart = useData(getCartData); return ( <aside>

    <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
  58. function useData<T>(selectData: (data: DataSourceClass) => T): T { const [data,

    setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return data; }
  59. ( Duplicated Code ) Long Method * Large Class +

    Long Parameter List , Shotgun Surgery - Feature Envy . Data Clumps / Case Statements 0 Parallel Inheritance Hierarchies 1 Speculative Generality 2 Temporary Field 3 Message Chains 4 Middle Man 5 Alternative Classes with Different Interfaces 6 Refused Bequest 7 Comments 8 Repetitive Boilerplate 9 God object ' : and more ...