Downbad's Posts
Nairaland Forum › Downbad's Profile › Downbad's Posts
Karleb:I mentioned Indeed |
Karleb:If I'm working for a company, I'd take on a backend role. If I'm working as a freelance dev doing full-stack, I'm free to use whatever frontend tech want, and it will be Svelte. The platforms are Upwork, Indeed and Wellfound. No luck yet in either. I tried Fiverr, but my profile never got approved. Some people I know couldn't get their Fiverr approved either. |
Lordsugar:Thanks, which one though? |
Lordsugar:I'm sorry, what? |
Karleb:Thanks for the kind words. Yes, I've already been applying for jobs, both local and foreign based, but I've failed to land any yet. Even small jobs I know I am capable of doing, I can't land anything. I just keep pushing hoping to get my lucky break soon. I know that React, Vue and Angular are the top 3 most popular frontend Javascript frameworks/libraries, but I did my research when trying to decide on which to use, and Svelte just felt more intuitive to me. It had less boilerplate codes in comparison to the other big 3. For the past two years, it has been the most loved web technology in the developer surveys conducted by Stack Overflow. The syntax is just clean, and I jumped on it immediately. Yes, I know that React dominates the job market, but I was looking at using something I felt more comfortable with as it would make development more enjoyable for me; besides, the concepts are similar across these frameworks and the skills learnt in one can easily translate. |
qtguru:Yes, I've read that SvelteKit can do server actions, but I wanted to show I could work with a Django backend and SvelteKit frontend separately. This way I could easily just switch the frontend anytime and just call the django server, and it would work just as well. Or switch the server to a Node js server, for example, and the frontend would be mostly the same and I'd just change the fetch urls. |
More
|
This is a cross post from the programming sub forum. I have been documenting my journey as a web developer here on this forum. My post history would show all the things I've ever built. My very first project as a web developer was a blog built with Django, vanilla javascript, Jquery, and vanilla css. I posted it here and got some negative remarks which might have discouraged some people just starting out in web development. The link to that blog no longer works but is on my post history if you're interested in seeing the reviews. Anyway, I've built another blog this time. The technologies used were - Django and SvelteKit. I used Postgresql as the database in development but switched to Sqlite3 in production since I can't afford monthly subscriptions for a PostgreSQL database. I realize SvelteKit is overkill, but I might decide to scale the website in the future and if that day ever comes, it would be easier to use a frontend framework. It's going to be a personal blog where I write about my experiences, if you're interested you can subscribe to the newsletter. Anyway, without further ado, SvelteKit handles rendering of data while Django serves as the server. The server - 1. retrieves a post by its slug, selects up to four random other posts, and returns their details as a JSON response with truncated content for preview. 2. sends an HTML email notification about a new blog post to all subscribers using the Brevo API, handling errors if the API key is missing or if the email sending fails. 3. creates a time-stamped token for email verification using Django's TimestampSigner. Sends an HTML email with a confirmation link to the provided email address using the Brevo API, handling errors if the API key is missing or if the email sending fails. 4. attempts to verify the time-stamped token to confirm a subscription, creating a new subscriber if the email doesn't already exist, and returns appropriate JSON responses based on the outcome. If the token is invalid or expired, a JSON response with an error message is returned. 5. returns the total number of subscribers; performs a search query on blog post titles and content, returning matching results in JSON format. And more. The link to the website is https://rxjourney.com.ng Please pardon any initial loading delays as the website is hosted on a free plan. I plan to pay for hosting when I can.
|
More
|
I have been documenting my journey as a web developer here on this forum. My post history would show all the things I've ever built. My very first project as a web developer was a blog built with Django, vanilla javascript, Jquery, and vanilla css. I posted it here and got some negative remarks which might have discouraged some people just starting out in web development. The link to that blog no longer works but is on my post history if you're interested in seeing the reviews. Anyway, I've built another blog this time. The technologies used were - Django and SvelteKit. I used Postgresql as the database in development but switched to Sqlite3 in production since I can't afford monthly subscriptions for a PostgreSQL database. I realize SvelteKit is overkill, but I might decide to scale the website in the future and if that day ever comes, it would be easier to use a frontend framework. It's going to be a personal blog where I write about my experiences, if you're interested you can subscribe to the newsletter. Anyway, without further ado, SvelteKit handles rendering of data while Django serves as the server. The server - 1. retrieves a post by its slug, selects up to four random other posts, and returns their details as a JSON response with truncated content for preview. 2. sends an HTML email notification about a new blog post to all subscribers using the Brevo API, handling errors if the API key is missing or if the email sending fails. 3. creates a time-stamped token for email verification using Django's TimestampSigner. Sends an HTML email with a confirmation link to the provided email address using the Brevo API, handling errors if the API key is missing or if the email sending fails. 4. attempts to verify the time-stamped token to confirm a subscription, creating a new subscriber if the email doesn't already exist, and returns appropriate JSON responses based on the outcome. If the token is invalid or expired, a JSON response with an error message is returned. 5. returns the total number of subscribers; performs a search query on blog post titles and content, returning matching results in JSON format. And more. The link to the website is https://rxjourney.com.ng Please pardon any initial loading delays as the website is hosted on a free plan. I plan to pay for hosting when I can.
|
150k check my post history for my previous projects |
. |
I don't even know when to start building my next project. Programming can be fun and exhausting at the same time. |
Revealpanda:Yes, I know. Will do that on the next project. |
Revealpanda:My previous projects were all responsive. I'm familiar with media queries and I use Bootstrap grids. But this particular chat application posed a unique challenge for me in terms of responsiveness, and I wasn't particularly motivated to solve it because my initial goal was to implement websockets for real time chat - which I did successfully. On mobile phones, I had to hide the chat panel (the place where the chats are displayed), while displaying only the sidebar, and then when you choose someone to chat with, I had to hide the side bar to render only the chat panel. So the responsiveness here would have involved hiding and unhiding different components, and also enabling the visible component to occupy the space of the now hidden component. I don't know if my explanation is clear, but if you've used Whatsapp or Twitter messenger on mobile and Desktop you'd see the difference in layout. That's what I was aiming for. This is different from collapsing and expanding a navbar. I know it can be done, but I didn't try hard enough. Anyway, thanks for leaving a comment. |
qtguru:Ah, bummer. I'm a Web Developer. |
silento:It was one of the things I researched on before deciding on Svelte. Thanks for the compliment. |
Shomek:Thanks |
qtguru:I'd be glad to handle some programming tasks to relieve you of some work. |
More
|
More screenshots
|
This is a cross post of the one I made at the Programming subforum. I have been documenting my progress as a web developer on this space and my post history would show this, starting with my very first project all the way to this point. In all my previous projects, I never used a frontend Javascript framework because vanilla Javascript served me fine. I often see people who run to use a frontend framework when they start coding without actually trying to get their hands dirty without the framework. Anyway, I started building this project with no intentions to use a frontend framework, but at some point my life became miserable really fast having to manage the different states manually. I was writing lots of repetitve code with .innerHTML littered everywhere that it got to a point where... You know what, enough of this irrrelevant story. This application is a real-time chat application and is hosted here - https://svelte-of1p.onrender.com Please forgive any ititial loading delays as the project is hosted on a free plan. Also, apologies in advance as it is not optimized for mobile phones and I know that's what the majority of people would access it with. It was built with Express Js, MongoDB, and SvelteKit. It's my second project built with Express and MongoDB. You can check my post history to see the first one. Functionalities include The client-side - 1. Handles formatting and categorizing messages based on the sender. 2. Uses WebSockets to establish a connection for real-time communication and fetches messages and user information from the backend using JWT-based authentication. It also dynamically updates the chat content based on the currently selected user, ensuring that messages are saved and displayed correctly. 3. Uses a modal for user selection by fetching and displaying users based on input, while dynamically updating the UI and handling events for focusing and blurring the input field. 4. Toggles the display of settings and the message modal, manages the background color based on modal visibility, updates the current chat user, and fetches selected users and user details from an API when the relevant component mounts. 5. Manages a username selection form, including validation and availability checks. When the page for username selection mounts, it verifies if the user already exists and redirects them to the messages page if they do; otherwise, it enables the form for new users. It also handles frontend username validation (a server-side validation also occurs), checks availability through an API, and submits the form, storing a new JWT token if successful. *The server-side -* 1. Handles Google authentication with Passport, redirecting users to either a messages or username selection page based on their existence in the system, and includes a token in the redirect Url which is then retrieved by the client and stored after an intermediate page mounts on the client. 2. Provides endpoints for checking username availability and selecting a username for a temporary user, with validation and error handling. It ensures that usernames are unique, meet certain criteria, and assigns a new JWT token upon successful username selection and user creation. 3. Provides endpoints for sending and retrieving messages. The endpoints save a new message, broadcast it to connected WebSocket clients associated with the sender or recipient, and retrieves and returns all messages between the authenticated user and a specified recipient. The logic in place prevents messages from leaking to unintended recipients. 4. Retrieves and returns the authenticated user's selected contacts along with the most recent message for each contact, sorting the results by the timestamp of the last message. 5. Retrieves users that match a given username query, excluding the current user and already selected users, and returns a list of these users, handling errors appropriately. 6. Employs middleware that verifies JWT received from either headers or cookies, differentiates between fully registered and temporary users, and either attaches the user to the request or returns an unauthorized response based on token validity or non-existence. Once again, this was not optimized for mobile phones, so I apologize. If you want to try out the real time chat feature, register and search for me, my username is @downbad This was my first project built with a frontend framework so I expect to get better as I continue to use it in the future. Why did I use Svelte (SvelteKit) instead of React? I am aware that React is the most popular frontend JS framework (Library) and is the most sought after in the tech job market, but I chose Svelte because after doing some research and comparing it with the Big Three (React, Angular, Vue), it just seemed simpler.. More intuitive. And that just appealed to me more. I'm sorry. If you go through my post history you'd see my previous projects and notice I normally say what I intend to tackle next. I maintain the tradition here.
|
More
|
More screenshots
|
I have been documenting my progress as a web developer on this space and my post history would show this, starting with my very first project all the way to this point. In all my previous projects, I never used a frontend Javascript framework because vanilla Javascript served me fine. I often see people who run to use a frontend framework when they start coding without actually trying to get their hands dirty without the framework. Anyway, I started building this project with no intentions to use a frontend framework, but at some point my life became miserable really fast having to manage the different states manually. I was writing lots of repetitve code with .innerHTML littered everywhere that it got to a point where... You know what, enough of this irrrelevant story. This application is a real-time chat application and is hosted here - https://svelte-of1p.onrender.com Please forgive any ititial loading delays as the project is hosted on a free plan. Also, apologies in advance as it is not optimized for mobile phones and I know that's what the majority of people would access it with. It was built with Express Js, MongoDB, and SvelteKit. It's my second project built with Express and MongoDB. You can check my post history to see the first one. Functionalities include The client-side - 1. Handles formatting and categorizing messages based on the sender. 2. Uses WebSockets to establish a connection for real-time communication and fetches messages and user information from the backend using JWT-based authentication. It also dynamically updates the chat content based on the currently selected user, ensuring that messages are saved and displayed correctly. 3. Uses a modal for user selection by fetching and displaying users based on input, while dynamically updating the UI and handling events for focusing and blurring the input field. 4. Toggles the display of settings and the message modal, manages the background color based on modal visibility, updates the current chat user, and fetches selected users and user details from an API when the relevant component mounts. 5. Manages a username selection form, including validation and availability checks. When the page for username selection mounts, it verifies if the user already exists and redirects them to the messages page if they do; otherwise, it enables the form for new users. It also handles frontend username validation (a server-side validation also occurs), checks availability through an API, and submits the form, storing a new JWT token if successful. *The server-side -* 1. Handles Google authentication with Passport, redirecting users to either a messages or username selection page based on their existence in the system, and includes a token in the redirect Url which is then retrieved by the client and stored after an intermediate page mounts on the client. 2. Provides endpoints for checking username availability and selecting a username for a temporary user, with validation and error handling. It ensures that usernames are unique, meet certain criteria, and assigns a new JWT token upon successful username selection and user creation. 3. Provides endpoints for sending and retrieving messages. The endpoints save a new message, broadcast it to connected WebSocket clients associated with the sender or recipient, and retrieves and returns all messages between the authenticated user and a specified recipient. The logic in place prevents messages from leaking to unintended recipients. 4. Retrieves and returns the authenticated user's selected contacts along with the most recent message for each contact, sorting the results by the timestamp of the last message. 5. Retrieves users that match a given username query, excluding the current user and already selected users, and returns a list of these users, handling errors appropriately. 6. Employs middleware that verifies JWT received from either headers or cookies, differentiates between fully registered and temporary users, and either attaches the user to the request or returns an unauthorized response based on token validity or non-existence. Once again, this was not optimized for mobile phones, so I apologize. If you want to try out the real time chat feature, register and search for me, my username is @downbad This was my first project built with a frontend framework so I expect to get better as I continue to use it in the future. Why did I use Svelte (SvelteKit) instead of React? I am aware that React is the most popular frontend JS framework (Library) and is the most sought after in the tech job market, but I chose Svelte because after doing some research and comparing it with the Big Three (React, Angular, Vue), it just seemed simpler.. More intuitive. And that just appealed to me more. I'm sorry. If you go through my post history you'd see my previous projects and notice I normally say what I intend to tackle next. I maintain the tradition here.
|
React has been around for longer and thus is more popular. Svelte, according to Stack Overflow, is the most loved though. It is just so intuitive in comparison with React. |
larlah:OK, what's it about? |
Cryptowino:It's going to be difficult. Where would we get temporary phone numbers? |
larlah:You tried sending me an Email today but my email response couldn't be sent for some reason. What's up? |
You don't need a physical school, honestly. The internet is all you need to learn. Check my post history, I'm entirely self-taught, and by that I mean, internet taught me everything I know. |
ovanda:Cool |