DEV Community: SrijanSriv

A Peek Into WebD

SrijanSriv — Thu, 12 May 2022 13:43:00 +0000

The fact that you're reading this blog right now is sufficient to support the fact that Web and it's Development has flooded the coding community. We can't imagine learning and sharing without our webpages.
Naturally, learning how to create such webpages in the early phase of coding is a bonus. Fortunately, there are various sources and explanations of how to begin with this idea, using a certain language called HTML. To make these pages presentable we use another handy tool; CSS.

This blog will caress over the approach that I believe is certainly satisfactory to help you understand HTML and CSS.

A Handy Setup

Since the output of whatever code you write would be in a webpage, it feels handy to be able to launch the page quickly and see the changes made live.
Fortunately, if you're using VSCode Editor(and I have no idea why you're not) it has such extensions that, although mentioned in every good tutorial, is still worth adding in this blog. It's a basic Live Server launcher; this is the one that I use and is probably the most popular.

This provides a simple "Go Live" button in the bottom right corner to, well, go live!

Again, a minute detail but a life saver.

HTML

Web browsers, be it Chrome or Firefox, have to agree upon a certain document type that they can show, making it universal. This happens to be a certain HyperText Markup Language or HTML for short, that is basically a method of creating elements and objects in a certain way that browsers can understand. These are basically some <> and </> tags that can be very powerful depending on what the tag does.

Every file that has some html code(so like index.html file) will begin with a <!DOCTYPE html> tag. Following is an example.

With the preview at the webpage being.

Sources to learn HTML

The Documentation for HTML is extensive.

W3Schools is without a doubt the most perfect place to understand and refer to for HTML, among several other things.
Mozilla has some handy guides under MDN that you can always use to freshen up your knowledge.

Some video tutorials might include the following; I would also try to link some here.

Traversy Media has a nice video in English that's basically a walkthrough.
CodeWithHarry has both single and playlist wise videos in Hindi with depth-to-time tradeoff. Quite frankly, I think his playlist is more than enough to learn and create some projects.

CSS

Of course our next priority would be to make this page presentable by styling the various elements present. This is where Cascade Sheet Styling or CSS comes in.

There are certain things that you would already expect CSS to perform, such as changing font or its color; resizing images and so on. But a tricky part of CSS for beginners is to grasp how to position the elements on the page the way you want, and also how to make the site "Responsive" i.e. the idea that our webpage should look presentable on screens of all sizes, be it a desktop or a phone.
A recommended way to tackle this problem is to plan early with position methods such as "float" and "grid". These are vastly discussed in CSS-Tricks and the usual youtube platforms. Not detailing everyone of these, I would list the places that you may go through:

W3Schools is always the place to go when you want to check any query that pops into your mind. Just don't get carried away with the tons of ideas and definitions that it has to offer.
CwH is still really popular in this field.
Traversey has some quick to learn tricks that you can remember.
Thapa Technical also comes to mind.

These may look overwhelming at first, but the main idea is to understand how you learn-as-you-create. One can not expect to remember everything at the end of a course, but such a workflow is appreciated in the long run.

Platforms

There are certain sites that let you showcase your website on the go, together with the code present. These are really handy if you quickly want to share your code and/or the expected UI, so usually what we call the "Front-End". Some of the popular ones are:

CodeSandbox.io is perfect for sharing relatively small projects quickly.
CodePen.io will do just fine.

Closing Thoughts

The above mentioned flow should be enough to get one started in the WebD field. We have, of course, not discussed about the ocean of development supported by JavaScript and the modules created for it. This is so as to prevent overwhelming of a developer. Still, interested devs can be channeled towards this blog that I actually started my whole journey of WebD from. It includes clever framework that are based on JavaScript, right after a basic intro of JS itself.

👋

Git Good

SrijanSriv — Mon, 04 Oct 2021 13:17:04 +0000

A fundamental aspect of any code-base is collaboration. Developers from various backgrounds can integrate their knowledge in creating the perfect product required.

Besides, documentation of self progress is also something useful as it portrays one's journey.

Luckily, there are complete systems and databases that take care of such progress. Following is an idea about this, namely Git and GitHub.

Getting Git

Git is essentially a "version control system", which simply means that it tracks various updates and amends in a code-base by maintaining a certain flow of the code through various branches and forks. These are essentially kind of a copy of the actual code that we can work on while preserving the original code.
This is essential, because we don't want the actual code to be useless until we finish our job. We want to fix or upgrade it separately and then merge the changes back to the original.
Following is a common visualization.

