I've taken on a side business venture with a friend that requires me to work in a very outdated repo.
My React / Redux understanding is sparse at best, and a lot of these outdated conventions are very confusing to me. It would be IMMENSELY helpful to be able to hop into a screen share on occasion to help me get accustomed to working in this codebase. 🙏

Hey folks,

I work as a web dev in a project with just one other frontend developer, so we rely on GitHub issues and daily meetings as project-management-tools.

I would really like to know how your projects are managed, especially in larger scale projects with more developers working on it. Do you use tools like Jira, if yes, how is it set up? Where do your on-production-bug-issues go to, who does report them?

I made a package that allows you to use the Hijri date and get the day, year, month, today's date, names of the months, and many other things that you can see from here: Search hijri-now on NPM

Hi folks, hope y’all having an amazing week. Anybody adding tracking to ur frontend recently? Could you kindly provide some feedback to my latest Chrome extension which shows what analytics events have fired, along with their properties. Now works for Amplitude, Mixpanel, and Segment, adding more platform(let me know what y’all use)! Thanks!

Hey all, posted this on a couple of different places, so sorry if you see this more than once.

I recently got a full-stack web dev certificate, and I'm about to get my degree in Computer Science as well. As a result, there are quite a few people in my life that are asking for my rates, and if I can make/fix their website.

As far as how to actually price these services as a freelancer, I'm totally lost. Should I charge per hour? Per page? Per service? Do I charge my time differently for SEO vs, building/redesigning a page? I suppose I'm looking for a good guideline, resource or rule of thumb. Thanks in advance for you help!

I'm a dev with about five years full stack experience, mostly with react and node. I'm the sole dev on a Laravel php project and could use some help understanding some of the work flow and some critique of my system.

Intro

In the realm of web development, the concept of responsive design often presents a steep learning curve for beginners. Even after moving on to more advanced topics, many still struggle to fully grasp the essence of responsive design, a shortfall that becomes evident in their projects.

Responsive design is an elusive goal for many engineers, primarily because the crunch of deadlines often shifts their focus to functionality and how the project looks on their personal device. This narrow focus can lead to oversight of how a website or app performs across different devices.

Even established websites can falter in responsiveness. Personally, I find that the proverbial amazon.com loses its aesthetic appeal when I shrink the browser on my laptop.

That said, I don’t believe it’s too difficult nowadays to achieve a decent level of proficiency with responsive design. I just think there has been a lack of educational focus on the topic, and in presenting it in a clear comprehensive way. That is what I intend to do in this article / video.

I’ve identified seven CSS properties/concepts that one must know in order to achieve almost any responsive design. While there may be additional techniques to enhance responsiveness, these seven are comprehensive enough to tackle most scenarios. Unless you’re making your app ultra-complex, you should be able to understand and apply these concepts in a reasonable amount of time.

Of course, to truly understand these concepts, practice is essential. That's why I've put together a video tutorial to complement this guide, offering a practical demonstration of the principles discussed. I will put the link in a comment for those who would like to see it. Remember, with each practice session, these concepts will become more intuitive.

Here are the main topics I’ve identified as crucial:

• Size units - relative to screen (vw, vh) and relative to other elements (%)
• The max-width and min-width properties
• Flexbox
• CSS grid
• Media queries
• Responsive images properties
• JavaScript for more complex responsive behaviors

Size units

Most beginners focus on creating a design that fits their screen nicely. Therefore, they don’t realize the downsides of specifying elements’ size, padding, margin, etc in exact terms, usually with pixels (px). The problem is that those elements will never change size as the screen size changes. Transitioning to using less absolute units like percentages and viewport units (vw/vh) is key for a flexible design.

Percentages

Beginners must be careful with percentages. It takes time to understand the concept of parent-child relationships and that when a percentage is given to a child, it is a percentage of the size of its parent/container (interchangeable terms), not the whole screen.

Another point here is that all the outside elements that seemingly “don’t have a parent” actually do - the <body> element. And the body’s size is as follows:

• Width - the width of the screen
• Height - the height of the content inside of it (0 if nothing is in the body)

Viewport width/height (vw/vh)

When you want an element to be sized relative to the screen, thus having no relation to the size of its direct container, you want to use vw and vh.

One example is the following. Let’s say your website is meant to have a <header> then a <main> section, and you want to specifically size the height of the header and have the main section take up the rest of the screen’s height.

One way to accomplish this is the following:

header {
  height: 300px;
}

