Julien Gilbert

@juliengDev500 points

🎓 Front-end specialist with expertise in TypeScript and React. 👨‍💻 As a freelancer, I'm seeking remote collaborations with people. My goal is to deliver high-quality solutions, contribute to dynamic teams, and continue learning. Let's connect and create amazing web experiences together!

I’m currently learning...

Node.js - Next.js

Latest solutions

TicTacToe_React_TypeScript_Tailwind
#react#shadcn#tailwind-css#typescript#framer-motion
P
Julien Gilbert•500
Submitted 3 months ago
I know that some effects are missing at the end of the game to bring out the winning combination, but I'll come back to this later. 99% of what was expected is there, and as usual I'm open to any suggestions for improvements. Thanks in advance.
1 comment
BMI_Calculator_Typescript_Tailwind
#typescript#vite#tailwind-css
P
Julien Gilbert•500
Submitted 3 months ago
All constructive criticism is welcome.
1 comment
E-commerce_product_page_HTML_SCSS_BEM_TYPESCRIPT
#accessibility#bem#sass/scss#typescript
P
Julien Gilbert•500
Submitted 4 months ago
Every constructive comment on the approach used in the solution is welcome.
1 comment
News_Homepage_HTML_SCSS_GRID_TYPESCRIPT
#sass/scss#typescript#bem
P
Julien Gilbert•500
Submitted 5 months ago
Feel free to give my any feedback :) much appreciate
2 comments
Contact_Form_Component_Typescript_Accessibility
#accessibility#sass/scss#typescript#bem
P
Julien Gilbert•500
Submitted 5 months ago
constructive criticism is always welcome
1 comment
FAQ_Accordion_Typescript_Accessibility
#accessibility#typescript
P
Julien Gilbert•500
Submitted 8 months ago
I would like help with effectively managing the positioning of a complex layout like the one I used in my project. Specifically, I struggled with aligning the FAQ section over the background image while keeping the overall layout responsive and balanced. I had to use a negative margin to achieve the desired effect, but I would appreciate guidance on whether this is the best approach or if there are more efficient ways to handle such positioning challenges without affecting the layout’s integrity.
1 comment

View more solutions

Latest comments

P
Marcello•480
@marcello88c
Submitted 3 months ago
Tic-Tac-Toe Game Project
2
P
Julien Gilbert•500
@juliengDev
Posted 3 months ago
Great work
P
lai yiu leung•400
@jasper2virtual
Submitted 4 months ago
What specific areas of your project would you like help with?
I don't know why no matter how hard I try, I code slowly that almost spend a week to complete.
Am I too old to code? or any good practice or good book from UI masters or framework to construct a web UI.
I want to impove it, because my html and css look like 'Spaghetti code'.
tailwindcss vuejs
#vue#tailwind-css
1
P
Julien Gilbert•500
@juliengDev
Posted 3 months ago
First of all, congratulations on your solution! I won’t be able to go into too much detail because I’ve never used the Vue framework before, so I find it a bit difficult to navigate the project structure. If you’re looking for feedback, you might consider switching back to vanilla JavaScript so that others can better understand the code.

Semantic Structure

I don’t see any semantic tags in your code—everything is built using <div> elements. This is unfortunate as it doesn’t follow best practices in terms of HTML structure and accessibility. (You can replace this with more appropriate elements like <header>, <section>, <article>, etc., to improve readability and accessibility.)

Layout

I noticed some inconsistencies with the original design:
- The calculation form is not positioned the same way and lacks proper padding.
- When resizing to responsive mode, the inputs take up the entire screen, which is visually overwhelming.
- The card layout in the "Limitation of BMI" section does not match the expected desktop design.
Logic
- When switching from metric to imperial and then back to metric, the input fields are not reset, and the result text remains unchanged.
- However, the calculation itself seems correct and only triggers when both required values are properly provided by the user.
That’s what I was able to identify on my end—I hope this helps you spot the differences between the expected design/features and your project.

And don’t worry, you’re not too old or rusty! It’s not a race. Learning takes a lot of time for me as well, but as long as you’re making progress, that’s what matters most. Stay motivate and have fun, that's is all matter! 🚀
P
Yulia•720
@YuliaLantzberg
Submitted 6 months ago
E-Commerce Product Page using Less, Bem and vanilla Javascript
#less#bem
1
P
Julien Gilbert•500
@juliengDev
Posted 4 months ago
Code Review Report

