Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 19 2020 20:09
    @krisb1220 banned @Gastony
  • May 14 2020 22:39
    @bjorno43 banned @minitechtips_twitter
  • May 14 2020 22:38
    @bjorno43 banned @real-action
  • Feb 01 2020 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 2020 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
Govind Rathi
@Kingpin23
what is this job attribute I have never heard of something
Abraham Anak Agung
@AbrahamAnakAgung
@Kingpin23 I never heard that one too. The way using custom attributes is by using data-*attribute.
Do Hoang
@huyhoang8398
hello, i just finished my first challenger about tribute page, can you guy give me some recommends
https://codepen.io/huyhoang8398/pen/GRgxrOL
and should we use boostrap or some UI framework to do these challenger?
Abraham Anak Agung
@AbrahamAnakAgung
@huyhoang8398 very nice :thumbsup: . My input for you is:
  1. I see you use id for styling, usually, we use class, since the class can be used by many elements. Not saying that you can't do this with id, but id is unique.
  2. for the border you can use short border notation, so like border: 1px solid black.
Do Hoang
@huyhoang8398
@padunk great, thank you so much for your recommendations
Doni Yafi
@yafiwebdev
@sjames1958gm Thanks! I'll check it out
notNewlyBorn
@notNewlyBorn
Hi , I am struggling to understand why mouseover or click does not work on a nested element , but instead it the event happens on a far parent/grandparent element. BTW this happens only on IE11 . Chrome works fine.
here is the html:
<button type="button" class="a-button-nostyle m-country-select"> <img class="a-image icon-flag"> <span>Germany</span> <div data-component="MDropdownFilter" class="m-dropdown-filter country-dropdown has-error is-open" data-component-id="jjj534jk34j5"> <input placeholder="Germany" class="a-input filter" type="text" required=""> <ul> <li class="ul-container"> <ul class="options"> <li class="a-option" aria-selected="true"> <a href="/content/p11/page.countryselector.de_DE.de_de.EUR.jsp?goeorguri=%2Fde_de%2Findex.htmltarget="_self" class="a-link is-multilanguage internal-link">German</a> </li> <li class="a-option"> <a href="/content/page.countryselector.en_DE.en_de.EUR.jsp?goeorguri=%2Fde_de%2Findex.html%3FdebugClientLibs%3Dtrue" target="_self" class="a-link is-multilanguage internal-link">English</a> </li> </ul> </li> </ul> </div> </button>
i am hovering over ul-container or a-option etc. but it shows the hover on the root button element
Jim Montgomery
@jimmont
is there a proposal/rfp/rfc (including deprecated one) for javascript module bare imports? like import 'React' and similar? I cannot find anything in my searching of github/tc39 and more general searches. Thanks. Found https://gist.github.com/jkrems/769a8cd8806f7f57903b641c74b5f08a#Future
Srinivasan
@kksrini89
Hello guys, Could anyone please review my Survey Form front-end projects. Your help would be appreciated.
Link
Mohammed Boudad
@matrixersp
@kksrini89 it looks good, except that it says (at the very bottom of the page) "#mocha div missing, add it to your document" when you run tests.
Kris Baillargeon
@krisb1220
Hey guys. Been a while :^)
Nooy90
@Nooy90

Hello. I am trying to use flex box. I have set display Flex to my nav section. I am then trying to justify-content: flex-end to my button, however it doesn't seem to be working.

https://codepen.io/nnoy01/pen/GRJqgoz

If anyone can tell me what I have wrong, would appreciate it. Its very basic code

Stephen James
@sjames1958gm
@Nooy90 Make sure that your container is the full width, if you don't give you container width flex-end really means little
Nooy90
@Nooy90
I have nav as the container, it is full width when I inspect element
Kris Baillargeon
@krisb1220
@sjames1958gm Because you have it wrapped in a <nav> element, you need to apply the display:flex and justify-content:flex-end to the <nav> instead.
@sjames1958gm Right now you have it applied to the .container element
I applied it to the <nav> and it looks like this. Not sure if that's what you wanted, but it is aligned to the flex-end
image.png
It should work if you literally just change the .container code block in your CSS to nav. Alternatively, you can just apply the .container to your nav element and remove the <div> altogether.
Christopher McCormack
@cmccormack
@krisb1220 I think you meant that for @Nooy90 no?
Kris Baillargeon
@krisb1220
Woops, yes I did! lol

@Nooy90 Let me know if that solves your issue

@sjames1958gm my bad!