Git installation is pretty straightforward; just head on to the site and install it according to your OS. It has no prerequisites. Make sure that you also have your Git Bash with the bundle.
Git Bash is basically a terminal that is a bit personalized for Git. Windows users are recommended to use it over your cmd/powershell. Although the VSCode terminal is also very supportive.

GitHub

GitHub is essentially a site that manages code-bases. There are other websites as well, like GitLab and BitBucket. But GitHub is far too popular.
You can simply create an account on it which is completely free up until certain restrictions.
These however can be bypassed if you're a college student by getting a pro. This explains how they can get a pro account for free.

The Basics

Git has certain common commands. Usually, we want to do one of these things with version control:

Create A Repository that has some code that we created.
Contribute To A Repository that exists already, possibly on some other user's account.

These might get confusing if not payed attention to, since once we go into larger code-bases, version control might not be our primary focus. Hence, it is recommended that we learn this early on and have it in practice.

Sources

FreeCodeCamp has an amazing video that explains not only the basics but a bit more about SSH and the lot.
For Hindi speakers, CodeWithHarry is always a treasure trove.

Other than that, you could always check out here for any related hacks that I find interesting.

👋

Towards C and C++

SrijanSriv — Thu, 22 Jul 2021 06:02:52 +0000

Hi 👋

This blog is a guide to those who want to jump into the coding world. Of course, C and C++ are not necessarily the starting point if you want to understand the world of coding. However, this journey is oriented according to what I wish I knew when I became an Undergrad in India.

A Guide to the Guide

This blog will begin with how to understand and efficiently write better code, and has two paths for it. The C Language is more "Variable" Oriented, while C++ is Object Oriented. The Languages are closely linked though, and a newbie will face no problem in transitioning between the two, provided their projects are of a newbie level.

It will then move towards the aspect of Competitive Programming, since it is similar to what a typical Undergrad syllabus holds. Data Structures and Algorithms are really handy to understand the languages, and can lead towards other options. Again, not a necessity but a popular choice.

Learning C and C++

Books would generally be considered a good source to not only learn but as a documentation of ideas and questions also. I would recommend these books by Deitel Publications, as they are really easy to understand and reader friendly, although a bit long winded at occasions.

C How To Program has really great back exercises. I would recommend to try to reach the 7th Chapter which is about Pointers, a really important part of C. It also has strings and DSA as further discussions.
C++ How To Program has a really comprehensive idea about classes and OOPS. Nothing is really skippable in this book to get really good in C++, but Chapter 22 should be the end point for a passionate programmer. The exercises might not be too big of a deal though.

Still other book recommendations can be found here. These are a basis of changing perspective, and have more or less the same knowledge to grant (maybe quicker but not as solid, the tradeoff depends on the reader).

Videos would also be considered a great source of knowledge. Here are some.

CodeWithHarry would probably be the most recommended YouTube channel ever. It has a bunch of videos, from hour long crash courses to playlists full of deep knowledge. You can choose based on your requirement.
Neso Academy also comes to mind. They mostly have longer but intuitive playlists.

There might not be such complete tutorials like those mentioned above, but if I feel something could be added, this would contain a reference to them.

Websites for learning the basics may not be really up for the hype, other than those that branch into DSA as mentioned later. Still, RosettaCode is a great website to practice efficient coding, since their problems are more lengthy rather than tricky, ideal for new coders. You can cherry pick anything, from the famous Towers of Hanoi to the basic 100 Doors. I can surely provide places to check references of functions and headers here.

Competing Under C and C++

As one learns C/C++, undergrads are usually channeled towards the idea of Data Structures and Algorithms. These can basically be considered efficient and clever ways of handling information, be it just numbers.

The books for this are hence really not a very well versed and established, but there are some like the Guide to Competitive Programming. It can be studied completely.

The video aspect of it is really dependent on a particular concept. Other than the C/C++ videos already linked, you can check here for sure.

However, websites are where the best content is. You can join sites like:

Hackerrank
GeekforGeeks
and explore the questions at CSES

Some really neat documentation include a list of algos and a collection of DSA by CodeChef.

Which leads to the part of Competitive sites. These host regular competitions and are essentially the heart of Competitive Coding. Other than CodeChef, there are sites like:

One can simply register and compete in their bracket with timed and rated contests.

Development could be considered the ultimate goal of learning to code. From OS to Game Engines, they use C/C++ in some way or the other. It might need a whole blog for itself though, branching into other languages as well.

Maybe soon 👀