DEV Community: Shariif

Todo List Pure Vanilla JS

Shariif — Tue, 31 Jan 2023 02:00:43 +0000

I love programming in JavaScript. It's so satisfying when the code works just right. I could spend all day coding, but often when I sit in front of my laptop, my mind goes blank. As soon as I step away, I come up with lots of ideas for using methods and functions, but these ideas disappear as soon as I return to my code editor. This can be very frustrating.

Recently, though, I managed to stay focused on a task until I finished it, without seeking outside help. That feels amazing! It gives me a boost of self-confidence in my journey of learning programming languages. I may be a newbie JavaScript programmer, but I'm soaking up everything I can about coding. Sure, a C++ programmer might not take me seriously, but I'm floating above the clouds with my newfound understanding.

React useState explored

Shariif — Sat, 28 Jan 2023 23:40:03 +0000

Programming can be a challenging and isolating experience, especially for beginners who are just starting out or struggling to improve. It's easy to fall into a self-doubt mode and question whether you are cut out for this field. But, just like anything worth doing, it takes time, effort, and patience.

One way to combat these struggles is by connecting with others in the programming community. Online communities like DEV provide a space for programmers to share their work, ask for feedback and support, and gain the encouragement they need to stay motivated and continue learning.

Speaking of learning, let's take a look at an example of a function component in React that renders a list of names using the useState hook. It has an array of initial names called list and a state variable name that is used to add new names to the list. The component also has an input field and a button that when clicked, calls the addName function which adds the name in the input field to the list and clears the input field. The names are rendered in an unordered list and each item in the list has a unique key. This took me a long time to understand it and reproduce without references.

Remember, everyone starts somewhere and the journey to becoming a better programmer is not a straight path. It's full of ups and downs, but it's through these struggles that we grow and learn. So, don't give up, keep pushing through the hard times, and know that you are not alone. There's a community out there that understands your struggles and is here to support you every step of the way.

Simple Responsive Login Form

Shariif — Sat, 21 Jan 2023 20:22:20 +0000

It has been long since I last shared anything here. And the reason for that is too long to summarize here, so I will spare you the boring details and get to the business at hand. Let us talk about responsive login form.

I woke up early today to a post about a simple login form for a website and the coder was so kind enough to post the codes as well. I read the code and found that there were so many unnecessary <div> and <p> inside a form. I copied the code (by typing) and was halfway through copying the style when I noticed that the page was not responsive. I thought, why would you make an unresponsive page in these times where every user has a different devices with different widths and heights, so shouldn't we as developers make sure that our designs are responsive? Soon the websites we will have to design and build will be a mix of 3D and 2D browsers, some of which are already out there.

And don't get me started on the way visual data is being bend and twisted along with the AI trend that's has everybody talking. Anyhow, this is my own little experiment on calc() and it has done me a wonderful service. This is the tool that will give you responsive design, and don't forget the property value vmin, vmax and vw, vh as they will give you a responsive effect.

For more info check calc()

Counter Styled & JavaScripted

Shariif — Fri, 06 Jan 2023 20:08:37 +0000

To say the least this is better than the one before. And so I must conclude that practice does make improvements in one's learning process. I now see what I did not conceive to understand before. Persistence is a needed quality to have when solo-learning..!

I understand now, how to use divs and shape them. They are more flexible and easier to control and work with. HTML all in all is much easier to get the hang of, it's like building a house from the ground up. I use border and background colours heavily when I am in the process of writing because I hate not seeing what I am doing. That's why I find CSS so frustrating at times. And the browsers are even more annoying since I cannot get my content displayed the way I've painstakingly built it in one place.

I think, as a beginner, I am not the only one that deals with that issue, where you spend two to three days on one project, getting everything else to work just fine, on one of these online editors and then when the finished project is transferred to the local editor hell breaks lose and you can't help but pull at your hair or bald skin, thinking why? why? why? is this happening to my project.

It's a learning curve, I suppose, and the trick is to leave and then come back to it again when you have more understandings in your arsenal. Don't be shy or feel dumb for going back to basic or rewatching and refreshing your memory with stale knowledge that you have acquired at the beginning of your journey.

Now, this was suppose to be a two liner comment about the counter code that I have just finished here today, but it ended up becoming what you read.

And here I'll end with a sweep and say no more a beep, though I won't go to sleep.
Thank you for reading this deep.

It's the
WILL-OF-DEE

How To Reverse A String

Shariif — Mon, 02 Jan 2023 23:12:32 +0000

This is amazing. The more I tinker, the better I pick a great understanding that makes up for all the troubles of reading, listening, writing and trying to make a sense of it all. Last night before I called in for the night, late as it was, I had an ahuuh experience of understanding about what I was actually doing. I was writing codes in JavaScript and I wasn't copying somebody else's tutorial or blog.

I am happy to say that I am satisfied. Alhamdulillah, and thanks to all involved. I am pushing forward and I won't stop till I get enough. And some more...!

Now this will reverse engineer whatever you write inside the input field and then saves it inside function update, and when you click on the button, you should be able to see it on the display field above what you wrote turned backward. A simple application, yet powerful capabilities.

Thanks for reading and have fun coding...!

Learning a little JS

Shariif — Sat, 31 Dec 2022 23:50:49 +0000