main { 
    height: calc(100vh - 300px);
}

One vh unit is basically 1% of the viewport height (the height of the screen). Therefore, 100vh means 100% of the height of the screen, and thus calc(100vh - 300px) means “100% of the screen height minus 300px.”

This ensures the main section will take up the remainder of the height of the screen after the header.

You could also achieve this result with flex, but I’ll talk about that later. In this specific case, I think either is fine. Maybe one method will prove better as the project grows in complexity.

When to use px

Having these other options and the ones I will detail below definitely do not mean that the px
unit has no place in CSS nowadays. There are still many situations in which you want something to have a specific size that doesn’t change along with the screen.

Many elements in a UI design may prefer a specific size that will never change. Often buttons are sized this way, for example.

The max-width and min-width properties

These properties become useful when you want an element to grow or shrink in size, but only to a certain point.

One common scenario for this is with search bars at the top of the UI. The search bar will likely take up the majority of the screen width on mobile devices. And though the search bar will be bigger for a laptop than a mobile phone, once the devices get larger, you won’t want the search bar to remain almost the full screen width.

Take a look at how Airbnb’s input bar changes (just the width of it, I mean) as the screen grows. It's a little hard to tell with these images, but on mobile, the search bar takes up most of the width of the screen, but is still small in terms of px. Then it grows for tablets and small laptops. But at a certain point, it stops growing more as the screen further increases in size.

Flexbox

I count myself very lucky to have not had to learn CSS before flexbox was invented. “Flex,” for short, is an amazing method of relating elements to each other in terms of position and size.

With flex, you write display: flex; on the parent element, then it becomes a “flex container,” and all of its direct children become “flex items.” There are several intuitive flex-related properties you can set on the flex container to describe how the flex items should behave. There are also properties you can set on the flex items themselves to distinguish their styling from the rest of the flex items.

It is common that beginners don’t understanding that the flex relationship is strictly between parent and child. Not parent and grandchild, and so on. You can have flex items that are also flex containers themselves. All that means is one element has display: flex; and one of its children also has display: flex;.

Here are two of the most common scenarios in which flex becomes handy:

• Flex allows you to create positional/spacial relationships between elements that are all next to or on top of each other. So if, for example, you have a few items in a row, you can space them evenly from each other in that row with just one or two simple CSS properties.
• With flex, you can easily change the direction in which sibling elements are positioned. By direction, I mean from horizontal (row) to vertical (column), or vice versa. For example, think links in a nav at the top of the screen that become organized vertically under a hamburger menu for mobile.

CSS grid

There is one shortcoming of flex, and that is when you are trying to control elements in two directions (x-axis AND y-axis) at the same time. Flex is all about defining properties for elements that are aligned along the same one axis (x-axis OR y-axis). The most common scenario for wanting to do this is when making a grid of items.

You may run into trouble when trying to ensure they’re all the same size.

With grid, you can just apply one or two easy CSS properties, and bam, problem solved. See below.

#card-container {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  justify-content: center;
}

Note - Some people actually choose to use grid for the entire layout of their website. To be honest, I have never spent enough time to explore this option because I learned flex first (grid came out later), and flex is good for 95+% of my needs. I really have only needed grid for actual grid layouts, which are typically a subsection of my websites, if I need them at all.

There is nothing wrong with using flex and grid in different parts of your UI!

Media queries

In almost any design, you will need things to change more drastically when the screen hits a certain size. Small screens favor vertical scrolling. With larger computer screens, you can fit more elements horizontally.

With media queries, you can define what are called “breakpoints” - points at which some styles are to be overridden to accommodate the tweaked designs for other devices.

You have a choice to either create the mobile or desktop UI first, then create a breakpoint at which you define new styles to override the existing ones for the platforms that you didn’t initially design for.

Let’s use the example where for mobile devices, certain elements should be organized in a column, but on larger devices, they should be organized in a row.

Let’s assume that we have chosen “mobile first design,” which means designing the mobile UI first, then figuring out the responsiveness to achieve the larger devices’ designs. This choice, rather than designing for laptop/desktop first, is considered better today since the populus spends more time on phones than larger computers, and a company will prefer to make more users happy.

Well, the way to tell your app to change its appearance at tablet width and larger is to basically - with a media query breakpoint - say, “at this pixel width and higher, change the organization of these items to be a row now.”

This change may mean just changing a flex container’s flex-direction property from column to row, as shown below:

