Describe the bug

404 - Page not found

Steps to Reproduce

1. Go to 'My Top 3 Favorite FREE JavaScript Courses'
2. Scroll to 'Up & Going with JavaScript'
3. Clink 'Link'
4. Get 404

Expected Behavior

Expected to be redirect to 3rd free JavaScript Course by Up & Going

Screenshots

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Device Affected

• Mobile
• Tablet
• Computer

Netlify CMS

Respected developer/owner of this amazing website. I want you to add Netlify cms to this website so it will be easy to post blog posts directly from browser /admin. It will be easy for you too and me hehe.
Thanks

Describe the bug

Its not a BUG its a suggestion
Change the Flexbox 30 Days numbering to TidBits counting.
Since all the content its there the days counting its a little strange

Instead of

Day 1: Introduction

TidBit 1: Introduction

or

FlexBox TidBit 1: Introduction

First things first, tidbits are amazing. I just love to read them. It is like mini version of MDN docs with really good explanation. Thank you.

Feature Description

Smooth scroll in your page.

Additional context

I was just going through this link
https://www.samanthaming.com/tidbits/43-3-ways-to-remove-array-duplicates/#_3-using-reduce

You have a table of contents. I clicked on to see the reduce method, and it took me there but not in a smooth way.

So small suggestion to make it smooth is to add the following line of styling in css.

* { scroll-behavior: smooth; }

Feature Description

One thing I love about web-apps are the subtle transitions and animation, they look small but greatly improve the overall UX of the app.

I would love to see you add some kind of transitions / animations to the site, like the cards sliding in, or the big Headers being eased in.
I'm attaching few of the resources for you to go over as well

Animate CSS
https://daneden.github.io/animate.css/

Anime.js
https://github.com/juliangarnier/anime

Vue.js Examples
https://vuejsexamples.com/vuejs-plugin-for-creating-epic-sequential-animation-entrances/

Popmotion
https://popmotion.io/pose/

Hello!
I read the entire Flexbox30 (thanks) and when I went to the sponsors page I noticed a typo in the link to the contact page, here: _* If you know any of these people, please contact me_

The link to the contact page goes here: https://www.samanthaming.com/sponsor/contact

Instead of here: https://www.samanthaming.com/contact

PS. I'd love to help you with your podcast.

Tagged Template Literals

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged_templates

• Tidbit
• Article
• Video
• Podcast

When I clicked, in an Social Media link from the aside element, it sends me to a 404 No Found Page. The Social Media links work in contact page; nav and footer elements work well too.

Example

If the <a> element for Github contains this link, https://www.samanthaming.com/about/https:/github.com/samanthaming/, it leads to a 404 No Found page.

Expected Behavior

I expected it to direct me the social pages as happened on the other elements (nav and footer).

Screenshots

Aside Element in About Me Page ❌

404 No Found Page ❌

Contact Page ✔️

Fix Suggestion

Double check to understand why is this happening. I did not have success on my end by editing on Chrome DevTools.

<a href="https://github.com/samanthaming/" class="flex items-center hover:text-fuscia hover-transition-fast hover:underline">

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Device Affected

• Mobile
• Tablet
• Computer

Describe the bug

Go down and start scrolling horizontally on Top TidBits. And then try to scroll vertically. It doesn't allow me to scroll vertically anymore.

Steps to Reproduce

Go down and start scrolling horizontally on Top TidBits. And then try to scroll vertically

Expected Behavior

Screenshots

Fix Suggestion

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Device Affected

• Mobile (Pixel 3)
• Tablet
• Computer

Feature Description

It will be great if I can install your web app on mobile.

hi

this article doesn't deal with negative numbers, unfortunately. You do cover positive numbers, so this seems a gap.

https://www.samanthaming.com/tidbits/19-2-ways-to-convert-to-boolean/

thx!

Topic

Hi Samantha, first of all kudos for such an amazing website. ✨

You had shared an article on why you moved to Vuepress from Nuxt. Currently, I am also using Nuxt Content.

I see that on this current repository of yours that you only have articles, and not your website code. (I assume you have your website code in a separate private repository). So, my kind request is can you write a post on how you have set up your Github repositories? 😄

Topics / Need for such post?

1. Currently, I have all my code + markdown files in a single repo on Github. But I only want to keep my articles public, and keep my code private. 😋
2. The set up should be something like this...

• In private repo A, all my code + md files should stay. In public repo B, only my md files should stay.
• This way I can still static generate my website from repo A and deploy it.
• When I edit my articles on repo A, I should also be able to commit and push into both repositories. But with such push, only articles should be updated in repo B, and not the entire code of repo A should get copied to repo B.

Or

1. do you edit your articles on this current repo and then fetch your posts via Github API and do some parsing or something like that?
2. do you use Git submodules?

References

1. Your own Git set up.
2. using git remote --set-url

Category

• Article
• Video
• Help

Thanks in advance 💛

To tackle repeating utility classes you can use @apply as suggested in this article:

<button class="btn-gray">
  Button
</button>

<style>
.btn-gray {
  @apply bg-gray text-white font-bold py-2 px-4 rounded;
}
.btn-gray:hover {
  @apply bg-gray-dark;
}
</style>

So I would suggest that you can improve this part of your article by using @apply to tackle the repetition of css utility classes.