Issues Identified

1. Cart Functionality
- The cart is not working correctly when I arrived on the desktop version, and its functionality needs debugging.
2. Layout Behavior
- There is a strange layout behavior related to viewport height, which can be observed when using the browser's responsive DevTools. This suggests a potential issue with the CSS or HTML structure.
3. Mobile Version Issues
- On mobile devices, the cart appears to function, but its layout on the page is incorrect.
- There are difficulties closing the cart once it has been opened.
4. Accessibility Concerns
- The site was not developed following accessibility standards, which could impact usability for a wider audience.
Recommendations
- Fix the cart functionality to ensure items can be added, removed, and viewed correctly.
- Investigate and resolve the viewport height issue to improve layout consistency.
- Adjust the cart layout on mobile for better positioning and usability.
- Ensure proper event handling to allow users to close the cart easily.
- Improve accessibility by following best practices, such as semantic HTML, keyboard navigation support, and ARIA attributes where necessary.
Feedback

I hope this review will help you to improve your project and continue growing as a developer. Happy coding and keep up the great work!

webdevbynight•530

@webdevbynight

Submitted 5 months ago

What are you most proud of, and what would you do differently next time?

I found a way to “import” breakpoints declared in SCSS into JavaScript in a way that makes maintainance easier, IMHO.

What challenges did you encounter, and how did you overcome them?

In order to use the breakpoints I named in SCSS in JavaScript, I added custom properties targeting the breakpoints to the :root selector. First, I wanted to use getComputedStyle() to retrieve the custom properties, but Chrome does not include custom properties within the object returned by such a method (Chrome 131- at the time when I wrote these lines). Instead, I used document.styleSheets and nested for loops to get the custom properties.

What specific areas of your project would you like help with?

Do not hesitate over giving feedback about how I implemented the way the menu appears on mobile view. I am wondering if there is a way to do that without JavaScript and in an accessible way.

News homepage - HTML, SCSS, TypeScript, RWD

#sass/scss#typescript

Julien Gilbert•500

@juliengDev

Posted 5 months ago

Hello sir. I've analyzed your code with a focus on accessibility and semantic HTML. Here's a comprehensive review with suggestions for improvement.

Accessibility Improvements

Navigation and Content Access

Menu Navigation

Your navigation needs better semantic structure:

<nav id="menu" aria-label="Main navigation">
    <ul>
        <li><a href="/home">Home</a></li>
        <!-- other menu items -->
    </ul>
</nav>

ARIA and Semantic Attributes

Main Content

Add descriptive ARIA labels to main content sections:

<main id="content" aria-label="Main content">

Section Labels

Link sections to their headings using aria-labelledby:

<section class="new-stories" aria-labelledby="new-stories-title">
    <h2 id="new-stories-title">New</h2>
</section>

Semantic HTML Improvements

Header Structure

Logo and Site Title

Improve the header's semantic structure:

<header id="header" role="banner">
    <h1>
        <img src="./images/logo.svg" alt="" width="65" height="40">
        <span class="visually-hidden">News Homepage</span>
    </h1>
</header>

Article Structure

Image Handling

Replace Paragraph Tags

Convert image containers from <p> to <figure>:

<figure>
    <picture>
        <source
            srcset="./images/media/web-3-desktop@4x.webp 4x"
            media="(min-width: 768px)">
        <img src="images/media/web-3-mobile.webp"
             alt="A set of wooden and coloured geometric forms">
    </picture>
</figure>

Link Improvements

Descriptive Links

Replace generic "Read more" links with descriptive ones:

<a href="/web3-article" aria-label="Read more about The Bright Future of Web 3.0">
    Read more
</a>

Empty Links

Fix empty href attributes by adding proper destinations:

<!-- Instead of -->
<a href="">Home</a>

<!-- Use -->
<a href="/home">Home</a>

Je suis fr comme toi on peut se connecter sur linkedIn si tu veux. Bonne chance pour tes projets. Happy coding! 😊