#flex-container {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) { 
    #flex-container { 
        flex-direction: row;
    }
}

This snippet means that the element with ID “flex-container” will have flex-direction: column; for screens less than 768px in width, but for screens with width 768px and above, the element will have flex-direction: row;.

Side note - There are relatively standard pixel widths for each device, so you can look up the pixel width at which to set a breakpoint to indicate a transition from mobile to tablet, tablet to laptop, and so on.

Responsive images properties

Often a combination of the above properties will be used to dictate the size of images in your website, and no further CSS will be needed.

However, there are times when the image is not scaling property with the screen. I wanted to provide a couple properties you could explore when this happens.

One property is aspect-ratio. This property allows you to define a preferred aspect ratio for images so that it always maintains the same height-to-width ratio across different screen sizes.

Another property is object-fit, which can take values such as fill, contain, cover, none, and scale-down, allowing for flexible control over how images adapt to different screen sizes.

JavaScript for more complex responsive behaviors

Finally, JS plays a crucial role in responsive design for more dynamic and complex adjustments that CSS alone cannot handle, allowing for custom behaviors based on user interactions or device specifications.

With JS, you can react to more event types than just screen size changes, such as button clicks, scrolling, dragging and dropping, and more.

With JS, you can write logic to dynamically adjust the sizes of elements based on whatever conditions you want. For example, you can adapt content based on the user's device, behavior, preferences, and/or location.

JS will be the bulk of the code for your UI, so if something is not easily attainable with HTML and CSS, often the solution will require JS.

Conclusion

Achieving responsive design is a balancing act, requiring a blend of CSS finesse and strategic JavaScript. By understanding and applying the seven key concepts outlined above, developers can create websites that are not only visually appealing but also adaptable across all the necessary devices.

The journey to mastering responsive design is one of continuous learning and practice. To see these concepts in action, don't forget to check out the accompanying video tutorial.
Remember that responsive design is within reach, and with each project, the process becomes more intuitive.

Hopefully I have managed to make responsive design a less foggy and daunting concept for you with this article and video.

I wish you the best of luck with your future projects, and I thank you for reading.

Until next time,
Jared

hello
i'm trying to build a print-on-demand editor like teespring i want to know how they are converting the image dimensions to inches i tried figuring how they did it but i couldn't.
do anyone know how they did it.

Hi ,

Im building a site on bubble as frontend( client demands it i cant change it) , and i need image upload functionality so im using aws s3 bucket, i want to connect to s3 bucket with bubble.

One way i found out is using api gateway of aws, Are there any other cost free options available?

Ok, so basically I have a class project for school which requires html/css/javascript/php/MySQL. We are planning to make a website for a one stop auto shop which includes mechanic work, tires, window tint etc. This website will actually be used by the business so we need to integrate it into a cms. Is it possible to just integrate the website into wordpress, and get rid of all the database clutter after submitting the project to my teacher? There will be no purchases made on the website, nor will there be user accounts/appointments, just a website where the business can update their inventory/pricing. Does this mean we can take the html/css code we built and establish it on Wordpress without having to reimplement everything step by step?

https://youtu.be/ZJ9alighYrY

Hey y’all,⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

I created a 4-part video series where I build a frontend app in increasingly professional coding paradigms.⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

I think this will be a huge breakthrough for beginning developers in learning how to write code as a professional would - taking into account maintainability and scalability.⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

𝐋𝐞𝐯𝐞𝐥 𝟏⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

• I recreate a design from frontendmentor.io.⁣⁣⁣⁣⁣⁣⁣⁣

• When implementing the JS, I rely on the DOM nodes themselves as the state of the application.⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

This is the most common sense approach for a newbie. The downside is that for every feature you want to implement, you have to react to a user action, take stock of the DOM elements on the screen, then update the right ones.⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

This will likely require messy, nit-picky logic that gets difficult to maintain as the project grows.⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

𝐋𝐞𝐯𝐞𝐥 𝟐⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

• I restructure the JS to represent the state of the application as stored JS data.⁣⁣⁣⁣⁣⁣⁣⁣

• The process becomes: the user does something, I update the state data, and then I render out the UI according to the data.⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

This makes the rendering logic more modular - if things aren’t rendering properly, I can isolate the rendering logic more easily.⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

Also, the rendering logic will be largely the same for new features, so making new features becomes faster as the project complexity increases.⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

𝐋𝐞𝐯𝐞𝐥 𝟑⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

