DEV Community: Muhammad Wasif

5 Short CSS Snippets that will Make Big Difference

Muhammad Wasif — Sat, 24 Apr 2021 12:13:42 +0000

Styles and themes of a website or an app make a huge difference for the use experience. Here are some short code snippets that will make your app or web page look 10x attractive and beautiful.

Custom Text Selection

You can change the selection style for your HTML pages using ::selection pseudo class.

::selection{
  background-color: deeppink;
  color: white;
}

Gradient Text

Gradient background for text can make your interface 10x more beautiful and attractive. Feel free to use this styling for big headings of your web pages.

.gradient-text {
  background:  linear-gradient(to top, #30cfd0 0%, #330867 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

Disable Select

Set user-select CSS property to none. This will disable text selection in your web pages. This pretty useful when you're making PWAs. This can help you provide native app like experience.

p {
  user-select: none;
}

Full Screen Mode

Full screen mode for showing images is pretty useful and makes a big difference. You can also use this in your blogs where user can read in full screens. Pretty useful. Right?

#element:fullscreen {
  width: 100vw;
  height: 100vh;
}

And enter this full screen mode by executing following JavaScript function.

var el = document.getElementById('element'); el.requestFullscreen();

Custom Scroll Bar

Scroll bars that match with theme of your website or app make huge difference. Always change scroll bars styling and make it look good according to you app's theme.

You can style each element of scroll bar by targeting ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: pink;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: deeppink;
  border-radius: 12px;
}

That's it! Leave some short snippets in comments if you know some.

Online Tic Tac Toe with Firebase

Muhammad Wasif — Tue, 13 Apr 2021 09:04:04 +0000

I created a Tic Tac Toe algorithm in JavaScript that can be used to play the game anywhere. By anywhere, I mean you can use this algorithm (which is warped in a JavaScript class) in React, Angular, React Native and even in web console.
Wanna try?

How it works

You just need to define a new class and you can use methods of class to play the game.
Here's an example

let game = new GameBoard(PLAYER_ONE, PLAYER_TWO);

Here, PLAYER_ONE and PLAYER_TWO refers to the name of players that will be playing the game. Now, when you have defined a new class. You can play the game by calling different methods. For example, in console, you can do this

So, now you just need to create the interface and perform actions with game and it will return the results. It can be implemented anywhere where JavaScript code can be executed. Right?
You can use this to create your own version of game. Here's the code. Just import the class and start implementing functions.

Implementation with Firebase

So, I decided to use this along with Firebase to create an online version of this game.
It works like this:

You create a room.
Share your room ID with your friend.
Your friend joins the room and both of you can now play the game.
Yes. You can also chat 😃!

Behind the scene, it is simple. I used Firebase Real-time Database for this. the game variable will result in an object that contains the information about the status of the game. It has properties for who's turn it is, what's the status of board and who is winning.

The program just keeps storing this object on Firebase after every turn. While, on the other hand, it keeps reading the data in real-time and shows the changes to the other player.

firebase.database().ref(roomID).on('value', (snap) => {
    const dataFromServer = snap.val();
    // just use above object to show values on UI
});

As the game object has every data in it, it will indicate winner, loser, turn and everything else. The program just needs to update the data from Firebase remote server to player's local device.

Chat also works with the simple terminology. But I used Firestore for this purpose. You can see the code on GitHub. It's pretty simple.

I would love it if someone reviews my code and find a bugs in it 💫.

thewasif / tic-tac-toe-champ

An online tic tac toe game which you can play with your friends!

Online Tic Tac Toe

Play with your friends!

Create an online room and invite your friends to play tic tac toe online!

Contributing

Contributions are always welcomed to make this app better and add new features
To install app locally:

fork the repository
clone the repo https://github.com/MuhammadWasif/tic-tac-toe-champ.git
cd tic-tac-toe-champ
Run npm install
Run npm start

Node and npm should be installed in the system

Built With

