Developer

Tricks

Introduction
  • I want to say a welcome:
  • var helloWorld = "Hello, World!";
    console.log(helloWorld.concat(" ", "Welcome to Developer Tricks!"));

    My name is Matt, and I created Developer Tricks to store and display all the bits about web development that I find useful. This information is pulled from resources like Stack Overflow, CSS Tricks, YouTube, Medium, etc. and I wanted a solution to store all of the information that I find into one central location. Here it is! Everything I find useful in Web Development (for now). Each and every entry is tested and used by me, and helped me solve some kind of problem. These can be simple, complex or hacky solutions, as long as they work how I want them to! I will continue to add to this list as I come across new tricks in my future projects. Clearly, this is not an exhaustive list. Feel free to contact me on Twitter with any suggestions or additions that you can think of!

    HTML Tricks

  • I want to add a custom favicon for my website:
  • <link rel="icon" type="image/png" href="img/myImage.png"/>
  • I want to use jQuery in my website:
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    CSS Tricks

  • I want to style the scrollbar:
  • /* Width */
    ::-webkit-scrollbar {
    width: 1em;
    background: black;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #eee;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
    transition: background 3s ease-in-out;
    }

    /* Handle on Hover */
    ::-webkit-scrollbar-thumb:hover {
    background: red;
    }
  • I want to add a stroke (outline) to text:
  • text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  • I want to make a media query to ensure website responsiveness:
  • @media (max-width: 600px) {
    .class {
    ...
    }
    }
  • I want to make a backround have two colors in order to make an overlapping effect:
  • background: repeating-linear-gradient(#fff, #fff 49.99999%, #e41c38 50.00001%, #e41c38 100%);
    JavaScript Tricks

  • I want to use regular expressions to confirm how a string ends:
  • function confirmEnding(str, target) {
    // Uses template strings to insert the target variable
    let regex = new RegExp(`${target}$`);
    return regex.test(str);
    }
    jQuery:
  • I want to implement cross-browser compatible smooth scrolling:
  • $(document).ready(function() {
    $("#id").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
    scrollTop: $(section).offset().top
    });
    });
    });
    Git Tricks

  • I made a typo or forgot to include some important information in my commit message:
  • $ git commit --amend -m "New and correct message"
  • I want to make additional changes to the commit itself:
  • $ git add another/changed/file.txt
    $ git commit --amend -m "message"
  • I want a Markdown Cheatsheet to help me write better README.md files.
  • I created my frontend using create-react-app and am having trouble deploying to Heroku due to a "cannot find file" error:
  • $ git rm -f --cached client && git add . && git commit -m 'Add client folder back to git repo' && git push heroku master
    Terminal Tricks
  • I want to free up a port after getting an "address already in use" error:
  • $ lsof -i :5000
    $ kill -15 <PID>
    Check Out My Other Projects!

    I am currently interested in web design and development, and lots of new content is on the way! Below you will find some of my other projects. Follow me on Twitter and let me know what you think!

  • SICHO Freelance - A "product page" site used to promote SICHO Web Freelance, which is currently not being used commercially.