DEV Community: Jamel-h

Created an online learning platform to help my fellow students and teachers stay connected after COVID19 school closure.

Jamel-h — Fri, 27 Mar 2020 21:55:22 +0000

Hi! I’m a 17 year old student in Nova Scotia, Canada. The past few weeks have been pretty hectic, with school being cancelled and most of my teachers being ‘technologically illiterate’, we have been struggling to continue working on our schoolwork.

I’m in the IB program, so just because my school is closed doesn’t mean that I get to stop studying (as much as I wish it were so 😉).

My teachers really needed the ability to live stream with us, but couldn’t find a website that ‘did it all’.

I decided that I would spend my March break working on a website that allows them to create a class, post assignments, upload documents and live stream to their students.

// DOCUMENT EDITOR

First thing was I needed a way for students and teachers to create documents and upload them to their class assignments.

For that, I used the open source rich text editor QuillJS, and modified it using JS AJAX to save automatically everything that is written. When a user creates a document, the sever creates two files, one .php file that has the document unique token (generated on creation) and .txt file that contains the raw HTML of the doc file. The .php file loads the .txt file on awake, and writes to the text file on the input change.

Documents can also be shared, uploaded and deleted.

// CLASS SYSTEM

When a teacher creates a class, they are given a unique 6 character alphanumeric code. This code is what students can use to join their class.

Teachers can choose between two types of class posts: announcements, which are text based, and assignments, which has a due date and title.

// LIVE STREAMING

Now that teachers can create a class, assign work and upload/edit documents, they need to communicate with students.

I was able to contact Zoom and get the basic plan’s restrictions removed for all accounts under my school district’s domain. This allows my teachers to create a free Zoom account that supports large groups of students.

I then integrated Zoom through a url with parameters taken from the user (such as the user’s name) and place that into an iframe in the classroom. I use AJAX here to check for changes in the database of streams. If it sees a stream is active for the specific class, it will automatically log the student in (just as a viewer). The user doesn’t even know it’s zoom, however the teacher does.

// INSTANT MESSAGING

Using AJAX and PHP, I created a very simple way for teachers to get in contact with students. When you hover over a student’s name, a div will appear with the students name and profile photo, as well as a ‘message’ button. Clicking the button will allow you to message the student one on one.

Also, there is a live chat underneath the stream for every classroom. This chat allows the class to communicate with each other and their teachers while the stream is active.

// CONCLUSION

Welp, that’s about it. It was a really fun learning experience, and it definitely kept me busy during these troubling times.

Feel free to leave any questions or comments below 😃.

(Website is live here: www.ihomeroom.ca, if you want to check it out)

Looking for coding blogs/apps

Jamel-h — Sat, 17 Aug 2019 19:42:28 +0000

What are the best coding blogs or apps? Not necessarily tutorials, but ones where you can read up on everything to do with coding.

Thanks :)

Project Twiist - Dev log #2 (Design)

Jamel-h — Mon, 12 Aug 2019 20:02:01 +0000

TL;DR
The first thing I have decided to start on, is the website design. This is mostly because it's my strong suit (and it's relatively easy).

DEVELOPMENT ENVIRONMENT
First off: I am using glitch.com while designing the website. Glitch is a really cool live development website/program, that allows me to edit every component of my website and then view my edit instantly in a new window. Of course, once I start coding real functionality into the website I will have to export my website and host it myself, but for now Glitch has been working perfectly.

PRELIMINARY GRAPHIC DESIGN
Although coding is a passion of mine, I really really enjoy graphic design. I am proficient, if not fluent, in Adobe Illustrator and Adobe Photoshop. This came to my benefit for this project, as it allowed me to quickly create some sample logo and design material for the website.

Main Logo:

Main Logo With No Effect:

BASIC CSS, HTML & JS FOR WEBSITE
After I found the site's colors, and designed the logo, I was ready to start styling the website. I am kinda skipping over the base website HTML "design" because it is really simple, but I will outline some specifics below.

Home Page

To fill up the home page, I used real thumbnails, titles, channel names, and view counts from YouTube.

Each thumbnail has a simple CSS animation on it, making it 'hover' upwards on cursor hover.




```

div.videothumbnail:hover {
cursor:pointer;
bottom:5px;
}

This simple code (bottom:5px;) enables me to animate the thumbnails efficiently and easily. As I've said, I am no expert, and I am self taught, but this is the way I found to achieve the look I wanted.

There is a navigation bar on the website that is tucked into the left side of the screen. The javascript to make it function is again, quite simple:


```



function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}



```

I then use div id="main" as a container for the body of the page.

Video Page

You can also see in this gif that there is a custom scroll bar and videoplayer for the website as well.

Scrollbar Code:


```



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

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
  background: #888; 
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}



```

Project Twiist - Dev log #1 (Prologue)

Jamel-h — Mon, 12 Aug 2019 17:54:46 +0000

TL;DR
Progress has started on my first ever web project: an online video platform that hosts user-generated content going under the name "Project Twiist".

THE BEGINNINGS
I am new to programming.. well, sort of. Ever since I was 11 years old, I had a huge interest in open world video games, specifically the Grand Theft Auto series. The way that the devs were able to create a giant world, completely explorable (within bounds) and filled with things to do, amazed me. The problem? Well there's always some problem, and for me, it was that I was 11, and Grand Theft Auto 5 (the newest addition to the GTA series) was rated M+ (18+). That meant that my parents wouldn't let me play it. I understood where they were coming from, but I repeatedly reassured them that I was not playing for the things getting the 'M' rating, I was simply going to play so I could explore the accomplishment of GTA, as well as yielding the many vehicles throughout the game.

Still: no. My parents, responsibly and kindly, told me to find something else to do. So, I did. I download Unity3d and started playing around. Now, I'm an optimist, as well as a diligent and persistent kid. So when I launched unity.exe for the first time, I thought to myself "how hard could it be?", and boy was I surprised.

Obviously I didn't sit down, 11 year old me, and start coding a GTA V replica, but I sure tried... for a while. I kept running into problems, but slowly I was piecing together a game. Now, here is where I need to be specific: I was piecing together a game. You have to remember that I was not necessarily interested in 'coding' a game, but more so playing GTA V (or any version of it that I attempt to create), therefore I was allowing myself to take many many shortcuts. The discovery of the Unity Asset Store is what really sped things up.

With the assets, I quickly starting piecing a real prototype together, there was an animated character, working weapons, a minimap, a world (not modeled by me!), drivable vehicles, and even multiplayer. I was proud of my creation, but what really was "my" creation.

Although by the time I bought GTA V (15) I had a working prototype of my GTA, I was too interested in the real game to care anymore. BUT, what I did care about, was how much fun 'building' a game really was and how much I enjoyed the process.

THAT is what gave me the urge to code something, make something that I could be truly proud of. That's where I got the idea to create Twiist, an online video platform that hosts user-generated content. A big undertaking? Yes. Was I up to it? Double yes.