• I note that neither approach thus far has led us to a fully functional frontend app.⁣⁣⁣⁣⁣⁣⁣⁣

• We have hardcoded the user’s data, and upon refreshing the browser window, we are back to where we started. The user’s progress is not recorded.⁣⁣⁣⁣⁣⁣⁣⁣

• We fix this by using localStorage as our place to store the user’s updates, allowing us to bring the user right back to where they were if the screen is refreshed.⁣⁣⁣⁣⁣⁣⁣⁣

• I end by noting that by this point, you know all you need to deploy a legitimate and potentially successful application, mentioning the game “2048” as an example.⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

𝐋𝐞𝐯𝐞𝐥 𝟒⁣⁣⁣⁣⁣⁣⁣⁣

• I take you on a massive refactoring journey and paradigm shift to make your code as clean, maintainable, and scalable as possible.⁣⁣⁣⁣⁣⁣⁣⁣

• I start simply with the latest JS syntaxes and tricks, then I go deeper into how to structure your project to be less buggy and more maintainable/scalable as it grows, ⁣⁣by:⁣⁣⁣⁣⁣⁣

• Implementing naming conventions⁣⁣⁣⁣⁣⁣⁣⁣

• Implementing Object-Oriented Programming (OOP)⁣⁣⁣⁣⁣⁣⁣⁣

• Breaking the project into modular folders and files⁣⁣⁣⁣⁣⁣⁣⁣

• Using Webpack to bundle and minify the files for optimization⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

By the end of this journey you will be a significantly better developer who understands more professional levels of thinking, which will help with your future projects and communication in interviews, and separate you from other beginners.⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

I will post the link to the beginning of the series in the comments.

⁣⁣⁣⁣⁣⁣⁣⁣

I hope you like it! I know it’s long, but it’s worth it!⁣⁣⁣⁣⁣⁣⁣⁣

⁣⁣⁣⁣⁣⁣⁣⁣

Best of luck,⁣⁣⁣⁣⁣⁣⁣⁣

Jared

Hello! 👋

Here is a short introduction video.

I've made a Chrome extension for Bootstrap developers which I hope you find useful.

The extension is a fork of Gimli Tailwind. But it was modified for Bootstrap development.

It’s been a while since I last worked with Bootstrap on a project, and I would greatly appreciate feedback from anyone using Bootstrap. 😊

Hi everyone,

So I'm currently working on a project where I need to create pie charts that dynamically takes data from a JSON array. I've found several React modules for this functionality, so that part seems easy right, but my manager has a specific requirement that I cant seem to get right. He wants the pie chart to have a 3D beveling effect, similar to what you might see in PowerPoint presentations. [see image link as an example] Making this 3D beveling is driving me nuts cause I just can't get it the way he wants it.

I was wondering if anyone here has experience or insights into how I could implement such a feature? Are there any libraries or techniques specifically tailored for this, like beveling, to charts created in React?

Any advice, guidance, or even alternative approaches would be greatly appreciated. Thank you in advance for your help!
https://drive.google.com/file/d/1kLFOlWc3v7m-2jU\_LyB2WkYaCqtCNQ02/view?usp=sharing

Hi! I’m from a web design, ux/ui background. I have some experience in a professional setting but want to grow more. Looking to make friends with and partner with a dev.

I want to find someone who is in the US, would be interested in working together on real client projects, and down to do some practice/portfolio building pieces.

If this is something you’re interested in, comment or msg me! We can discuss fit, ideas, and experience levels and maybe set up a video chat to meet.

So I’ve heard you can learn, grasp and better understand when you’re teaching or explaining something to someone else. So the deal is I’m learning to be a web developer currently I’ve been through HTML, CSS and working through JavaScript at the moment(object classes atm). If anyone irrespective of your level would like to use me in anyway (of course as stated in my header) I would be glad to tag along. I believe I can learn from anyone as long as they’re will to give a lending mind. You’re like me and also learning we could still help each other, I believe the key is sharing. I’ll be checking the comments more the merrier.

Hey, I am an aspiring website developer and came across this website. I was wondering if anyone can help me break this down, so I can get a better understanding of what makes a good website.

https://alittlelight.com.au/

like how the top right-hand corner, the navigation bar is too long and pushes the main info off center. for example, what else do you guys think?

Hello everyone, is anyone pursuing an online MCA degree? If someone has, please let me know. I want to pursue MCA and am from Bachelor's arts background with no maths and statistics but I'm confused about where to do it.

