DEV Community: Kanisk

18 Tips to make websites look better

Kanisk — Tue, 02 Feb 2021 15:30:04 +0000

For my own reference, but useful general tips nonetheless!
Cover credit: AnalyticsIndiaMag

Typography Tips

Use no more than 2-3 typefaces in a page as additional typefaces increases cognitive load.
Use 125%-150% line height for paragraph text to make your webpage feel more spacious!
Keeping lines of text under 100 characters chunks text and makes it more readable.
Use typefaces that look noticeably different for header and paragraph text. Some pairings I really like are: Libre Baskerville & Source Sans Pro, Domine & Roboto, and DM Serif Display and Proxima Nova.
When creating text hierarchy try to use no more than two mechanisms to differentiate text: (1) font weight, (2) font size, (3) alignment/indentation, and (4) color.
Skip weights and double point sizes between different text elements used. For example, if your header text is 32px bold, then make the paragraph text 16px regular — rather than something like 24px semibold for the header text.

Great type resources: Google Fonts, Font Pairings

Alignment/Spacing Tips

Avoid centering text unless it's a small chunk.
Align left to right if targeting english-speaking folks as people read left to right.
Aligning things to each other can make design look clean and consistent! Using a 12 column grid can be a helpful place to start!
Use negative space to help differentiate elements from each other.
A general rule of thumb: in most cases, you'll want at least 12-16px of padding between different elements or from the edge/corners of the page.

Great alignment/spacing resources: CSS Grid Generator

Color

Use neutral tones to allow your primary colors to shine. Neutral tones (whites, greys, and blacks) can balance out bright colors and give them emphasis.
Use tints and shades to add dynamism to your project. Have a hover state or pressed state? Use tints and shade to indicate these changes.

Great color resources: Coolors Color Palette Generator, Contrast Checker for Accessibility, Grabient (Gradient Tool)

Miscellaneous

Avoid harsh drop shadows! A good example of not too harsh drop shadows is Stripe.com.
A great resource for royalty free images: Unsplash.com

#AskDevTo: What are you learning in 2021?

Kanisk — Tue, 12 Jan 2021 17:04:59 +0000

So, it's been a few days into the New Year, and by now, I think we all have a rough idea of what technologies we will be working on for the first quarter, and what technologies we want to pick-up over the year as well.

As such, I wanted to create and share a laundry list of things that I can add/remove from over the year - but keep it public to hold myself accountable and keep track of my progress.

Feel free to copy this template and create your own list of tech that's on your radar, and reply with a link to it so I can check it out as well :)

Here's what I have on my mind for now... (Last updated 12/01/2021)

Currently Focusing On:

Becoming well versed with the online/web ecosystem and frameworks, specifically React, Redux Saga etc. for client-side, and NestJS/Serverless for backend
Brushing up on some Java/C# back-end updates (Spring 5, .NET core 5)
Getting familiar with the AWS platform for cloud system design and architecture
Job-searching (for a full stack role, feel free to reach out if you have an opportunity in mind)

For later down the road:

Switch over completely to using Go-Lang for back-end development PLUS check out the gRPC ecosystem in languages I know
Get really good (specialize) with AWS (Certified Solutions Architect/Developer)
Continue to get better with JS frameworks + design (CSS/SCSS) thinking of picking up Vue, and Svelte - most likely, in that order
Dabble into Elixir + Phoenix
Write some Nim/Rust code (and finalize which one I want to pick up as a hobby-coder)

17 No code tools for different stages of application development

Kanisk — Thu, 10 Dec 2020 15:34:59 +0000

This list is just for personal reference. Original Source

No-code web & mobile application development tools

Bubble: A visual programming language that helps anyone build a web application without coding knowledge.
Glide: A free no-code tool that allows users to build a mobile application in five minutes from Google Sheets.
Voiceflow: A codeless way to develop voice apps for Amazon Alexa and Google Assistant.
Webflow: An online visual editor platform that allows users to design, build, and launch responsive websites.
Carrd: A free platform for building simple, fully responsive one-page web sites without code.

Codeless testing tools

TestCraft: A codeless Selenium test automation platform for continuous and regression testing of web applications.
AccelQ API: A no-code API test automation tool that allows companies to test REST APIs.
pCloudy: A mobile test automation platform that helps users build and execute mobile tests without code.

No-code content and data management tools

Airtable: A spreadsheet-database hybrid that helps teams manage content, projects, and other initiatives.
Notion: A no-code tool for managing documents, notes, tasks, spreadsheets, and databases.

Visual task automation tools

