Tag: Software Development

  • 6 Crazy Front-End Portfolios You Should Check Out

    6 Crazy Front-End Portfolios You Should Check Out

    Image for post
    Photo by Matthieu Comoy on Unsplash

    One of the toughest websites a web developer can make is a portfolio site showcasing all of the projects, experience, and skills.

    Not that building a portfolio site is programmatically challenging but because it is a place that potential employers will use to evaluate your work.

    Questions like “What projects to show first?” and “Should I add a photo of myself?” are just some of the many questions that come to mind when building a personal portfolio.

    Most web developers have built projects that aren’t unique like movie ratings or a calculator app.

    Therefore, one of the most differentiating factors for you can be building a highly unique portfolio site to showcase all these projects as well as any other past work.

    However, if you are looking to create a new project just for your portfolio, you can check my recent article on some of the most unique APIs.7 Free APIs That Nobody Is Talking AboutCreate unique and interesting apps using these APIsmedium.com

    Below are 6 highly unique portfolio websites you should definitely check out:

    1. Bruno Simon

    Bruno Simon is a creative developer and his portfolio is not a typical website that you’d come to expect.

    This is by far the most unique and interactive portfolio on this list.

    Bruno has created a uniquely immersive site, in which you can navigate using a car.

    The site is incredibly detailed and objects are moveable as well.

    As he states, he has used Three.js for the WebGL rendering.

    In fact, Bruno is on Medium and you can check his descriptive blog on the portfolio site.

    2. Ilya Kulbachny

    Ilya Kulbachnny’s site is one of the cleanest yet unique websites.

    Even though he has primarily used a black and white color scheme, he has worked on making the text large while adding a smooth scroll animation.

    Moreover, you can see that at the top of the page, the text “creative director” is also animated and he has used a personal photo of his as a background.

    Using a personal picture of yourself is important if you want to connect with your audience or you are a freelancer.

    Nonetheless, adding a personal picture won’t hurt and Ilya’s site demonstrates how he has used his personal picture which also has animate on scroll property.

    3. Abhishek Jha

    Abhishek’s portfolio follows the same color palette as the one above but his use of text, as well as the same animation on a scroll, gives it a unique touch.

    Another immediate takeaway is that he has replaced the default scrollbar with his own and also the cursor icon changes when you scroll over images.

    By placing the same text with different styles below one another and making the image overlap these texts is an interesting approach that, when used correctly, can be used to lay emphasis on particular texts.

    Not many people know but you can actually customize the scrollbar directly from your CSS file.

    /* width */
    ::-webkit-scrollbar {
    width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
    background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
    background: #000;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    background: #355;
    }

    You can find more on this here.

    4. Robby Leonardi

    Much like Bruno Simon’s portfolio, this is also an interactive game. However, Bruno’s site included 3D graphics and a car to navigate, while this is a 2D game.

    Robby’s portfolio reminded me of the beloved Mario game.

    Robby Leonardi also has a portfolio site for illustrations and the same graphic and theme have made their way to it as well.

    He has done an outstanding job in making these sites and it’s rather out-of-box thinking.

    The background of his illustration portfolio as well as all the images used blend in perfectly, as well as showcases his finest works at the same time.

    5. Jacek Jeznach

    Another outstanding portfolio you should check out is by Jacek Jeznach.

    By using a very TikTok-like color palette and simple animations, he put together an enthralling website.

    The theme even extends to the map on the contacts page.

    He has even added background sound that you can easily toggle on and off.

    If you look closely you can even see that key HTML tags are present at the start and end of the webpage which is a neat addition to this site.

    This website is a great example of combining vibrant colors with a dark background and how to bring about an aspect of uniformity.

    6. Damian Watracz

    Damian’s site is a great example that giving attention to detail can drastically transform the site.

    This website utilizes a simple black and white color palette primarily.

    By combining simple animations, custom loading circles as well as the apt personal photo, Damian has managed to put together a very polished and professional website.

    One of the things I really liked about his site is that when you hover over the items in the menu, the background changes to reflect the link address page which is a thoughtful addition.

    Moreover, the pagination on this page is not common and really blends with the website.

    Another useful takeaway from this site is that the small yet notable contact button on the bottom left side of the page. It is a helpful shortcut that does not get in the way.

    Final thoughts

    Building a personal portfolio can be quite challenging.

    The main reason I have put together this list is to show that each portfolio site is unique and great in its own manner.

    There is no definite way you can go about while building sites like these.

    The only thing to keep in mind is to give your best and add your own personal touch to the site.

    If you enjoyed or felt inspired after reading this article, do check out my article on design inspirations.

  • 8 VSCode Extensions Every Developer Must Have

    Vedant Bhushan7 days ago

    These are awesome extensions! Maybe you could add tabnine as well.

    2

    2 replies

    Reply

    Jacob Bankston

    Jacob Bankston3 days ago

    Definitely picked up Turbo Console Log, and had a few of the others already! Great list overall.I would recommend adding indent-rainbow, it colorizes the indentations of lines to make your code more readable.

    1

    1 reply

    Reply

    Sylvain Pont

    Sylvain Pont7 days ago (edited)

    TCL is Amazing, thank you for that.Some remarks:Project manager seems to be a LOT more used than Projects. Whould you explain why you chose the later?VSCode now ships with Sync Settings. I used to use Settings sync extension but the VSCode one is…...

    Read More1 reply

    5 min read

    VS Code is one of the most popular and widely used code editor. It comes packed with lots of features that are free in comparison to other editors. You can download extensions on VS code, which add another dimension of incredible features.

    I have listed some of my favorite VS code extensions, without which I cannot live.

    Please note that there is no ranking involved. Each extension is impressive in itself. The last one and the first are equal.

    I am sure you will leave with a new extension that will make your work easier.

    1. Turbo Console Log

    Turbo console log is a killer extension when coming to the debugging part. This extension makes debugging easier by automating the process of writing meaningful log messages.

    You insert meaningful log message automatically with two steps:

    • Selecting the variable which is the subject of the debugging
    • Pressing ctrl + alt + L

    2. Import cost

    Speed is essential for your website. If your page or app can’t load quickly, it is the same as no page.

    This extension displays your import’s size. This way, you get to know how much you will be downloading and figure out why your application is sluggish.

    With this extension, you can decide if you should write a function or import the whole bundle.

    3. Prettier

    This extension is for everyone, be it If you code in python, JavaScript, or any other language.

    It makes your code, as the name suggests, prettier.

    I am terrible at giving equal lines and spacing and tab. As a result, my code looks just like some noodle pasta.

    With prettier, as soon as you press command+S, you will experience the magic. All your code will get correctly and equally spaced, and proper line spaces. Your code will look beautiful.

    No-One will ever identify how messy you are 😐.

    4. Bracket pair colorizer

    How many times it happens that when editing JavaScript code, you have trouble finding the closing brackets. It is painful to use the finger to trace the opening and closing brackets. Stop wasting your time and use this extension.

    Your opening and closing brackets are colored the same; it is easier this way.

    This extension is a must-have for those who have spent time with python because python doesn’t require brackets; this will help the transition.

    Image for post

    5. Live share

    Live share is a fantastic extension. With it, I can code with my friends, colleagues.

    Whenever I am stuck with a problem, I can pull over my friend to help me.

    What this extension does is that it gives remote control of your VS code editor, the opened files. With that, another person can change my code and save it—no need to struggle over the phone anymore or wait to meet your friend to get help.

    One of the features you get with this is that — You get to code in real-time. You get to know who is typing and what it is that they are entering. It makes coding just like messaging, which we all love. Thanks to VS code and live share. Besides, it also gives access to localhost, your terminal.

    Live share is one of the best features of VS code, in my opinion, and the reason I recommend it to everyone. I haven’t seen anything as good as it and free to use. Mind-blowing!

    Bonus: You can download the live share audio extension, which adds audio calling capabilities to Live Share. I love this and especially in the pandemic when everything has gone remote.

    6. Projects

    If you are working on several projects at a time, then switching between folders is hard. You have to navigate to the required folder. And if you switch between quite often, then it is hell.

    One use I find with this extension is that it can work as your favorite tab. E.g. Someone may store custom CSS and bootstrap in a folder and use this extension to navigate in between quickly.

    Image for post

    7. Settings Sync

    As the name suggests, setting sync extension stores all your setting backup in GitHub. This way, you can have the same settings for your multiple devices or new devices. Any changes made can be seamlessly synchronized.

    It allows you to sync pretty much everything you customize on VS Code to Github, from settings to keyboard shortcuts to other VS Code extensions.

    8. JavaScript (ES6) Code Snippets

    VS Code comes with built-in JS IntelliSense, but JS Code Snippetsenhances that experience further by adding premade JavaScript snippets, which contain the most commonly used snippets. No more repeating of code endlessly.

    The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue.

    Image for post

    I hope you enjoyed reading and I provided value to you. If you find extensions that I have missed and you find it amazing, mention it in response.

    Thank You 🙌

    Ali Haider

    Over 5 years of obsession with technology || Writer and developer. I love making new friends, why don’t we be friends?

  • Laravel: Adding those missing helpers you always wanted

    One of the things I like from any PHP project is having global helpers. You know, those functions you can call anywhere and remove or save you many lines or verbosity into one, maybe two, while allocating in one place any logic.

    $expected = from($this)->do('foo');

    The problem with Laravel itself is that sometimes is not enough with the helpers it includes. The ones included are mostly quick access to Services (like cache()) or Factories (like response()), and some that help you having an expected result (like data_get).

    For example, let’s say we want a function be called multiple times but sleep between executions, like we would need to avoid rate limiting for an external API. Without a helper, we will have to resort to create a Class and put the logic inside a public static method, and hopefully remember where it is located.

    class Logics
    {
    public static function logic_sleep($times, $sleep, $callback)
    {
    // Run and sleep between calls.
    }
    }Logics::sleep(4, 10, function() {
    // ...
    });

    Using this technique makes your global not so globally. Since this is one of many thing I need in my projects, I decided to create a package with more global helpers:

    Larahelp

    Those helpers you always wanted

    The main idea of a global helper, at least to me, is to have a piece of code that offers simplicityreadability and flexibility. Think about them as small swiss knives that you may put in your pocket.

    For example, the above can become its own global function, and we can call it literally anywhere.

    public function handle()
    {
    logic_sleep(10, 5, function () {
    $this->uploadRecords();
    });
    }

    The helper is very simple to operate, but we won’t know what the hell it does behind the scenes unless we dig into the source code, which is fair. In any case, having a global function of one or two words makes the whole code more readable. And since it’s our own helper, we can call it anything we want.

    How to add your own helpers

    But that’s is only one of the many helpers I decided to create for things I use a lot.

    To add global helpers to your project, you can simply add a PHP file with the global functions you want anywhere in your project (preferably inside your PSR-4 root folder) and tell Composer to load it.

    You are free to add how many files you want. I decided to separate them into categories like I did for my package to avoid having a wall of text full of functions.

    "autoload": {
    "psr-4": {
    "App\\": "app"
    },
    "files": [
    "app/Helpers/datetime.php",
    "app/Helpers/filesystem.php",
    "app/Helpers/http.php",
    "app/Helpers/objects.php",
    "app/Helpers/services.php"
    ]
    },

    I’m opened to suggestions too, so give it a go if you think it may be useful for you:

    DarkGhostHunter/Larahelp

    Supercharge your Laravel projects with more than 35 useful global helpers.

    github.com