I got laid off my Full Stack Engineering position in February 2024. Since then, I've dedicated my days doing the following:

• Updating my Resume/CV/Socials
• Applying for Jobs
• Building Personal Projects to Github
• Practicing/Learning Data Structures & Algorithms

I'm looking for other programmers that are constantly online grinding as I am with the goal to land a promising Full Time Tech Job/Career. Hoping we can motivate and keep each other accountable but also benefit and learn from one another. We should mostly know the same technologies an frameworks so that we can collaborate effectively. If interested, shoot me a DM!

**My Skills**: JavaScript, TypeScript, MERN, Node.js, Next.js, Vite, Vue.js, Tailwindcss, CSS, HTML, SQL, Python, Ruby, Ruby on Rails, Express.js, Kaboom.js Three.js, Unity, Blender.

It can be anything honestly, and I’m pretty flexible on what stack we use too.

Just want to build something medium sized maybe large if the idea is cool enough.

While I’m flexible with stack and tech choices I am quite experienced in the following technology:

MySQL, T-SQL, Angular, React, NextJS, JavaScript, Typescript, SCSS, Python, .Net, NodeJS, Java, ExpressJS

How do I make a working newsletter with an automatic welcome email for a landing page?

Hey everyone! Hope you are all well. I am new to the website creating business and am starting to create websites for customers and offering various services at monthly rates. Does anyone have any tips/thoughts on how to figure out in general monthly rates to charge for website creation, continual management and updates and hosting for someone just starting to build their business clients?

I ask because I see some monthly rates from not-well-reviewed companies charging low monthly rates for one site for $75-$100/month. Other than that, I see rates that can go up to the thousands mark for getting a website created. I have also asked my friends but nobody is really in that field to give much input.

In addition, if you all have ideas on what services that companies are looking for in connection to a website, that would be awesome as well!

Any input would be amazing! Thank you all!!

Hello everyone, i need your help.

I'm currently working on a project using on react and i want to dispaly a 3d model like the one here: https://bimdata.io/
If anyone knows how to do it and can help me, i'd appreciate it.

Hey guys ! I'm CSSami and l'm starting a youtube channel to talk about pure CSS. Right now we are talking about selectors, and I have done a complete video about flexbox!

The channel is in french but the subtitles works great so even if you dont talk french you can come check it out 😄

I hope you like it and give me more ideas of video about subjects you want me to explain

https://youtube.com/@CSSami7

Hey all I'm diving into web development and could use some advice on which course to choose. If you've taken a web development course that you found helpful or know of one that's highly recommended (free/ paid any), please drop your suggestions below. Your input will be much appreciated! Thanks!

I am working on BirdNET AI model based realtime bird identification software which keeps track of bird species based on acoustics analysis. I am managing with backend side pretty well but I am not much of a web developer, so I am looking help if someone wants to join my open source software development.

I am seeking web developer with experience or interest in learning in Go HTML templating, Tailwind CSS, HTMX, Alpine.js, or similar frameworks to join in enhancing the BirdNET-Go application web UI. If you have the skills and a keen interest in contributing to a nature-focused project, I'd love to hear from you.

https://github.com/tphakala/birdnet-go

Hi everyone,

I'm a software developer who is currently looking for a job and in the meantime, I build some hobby projects to enrich my portfolio and work on something.

I'm currently working on an online quiz (consisting only text-based questions) building and sharing web application. It's not something complicated. User registers to website, creates quizzes and then shares it with other people. Anonymous users reach out to quiz via URL, solve it and submit it. Creator of the quiz can also see statistics of his/her quizzes.

I'm looking for a UI/UX designer who would like to work on this small project to enrich their portfolio, try out new stuff and gain experience. Unfortunately, I'm not paying for because this is just a hobby stuff. We will keep it casual, as a hobby. You can put only a few hours a week and create designs and I will build them. Later on, this project will be live on the internet so you can showcase your design on the internet to others around you.

If you are interested in please reach out to me. I usually respond within hours and we can also chat off-topic too.

Hey everyone!

I just launched ResumeBoostAI which is a project that aims to help people applying to jobs increase their chances of getting the jobs by improving their resumes using AI.

You can create resume bullet points, cover letters, answer common job questions and more.

I hope it helps some people here in the group

https://resumeboostai.com/

Looking for a motivated Laravel PHP dev to join my team. We’re a fast growing startup and could use a highly skilled Developer to join our team. Comment “more info” for details.