Every small progress counts for something. There are days when I feel like I am all over the places, but then I always seem to find my way back to JavaScript.

The trick, I have recently learned, is not to memories the whole thing, as it is impossible for most of us. Use and play with what you have, build something, follow along tutorials, whether they are blogs or videos, it matters not. Just don't copy and paste as it will hinder you later on in life. Happy coding to you all.
And good luck

Camper's Coffe Menu

Shariif — Sun, 25 Dec 2022 02:23:28 +0000

pure html and CSS responsive Coffe Menu

What is HTML?

Shariif — Fri, 23 Dec 2022 19:53:10 +0000

I came to know about the internet when I was twelve or thirteen, give or take, and I wasn't - back then - even surfing on the net. I was playing with Microsoft paint, if you remember Windows XP before Vista changed the whole foundation of Windows. At that time, I had no care for software or anything that complicated.

I was just amazed at the fact that I could move the mouse and the screen would show its movements. I would click on the clicker and if I held it and moved the mouse, the paint canvas would paint. And I was proud, to say the least, of getting the hang of it and soon surpassing my mentor in just one week. Back then, the computers were big and square design with a loping back that reminds one about Majin Buu's top knot-like head feeler. And don't worry if you don't get the meaning. It's called dry joke, like HTML without CSS. Anyhow, moving on.

When I was a kid, older than early teens but younger than out of teens, I was too hyperactive to be able to sit down for longer than 10 minutes. And because of it, I was unable to actually do anything with the little knowledge that I had about computing. I was introduced to python when I was 16 years old, or was it 17? yeah, time eludes me. So let us just say, in between those years I was introduced to python and I loved it. But had no aptitude for it. And later on I was introduced to hacking, but I was busy chasing girls and figuring out who I really was. Growing up is a messy business if you don't have a stable mentor that understands your predicament and takes your age into the equation and patiently sticks by you, even when you seem to be a hopeless case. I wish I could say that I had such a person in my life. But no, reality is far far removed from movie depictions, so believe me when I say this, I was hit with facts and life painted a different picture for me, than what I had planned out, shaping me through the actions and wordings that was being uttered by me, myself and I. That road took me to a world that has judged me, questioned me and made me prove my worth each and every time the toll bridge was raised before me. I got tired of it, in the end and just left all that to itself. It was exhausting.

I found freeCodeCamp, where I began my first journey as a student learning about HTML, CSS and JavaScript, the last of which I fell in love with. I couldn't get enough of it. And so my story of how I got into coding is done here.

To those of you, who are intimidated my look of codes, be they HTML, CSS or Python for that matter, remember that it is just a language of a sort. You learned this language called English, and might be you already speak more than one language. Well, coding is essentially the same thing. It is a language invented for us to interact with the computer, the dumbest helper that needs exact instructions on how to help.

In the case of Hyper Text Markup Language or HTML, you have <!DOCTYPE html> which is not a tag. It is "information" for the browser. It tells the browser what type of document to expect. And therefore it must be included into your code. And in HTML5 it has been made easier for us to use. For more info regarding the DOCTYPE refer to

The next thing we will touch upon is the <html> tag. That is an open tag, or an HTML element of which you will hear the tag reference being used more than element, unless you are dealing with Cascading Stylesheet also know as CSS. And no, we will not touch upon here on this post.

The <html> element or tag can be considered as the root or the container of all other tags, excluding the <!DOCTYPE> that identifies to the browser what type of documents it sits on. The closing tag </html> has forward slash and it is an indicator that tells you the tag of html ends here with the closing tag. And all the tags found inside it are valid code blocks for the browsers that displays them.

Of course you need more code blocks before you are actually ready to display your website's content through the browsers. So let us just list the remaining tags here. Inside the open and closing tags of your <html></html> the elements that has to be used, must be done so in a structural order. And I'll show you just what that entails.

First comes <html> tags, inside the root tags comes the <head> tags and here you place meta data, links and the title of the page. And then beneath the <head> tags, but still inside the <html> tags you need another element called the <body> tag. This is where the content of the website is put and here is where all the contents that the browser displays are found. From navigation, home, about etc. all are inclusive to the <body>.

Every developer who has made or published a website has used these two elements to display content. And they are <h1> and <p> tags where <h1> or header 1 goes down all the way to header 6 or <h6> and the <p> tag or paragraph tag that doesn't have any siblings like the headers. And the term sibling is actually used in CSS when styling the page through selectors - another phrase - and such methods, so please don't quote me on this when explaining about <h1> headers.

Now let us look at what we have covered, and then I will use these tags to create a simple web site.

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The element is the root element of an HTML page
The
element contains meta information about the HTML page
The
element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The
element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The

element defines a large heading
The

element defines a paragraph

Let us use these tag elements and make a simple website.

<!DOCTYPE html>
<html>
  <head>
    <meta name="here goes the name of the meta" content="here goes the meta information">
    <title>Here Goes The Title</title>
  </head>
  <body>
    <h1>This is header one. Change the number to see the differences. It takes up to 6</h1>
    <p>Here is where you put the paragraph content</p>
  </body>
</html>

And that in a nutshell is how you create a website.

freeCodeCamp Tribute Page Challenge - Malcome X

Shariif — Fri, 23 Dec 2022 00:42:24 +0000