Zapier: A codeless tool for connecting your applications and automating your workflows.
Retool: A platform for building internal tools without code.
ActionDesk: A spreadsheet software that lets you import data from SQL, Stripe, Salesforce, HubSpot, and others to automate a variety of tasks.
Standard Library: A no-code library that helps users build automated workflows and APIs.

Codeless communication tools

Typeform: A tool for designing surveys and other responsive forms without code.
Mailchimp: A no-code email marketing service that gives users the ability to create professional, designed emails visually.
Anchor: A codeless platform for creating, hosting, and distributing podcast episodes.

Installing and configuring ElasticSearch on a VM

Kanisk — Mon, 16 Nov 2020 12:49:51 +0000

For this guide, we will setup a virtual Ubuntu Server environment in order to best simulate the conditions of working with ElasticSearch in the real world, which would be primarily a cloud or containerized environment.

We will utilize the terminal and I'll walk you through the steps and clarify as we go along!

Things you will need:

a virtualization enabled local system
the Ubuntu Server .iso
VirtualBox

Setting up the VM

This part is fairly straightforward and visual in nature, and if not, there are plenty of Youtube videos and guides on how to create and setup your own VirtualBox VM. Regardless, I'll try to give you the core steps here so you don't have to navigate elsewhere as you follow through!

First, make sure you've downloaded all the above components, and installed VirtualBox. I'll be doing this on a Mac system, but the process should be fairly similar on any other OS.

Once that is done, create a new VM:

Click on New and follow the instructions within the prompts, and feel free to customize the name and installation directory as necessary
From the drop-down, make sure to select Ubuntu (64 bit)
Allocate memory size close to half of your total current system
Create a virtual hard disk (VDI) and configure at least 20 GB of space

Once that's done, you will see the VM show up in the main screen, and you can simply select the VM, and click the green Start button to kick things off.

Immediately after, you will be asked to Select a start-up disk. This is where you want to click the folder icon and navigate to where your Ubuntu Server .iso file is and confirm the prompt.

Instaling Ubuntu Server

This process is akin to sticking an installation disk/bootable USB to install any OS, so you'll have a nice guided prompt which will look something like this:

I won't cover this in depth since this is also fairly straightforward, but will highlight specific things you will/won't need:

you won't need a proxy config (unless you're on your work machine which is behind a proxy)
Use the default mirror for ubuntu
Use the entire disk for the Filesystem setup and confirm the "destructive action" prompt (it's a VM so we're at no risk of messing up any of our local data)
Setup your profile with your name, server name etc.
When the prompt asks for SSH setup, make sure to check [x] Install Open SSH server
You won't need any featured server snaps since we're installing stuff manually

And that should be all for this step. Once the process is complete it'll ask for a reboot which will then bring you to your VM with Ubuntu Server starting up.

Installing ElasticSearch