P
webdevbynight•530
@webdevbynight
Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
No particular pride.
What challenges did you encounter, and how did you overcome them?
No specific challenges.
What specific areas of your project would you like help with?
Do not hesitate over giving feedback about accessibility if there are improvements in the way I implemented the validation errors and the toasted message.
Contact form - HTML, SCSS, TypeScript, RWD
#sass/scss#typescript
1
P
Julien Gilbert•500
@juliengDev
Posted 5 months ago
Accessibility Review for Contact Form

Hello! I was happy to review your code and hope it can help you improve your coding skills. Keep up the great work, and continue striving for better accessibility in your projects!
- Use of aria-label on <label> elements:
  The aria-label attribute is not necessary on <label> elements in the form, as the <label> element already provides an accessible name for the associated form control when correctly linked via the for attribute.
- Recommendation to Use autocomplete:
  Consider adding the autocomplete attribute to your form fields to improve the user experience and accessibility. It helps with:
  - Faster Form Filling
  - Consistency and Accuracy
  - Improved Screen Reader Experience
  - Better User Control
- Missing aria-hidden on Error Messages:
  It’s important to use aria-hidden="true" on error messages when they are hidden, to prevent screen readers from announcing unnecessary information. This ensures that only visible and relevant messages are announced to users.
- Good Use of aria-live="assertive":
  I noticed you used aria-live="assertive" for error messages. This is a great practice for ensuring that critical updates (such as form validation errors) are announced immediately by screen readers.
Other Recommendations:
- Use of <fieldset> for Grouping:
  You used <fieldset> to group the radio buttons, which is a good accessibility practice. It helps users understand the relationship between options and provides context when read by screen readers.
Hope it was helpfull see ya and happy coding 👾
Marked as helpful
P
Nate Valline•420
@nvalline
Submitted 8 months ago
What are you most proud of, and what would you do differently next time?
I'm pleased that I was able to complete the challenge to the design specifications while only using HTML and CSS.
What challenges did you encounter, and how did you overcome them?
I looked into animating the opening and closing of the `````` components, but was unable to achieve the results that I wanted.
What specific areas of your project would you like help with?
I would appreciate any suggestions for animating the `````` components or any other tips/suggestions to improve the quality of my code.
HTML & CSS Only
#accessibility
1
P
Julien Gilbert•500
@juliengDev
Posted 8 months ago
Hi @nvalline, Hope you are doing fine

Im going to try to anwser to the animation question you have.

This how i approach the problem myself :
1. I used CSS transitions for smooth animations, particularly on the max-height property.
2. Instead of toggling a hidden attribute, I manipulated the max-height of the panel:
  - For closed panels: max-height: 0px
  - For open panels: max-height: panel.scrollHeight + "px"
3. I added a CSS transition on the max-height property in our stylesheet:
```
.accordion-panel {
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}
```
4. In the JavaScript, I updated the toggleAccordion method to set the appropriate max-height:
```
if (expand) {
  panel.style.maxHeight = panel.scrollHeight + "px";
} else {
  panel.style.maxHeight = "0px";
}
```
5. I also added a visible class to control opacity for a fade-in effect:
```
.accordion-panel {
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.accordion-panel.visible {
  opacity: 1;
}
```
This solution provides a smooth animation when opening and closing accordion panels, addressing the challenge mentioned in the review. It combines CSS transitions with JavaScript manipulation of element properties to achieve the desired effect without relying on complex libraries or excessive code.

It might have another solution, but here is mine, hope it helps you to understand more the concept behind the effect.
Marked as helpful

View more comments

Julien Gilbert

Latest solutions

TicTacToe_React_TypeScript_Tailwind

BMI_Calculator_Typescript_Tailwind

E-commerce_product_page_HTML_SCSS_BEM_TYPESCRIPT

News_Homepage_HTML_SCSS_GRID_TYPESCRIPT

Contact_Form_Component_Typescript_Accessibility

FAQ_Accordion_Typescript_Accessibility

Latest comments

Tic-Tac-Toe Game Project

tailwindcss vuejs

Semantic Structure

Layout

Logic

E-Commerce Product Page using Less, Bem and vanilla Javascript

Code Review Report

Issues Identified

1. Cart Functionality

2. Layout Behavior

3. Mobile Version Issues

4. Accessibility Concerns

Recommendations

Feedback