Happy Coding ❤️

View on GitHub

Don't forget to give it a star. Here's the deployment link
https://tic-tac-toe-fin.netlify.app/

How do I enhance my Maths skills as a high school student?

Muhammad Wasif — Mon, 01 Mar 2021 13:14:19 +0000

Hey
I have a question. The way they teach Maths at school here is like we have a couple of problems on text book. Teacher first teaches the concept behind the problems and then teaches us how to solve every problem. He solves each and every problem on whiteboard and we note and of course then test.

I cannot solve most of the questions if they are out of my text book. I would not be able to think critically and solve a problem based on what I have learned so far in mathematics.

I wanna be a computer scientist and I realize how important Maths is in CS.
Is it normal for a high school student? Or do I need to enhance my Mathematics skills?
Because I see it as cramming to just be able to solve questions that are on your notebook only.

I need your opinion.
(I am in final year of high school and hopefully will be joining University for my CS degree after 6 or 7 months)

Should I use Redux?

Muhammad Wasif — Sun, 22 Mar 2020 11:25:17 +0000

State management is a huge and important part of a big application. In libraries like React, Redux has always been popular.
However, in past few days I came to know about these tweets.

Ben Lesh

@benlesh

Redux: You know EXACTLY where your state is.

...You just don't know where the code that manages your state is.

00:41 AM - 22 Mar 2020

And,

Jacob M-G Evans ⚛

@jacobmgevans

@catalinmpit @freeCodeCamp Drop regex and Redux

- regex look of up when you need it.

- redux well even @dan_abramov has some feelings about and he creates it... Unless you plan to work on systems that have but learn it then. Maybe familiarize yourself with it

14:48 PM - 21 Mar 2020

And these are quit right. Redux make the code complex.
So, should I keep using it or React Context is a good alternative?
What do you say about it? Is Redux deprecated?

How I Became Google Code-In 2019 Runner Up?

Muhammad Wasif — Thu, 13 Feb 2020 14:57:08 +0000

What is Google Code-In?

Google Code-In is a programming competition, by Google, for 13–17 years old students. During the competition, students work with open source organizations to find and fix bugs in software.

My Journey

It was about one year ago, when I got to know about Google Code-In. I looked at the website but got very frustrated after looking at the challenges from different organizations. I just thought that I can not do it. I am not skilled to take part in such competitions. Back then, I only knew HTML, CSS and JavaScript. These were good enough to take part but I had a lack of confidence.
I continued my learning and learned a lot about React, React Native, Git and open source. After getting some grasp on JavaScript, I took a look at open source projects to contribute on and practice some stuff. At same time, I got to know about Hacktoberfest. I took part in this challenge and successfully completed it by contributing in some open source projects. Learned a lot about how open source works and what is it all about!
There was one month left for Google Code-In to start. Since I had learned about Git and open source, I decided to take part in Google Code-In. But I didn’t think to become a winner. It was okay for me just to take part in it. When a few weeks were left for competition to start, I got motivated and decided to fight for at least Finalist. And when competition started, I was determined enough to fight for winner title.

Competition started and I decided to work with AOSSIE as suggested by someone. After two or three days, I felt that AOSSIE was not good for me. I got stressed because I was not able to understand the tasks, they had. I changed my decision on suggestion of a friend and switched to FOSSASIA. And it was the one of the best decisions of my life.
I started my work with FOSSASIA. First, I had a detailed look at their projects and finalized some projects to work on. I got some projects that suited my skills like React, Electron and other web stuff.

Now, I was constantly working on different task to solve problems, find and fix bugs in applications and improve documentations. I asked for help from different mentors. Solved bugs in FOSSASIA's applications and even added new features in the apps. Those apps included React web apps, Node.js apps and desktop applications built with React and Electron.

When competition was in its last phase, I was loosing hope as I was not finding more problems to solve. I even decided to quit with no hope of winning. But my friends motivated me to not to give up and just keep working. Now, I decided not to quit and keep working until the competition ends without thinking that I will win or not. As someone said,