Describe the bug

Hi Samantha,

Of course I had to had a look to your "hacker news" link since your article gave me the idea to add it to my web component ;)

Doing so I noticed that all your social links have an attribute title which contains something here. I'm guessing that it isn't the expected behavior.

Steps to Reproduce

See screenshot.

Expected Behavior

I'm guessing a text like Share this article on .... instead of the placeholder something here.

Screenshots

Image preview does not close

When you click on the image it expands, but it does not close if you move the scroll

Steps to Reproduce

Click on the dark area

Example:

1. Go to any site that contains an expandable image
2. Click on the image to expand and then in the dark area around the image

Expected Behavior

The preview works correctly as long as you do not click on the dark area, you can open any image and if you scroll the scroll it will close

Screenshots

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Device Affected

• Mobile
• Tablet
• Computer

Topic

References

Category

• Tidbit
• Article
• Video
• Podcast

Don't forget to apply a Label if applicable

No transitions

There should be transitions to give a visual experience. Now it looks like it's getting bumps while navigating between pages

Topic

References

Category

• [ x ] Tidbit
• Article
• Video
• Podcast

Don't forget to apply a Label if applicable

Topic

Hi,

First think, website https://www.samanthaming.com/ is very informative. But I would like to share some UI changes.

Please focus on font-size and description content. images sizes should be minimum as per content size. If I go to particular topic ..lets say css display property then page should show all the details of display property. I can see very few information available on page. font-size not properly managed. images are very lengthy.

Would like to see new tutorials on ES6...ES2020, SASS
SVG, Advanced javascript concepts.

References

Category

• Tidbit
• Article
• Video
• Podcast

Don't forget to apply a Label if applicable

Describe the bug

On mobile, if you scroll far enough in a code block, it will activate the side menu. Probably because the swipe to open action is active on the entire page which makes sense, but should probably be ignored in certain areas.

Steps to Reproduce

1. Mobile Phone
2. Go to any article on the site, for me 3 ways to clone objects in javascript
3. Go to any code block that has horizontal scroll (doesn't wrap), for me 3. Using JSON
4. Scroll to the right inside the code block (it's hit or miss sometimes but can be reproduced a good amount - but try and stay inside the code block when swiping, sometimes a small swipe works, sometimes it has to be a long swipe, sometimes you have to give it like 2 seconds and then try again (lol))

Expected Behavior

I expect that elements that have horizontal scroll on mobile will not activate any menus

Screenshots

None

Fix Suggestion

This isn't specific to Vue, I would assume its a common issue in JS and HTML. I haven't taken a look at the code and if I manage to figure it out I'll PR it but this can remain open to anyone. I guess you could stop propagation from bubbling up or prevent default on swipes on that class?

Browsers Affected

• Whatever Instagram App built-in browser is
• Mobile Safari
• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Device Affected

• Mobile
• Tablet
• Computer

CSS Grid Layout

• Tidbit
• Article
• Video
• Podcast

Don't forget to apply a Label if applicable

Feature Description

RSS feed

Additional context

please add RSS feeds to the web so I can monitor from applications like feedly

Topic

CSS Grid Layout

References

https://css-tricks.com/snippets/css/complete-guide-grid/

Category

• [x ] Tidbit
• Article
• Video
• Podcast

Don't forget to apply a Label if applicable

Describe the bug

The scroll bar in the mobile hamburger menu looks like of 1980s.

Steps to Reproduce

.sidebar::-webkit-scrollbar {
width: .7em;
}
.sidebar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.sidebar::-webkit-scrollbar-thumb {
background-color: #333;
outline: 1px solid #ea0000;
border-radius:5px;
}

Expected Behavior

Screenshots

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Device Affected

• Mobile
• Tablet
• Computer

#70

Hi Samantha Ming,
It's a nice experience if you enabled your website with the progressive web app. (like https://alligator.io/)

Best regards - Sujeet Jaiswara

Feature Description

https://www.samanthaming.com/tidbits/35-es6-way-to-clone-an-array/

I'd like you to add a suggestion for cloning arrays with levels, and objects that are complex.

Additional context

I am adopting a best practice for all cloning situations:

this.pageListOrObjectWithLevels = JSON.parse(JSON.stringify(someListOrObjectWithLevels));

It may be heavy but in Web Components (salesforce Lightning Web Components) it solves a lot of issues with the page not getting updated.

I was reading your array flatmap article, it was well designed but I found little bit distracting by the side designs on the right side.
Particularly TidBits panel, it would have been much nice if there is a border (or background color difference) between main article and side suggestions.

Hi Samantha.
I wanted to get this issue understanding clear.
I have this object original. I clone it to duplicateState.
But if I am updating the clone's zeroth index value by adding 1, it is updating the original too?
And how do I update the clone's zeroth index therefore?
const original = {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
console.log(original);

 const dupliacteState = [...original.counters];
 dupliacteState[0].value++;
 console.log(original.counters[0]);

Object.create(null) produces empty objects that don't get detected as such because their constructor is undefined.

I believe these can be handled with something like the following

isEmptyObject = (o) => (typeof o === 'object') && o && !Object.keys(o).length && [undefined, Object].includes(o.constructor)

Category

• Tidbit

Feature Description

Any chance you can implement an RSS feed for your site?