Stephen James
@sjames1958gm
All good :)
Hope Huggles
@flowmid
Hi all, I'm used to software development but feel like a complete noob when it comes to CSS. I'm trying to slowly build my own site on the side while working through the FCC courses, and currently I've gotten close to making these ribbon buttons that I want but they could use some fine-tuning / some advice from someone more experienced on tips / better practices I'm likely overlooking.
Here's the codepen I'm practicing in: https://codepen.io/flowmid/pen/RwPGvrm
The goal with the ribbons currently is to fix the issue with how the squares which cut the ribbons line up (they get offset after the first one), and make it so that when I hover over a ribbon it gets larger, but without bringing the square that's behind it to the foreground. Anyone able to help with these?
Srinivasan
@kksrini89
@matrixersp test file is already added.
Martin Flischman
@MartinFlischman
Can someone please help me? I have been searching the net for a solution, watching YouTube tutorials and still can't find a solution. The list items/text just does not want to align to the left, between the Starting price and button. https://codepen.io/mdezigned/pen/KKpqqmz?editors=1100
hensn5250
@hensn5250
@Mdezigned This is the default CSS style for an unorder list element, <ul>.
As you can see below it has 40px of padding-left. To align its content to the left set padding-left to zero;
// <ul> default styles
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;

// from https://www.w3schools.com/cssref/css_default_values.asp
Kris Baillargeon
@krisb1220

@Mdezigned Quickest solution to any problem like this:

Learn how to use Chrome DevTools

Whenever I have a problem related to styling, CSS, or Javascript, the solution is almost always solved by popping over to Chrome DevTools. Namely, the "Select An Element To Inspect" saves my life all the time. I'll attach a GIF to show you how your problem could have been solved in less than 5 seconds using DevTools.

c7f99e8fd20f2cf485d71f57e99cedda.gif
If you see in the GIF above, I click the "Select an element to inspect" in the top left-hand corner. The button looks like a mouse-pointer with a box around it.
After that, I hover over the element in question
You can see that, to the left of the element, there's a big green box. This indicates that there's a padding-left of 40px preventing it from aligning correctly. Green indicates padding while yellow/orange indicates margin.
Also, you can see directly above the element there's a little info-box that pops up. This shows you most of the styling info related to that specific element.
Specifically, it shows you that element has a padding-left of 40px
To open Chrome DevTools you press: Ctrl+Shift+i". This opens it up for you, most likely at the bottom. I have it set up so that it opens up in a different window. This makes it so that it doesn't obstruct my view depending on where I place it on the screen, but that's up to you.
Kris Baillargeon
@krisb1220
While learning ANYTHING related to Web Development, DevTools is your best friend. When you're learning HTML/CSS, it allows you to inspect your elements visually. You can also make quick edits. While learning JavaScript, it lets you play around with your code and quickly experiment without having to console.log() everything. It gives you a MASSIVE leg up and will save you years over time.
I've definitely learned the most through projects; however, I've learned a hell of a lot by just playing around in the console. I've spent hours just tinkering with different things, and over time it's taught me more things than I can count. The best way to learn the console is to just play with it. But, there is a video that I recommend to anyone that doesn't know much about it.
alpox
@alpox
Sidenote: it is F12 to open devtools on some computers
Kris Baillargeon
@krisb1220
@alpox Thanks bro :D
Didn't know that!
Brad
@bradtaniguchi
I learned "programming" by pounding my head against the cmd on windows xp. Great to learn surface level stuff
Johnathon Sykes
@seesykescode
Doesn't seem like this channel gets a lot of action but I figured I put it here. How can I level up my design chops on my FEWD projects? I know enough to pass tests, but usually feel uninspired by what i end up putting out from a looks department.
Usually I go to other sites for inspiration and try to mimic that.
but is that really the way? "borrowing" from someone else until it's yours.
Brad
@bradtaniguchi
@seesykescode There are such things as "design languages", that provide specs and guidelines on how to make stuff look. An example would be Material Design, which is implemented by a lot of Google products so they all look similar
so "taking" a design isn't that bad, you actually end up making your product look more "familiar". You could also go out of your way to build your own design, but this usually is harder since you need an eye for design

All depends on what your goals are, if you want to be able to design your own UI's from the ground up then practice building stuff better via different techniques and what not like any artist. If you don't really care to much and are fine using existing designs then look into ones you could leverage and stick with it.

I personally totally suck at design and thus usually stick with an off the shelve UI lib and or UI guidelines. I'd rather build the functionality then design the UI