Life is not about destination. It's about journey!

So, the journey started once again with a new spirit and I decided to contribute again. Finally, the competition came to an end and I was done. I thanked my mentors and other fellows for a great experience. I was determined to continue my open source journey with FOSSASIA even after the competition ends as it feels amazing to take part in building a real world software used by millions of people around the globe. I hoped to become a winner, runner up or a finalist!
On 2nd February, I received an email stating, “You are a Google Code-In 2019 Runner Up!”.

I was really happy at the moment and I could not believe it. I felt very proud as I was the first Pakistani student who achieved Google Code-In Runner Up title. Google announced the results on 10th February.

Now, I feel really proud to say that I am Google Code-In Runner Up! I wonder when I look back that how I decided not to take part in it because I was not skilled and now, I became a runner up!

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. — Steve Jobs

I will get few gifts from Google. These gifts include

A Bag pack
A t-shirt
A Jacket
Digital Certificate and Award Letter

Have a look at the stuff!

Journey was full of great experiences. I enjoyed very much contributing in open source software. Being a 17 years old student, I learned a lot while contributing to real world software. You can see my progress by looking at GitHub contributions graph and by comparing it to past days.

I am thankful to everyone who helped me during my whole journey. The most important thing I learned form contest is not about programming or other open source stuff. Instead it is,

All you need to do is to believe yourself. Don’t ever doubt your capabilities and enjoy the process. Because, it’s about journey not destination!

Resources

Here are a few links you may like to visit:

I want to learn a new programming language. What should I learn?

Muhammad Wasif — Fri, 13 Dec 2019 01:48:12 +0000

I'm a front end developer. Now, moving to cloud native and nodejs but I want to learn a new programming language. Which one should I learn?
I would like to explore field of Robotics and AI. So, please suggest!

I created a React & Redux Boilerplate

Muhammad Wasif — Sat, 23 Nov 2019 14:16:55 +0000

It's always awful to start an app from scratch. Specially with React, you always need to delete some files in boilerplate created with create-react-app. And adding Redux is also another big problem and it takes much of time.
To make your task easy, I've created a boilerplate for React and Redux. It includes setup for
1: React
2: Redux
3: styled-components
4: react-animations
One important thing, people always worry about creating a PWA with React. I've also added all the features of PWA. The app has working service workers and is installable.
Here's the repo:
react-pwa-boilerplate
If you're an open-source lover, don't forget to add more features used mostly by creating a pull request.
And don't forget to start the repo, if you like the boilerplate.

Become Github Student Developer

Muhammad Wasif — Fri, 04 Oct 2019 16:35:56 +0000

What is Gihtub Student Developer Pack?

Github Student Developer Pack is a collection of free services for student developers. Student can take benefits of commercial software and tools for free.

Now, question is 'How to apply and am I eligible?'

If you're a student, you're eligible. But there's a bad news. You must be enrolled in an institute to apply for this developer pack.

What will you get?

If you get selected for the developer pack, you'll get following stuff:

Access to commercial tools like JetBrains IDEs
3 free domain names
Github Pro Membership
Cloud Credit in different cloud platfrom (Microsoft Azure, Digital Ocean)
Free access to paid courses

Isn't that cool? List of all benefits

How to apply?

In order to apply, you need a proof that you're a student. You need an enrollment verification letter or your student ID card to proof that you're currently a student and studying in an institute.

After that go to Github Education website and choose Student Developer Pack option.

Fill the application form after signing in to your Github Account. You need to provide the picture of the document that verifies your student status. Make sure that document is clear and in good quality.

Then explain how you plan to use github in future. Type some fancy sentences that you love open source and github is best community of open source developers. After submitting the application, you will get email of confirmation between 2 or 3 days. If you provided your school email address, you may get confirmation email in between 2 hours.

Now, what are you waiting for? Go and apply now!