First, we import the ElasticSearch GPG key since they sign all their packages with the following signing key (PGP key D88E42B4, available from https://pgp.mit.edu).

To do so, use

wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add -

Next, we need to run

sudo apt-get install apt-transport-https

in order to grab the apt-transport-https package for downloading content via the HTTP Secure protocol (HTTPS).

We then echo the repository definition which is piped and saved to /etc/apt/sources.list.d/elastic-7.x.list using a tee command:

echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" | sudo tee /etc/apt/sources.list.d/elastic-7.x.list

And finally, we update and grab the elasticsearch package

sudo apt-get update && sudo apt-get install elasticsearch

Configuring our new Elastic installation

Once the installation is complete, we can quickly configure it by using vi

sudo vi /etc/elasticsearch/elasticsearch.yml

This will open up the config file where we will change/uncomment the following params (make sure you're in insert mode in vi):

uncomment node.name and optionally edit the name
uncomment network.host and edit it to point to 0.0.0.0
uncomment discovery.seed_hosts and edit it to ["127.0.0.1"]
uncomment cluster.initial_master_nodes and edit it to match the same name as your node.name, e.g. if my node.name was the default node-1, then this field should have value ["node-1"]

Hit Esc to get out of insert mode and type :wq to save our changes and exit vi.

Optionally (auto-run on system start)

We can set up a worker daemon to start up elasticsearch when our VM starts up using:

sudo /bin/systemctl daemon-reload
sudo /bin/systemctl enable elasticsearch.service

and finally starting the process using:

sudo /bin/systemctl start elasticsearch.service

Give it a minute or so to start up, and then we can send in the following cURL request to verify and see if our elasticsearch instance is up and running:

curl -XGET 127.0.0.1:9200

If all went well, you should see the following response with the default tagline "You Know, for Search".

Now you have a proper working installation of Elasticsearch 7 configured on a VM!

In order to interface with the instance outside of the VM, we need to setup port-forwarding, which we can do by going into our VMs Settings>Networking>Advanced>Port Forwarding

then add new rules where you configure the host and guest ports as follows

Now, as long as your VM is running, you can SSH into it from your host machine using PuTTY (if you're on Windows) or ssh your_vm_username@127.0.0.1 -p 2222 like below

and then enter your password to login, and continue interfacing with your Elastic cluster from your host machine!

Setting up your Github Profile as your portfolio

Kanisk — Sat, 14 Nov 2020 10:08:41 +0000

The job market in its current state is highly saturated, competitive, and becomes a numbers game, especially for entry level/new-grad positions. While this is mostly the case all year round, it is further amplified for now due to the pandemic.

There are clearly a lot of variables at play here, and well... time is of the essence!

As developers, we try to optimize things for efficiency/time/space. Similarly, the job-search process becomes increasingly difficult where you need to manage your time accordingly on the things you want to focus on for your betterment, while maximizing your chances of landing a new role.

I remember when I was applying for my first job in the field, I spent so much time and emphasis into creating an online portfolio website in order to highlight my skills and projects; to have my own "corner" in the interwebs dedicated to myself.

However, in hindsight, I probably would not have spent as much time on it, instead focusing on optimizing my resume, or picking up other technical/marketable skills.

Here's a bit from The Coding Career Handbook, by swyx (which I highly recommend, btw) that puts it perfectly:

You don’t need an all singing, all dancing portfolio page. You don’t need a verdant green commit history. People barely look at that. They don’t have time. You just have to demonstrate that you’ve Done Cool Shit and, optionally, Covered Your Bases. It’s more about instantly verifiable Proof of Work.

NOTE: the exception here is if your work is visual in nature such as UI/UX, front-end etc. You should definitely have an online portfolio if that's the case. If not a custom one, then at the very least, put some work up on sites like Dribbble, Behance etc.

Now, with the "proof of work" concept, what I do know is that most developers SHOULD have a Github/Gitlab/Bitbucket etc. account where some of their code/work is posted publicly for potential recruiters and employers to see.

I know some employers might skip looking at that as well, but I find that to be a perfectly reasonable tradeoff given most us should already be using some sort of version control by default.

There's 0 additional cost - in terms of your time and resources spent to set things up, as opposed to having a full-blown website in a fancy framework documenting your accomplishments.

Enter: Github's Special README.md

Github launched a new feature not too long ago involving special repositories, where the README.md will not just show up in the repository itself, but also on top as part of your main profile!

We've had ample time to discover what could be done with such a feature, and, needless to say, there are numerous integrations thus far with varying range of customizability available at our disposal.

Check out these resources to set up something cool for yourself:

example integrations found in awesome-github-profile-readme's repository hosted by abhisheknaiidu,
ready-to-go templates for your profile at Awesome-Profile-README-templates hosted by kautukkundan,
and some of the underlying tools that were used to create them, from the Awesome-Readme hosted by matiassingers.

With the above in mind, I wanted to share my own take on having such a Github profile, which is set-up as my de-facto portfolio page which you can visit at github.com/chakrakan to see for yourself!

NOTE: I use a plug-in for Chrome called Dark Reader which pretty much simulates dark-mode for every website out there

I accomplished this by leveraging Octokit to communicate with the Github APIs and updating content like gists, in combination with using CircleCI to set up cron jobs that will constantly update content with new data. This is put together with the public profile README.md to create a profile page which contains:

relevant links and descriptions about myself,
dynamically updating info about my physical activity from Strava - repo,
dynamically updating info about my recent listening trends from Spotify - repo,
dynamically updating info about what languages I've been working with in the last few days - repo.

These repos are my fine-tuned/modified forks of the originals which have updated settings that just work out of the box vs the initial tampering I had to do with some of them to get them working.

They contain explanations to get you setup with your own versions, but feel free to look through the code, provide feedback/suggestions, and fork them further and customize as per your needs!

You can also reach out to me if you need help setting them up for your own profile. I'm active on discord where you can find me as kan#0979.

Lastly, I'd love to know your opinions/stories/outcomes of having a personal portfolio and how much importance you personally give to that aspect of the job-application process. What helped you most in landing a job? Also, feel free to share your own Github Profile if you have one, so I can check them out and feel inspired further!

Thanks for reading!