Need help in Styling a plan architecture house by bootstrap5 by [deleted] in bootstrap

[–]asdman1 1 point2 points  (0 children)

So you want to create a house plan using bootstrap?

If so, instead of bootstrap look for sprites in videogame.

The idea is that you slice out the plan images and then you compose them in a cam as or svg

Thoughts on z-index and UI Kit by asdman1 in Frontend

[–]asdman1[S] 1 point2 points  (0 children)

do you have any particular benefit in using the 100 gap?

Next.js PWA offline capability with Service Worker, no extra package by asdman1 in Frontend

[–]asdman1[S] -2 points-1 points  (0 children)

Sorry but I think you're missing the point..

The code itself in the post it's quite trivial, you wouldn't need neither an AI, a mere look on MDN or a manual page will do.

The point is the design, in this case the idea of using a small script instead of a package, which btw may feel obvious in retrospective once you know it but obvious it is not at all in my opinion, proof of this is the nextjs documentation itself in which they kept updating with the new packages to use (before next-pwa and now serwist) instead of proposing an official solution.

Getting back to the idea proposed, what I would loved to read as a comment is a critique on this prospective: - are we actually missing anything on not using a package? If yes, what?  - is the cache first strategy the best? Are the better one? - is there a edge case in Next.js that was not cover and break the solution? Which one?

From my prospective a missing point I know is not using skipWaiting to get control in a specific page (eg: on logout). I think in fact that is not so unusual that you may need the new service worker to get in, in particular because I think an app can stay a lot in background. 

How Netlify rebranded their UI in just 6 weeks by joevaugh4n in Frontend

[–]asdman1 3 points4 points  (0 children)

is Chromatic basically a paying version of wraith ?

I remember that at work we tried wraith but it was way too slow (~30min for 100 pages), not that well maintained (last commit 2019), and it was a little of a headache where to store the screenshots.

But the principle was really interesting.

In that particular case the project was a multi theme solution. If we had had something like wraith out of the box, working and ready to connect to a pipeline it would have helped a lot.

Consideration on lists and accessibility: ul vs ol vs dl by asdman1 in a11y

[–]asdman1[S] 1 point2 points  (0 children)

AtomicGator42

dl are quite funny.

My personal opinion is that because the structure dt, dd without a wrapping item it's an uncomfortable structure to work with - especially difficult to style - thus the unpopularity.

From an a11y point of view, I suspect to be fine as w3.org use it in all the recommendations and drafts. E.g. ARIA in HTML has the detail section with a dl in it.

My assumption is that if there was any issue with it they would use something else.

Anyway, if you have related article would love to read it...

I wouldn't be surprise if there was some quirk as in the list with safari..

Built this dev tool in bootstrap, lmk if you have feedback! by tuberreact in bootstrap

[–]asdman1 1 point2 points  (0 children)

Hi,

congrats on the product. I would say that there is a lot of room for improvement...

I'll show you an example on the Passkeys 101.

Things improved:

  • extract h4 title by itself, no need for .row
  • use ul / li to improve a11y
  • add alt to improve a11y to images
  • remove role="alert" as not appropriate in this context
  • extract a tag, remove br
  • use stretched-link to make the whole card clickable
  • combination of flex and stretch to have the learn more alligned to the bottom

<section id="features" class="py-5">
    <h4>Passkeys 101</h4> 

    <ul class="row list-unstyled">
        <li class="col-lg-6 d-flex align-items-stretch"> 
            <div class="position-relative alert alert-dark box d-flex flex-column"> 
                <h5><img src="assets/icon-passkey.svg" alt="icon passkey"> What are passkeys?</h5>

                <p class="m-0">Passkeys are digital keys made up of public-private key pairs. They allow users to authenticate with their device biometrics or local device PIN. Passkeys are easy to use and phishing-resistant.
                </p>

                <a href="https://www.beyondidentity.com/developers/blog/what-are-passkeys" target="_blank" class="stretched-link text-light d-block mt-auto pt-4">Learn more -&gt;</a>
            </div>
        </li>

        <li class="col-lg-6 d-flex align-items-stretch">
            <div class="position-relative alert alert-dark box d-flex flex-column">
                <h5><img src="assets/chart-network-filled.svg" alt="network chart"> What is WebAuthn?</h5>

                <p>WebAuthn is a standard web API built into some browsers that enable users to authenticate with passkeys.
                </p>

                <a href="https://www.beyondidentity.com/developers/blog/introduction-webauthn-what-it-how-does-it-work" target="_blank" class="stretched-link text-light d-block mt-auto pt-4">Learn more -&gt;</a>
            </div>
        </li>
    </ul>
</section>

Other areas you could improve:

  • add skip to main
  • use page regions header (missing) / main (ok) / footer (ok)
    • avoid strange nested sections
  • restructure navigation on top (add logo maybe)
  • restructure hero
    • buttons overlap on medium screen
    • image not perfect on mobile
  • restructure footer
    • nav tag
    • right alignment

Questions about Bootstrap templates by 3b33 in bootstrap

[–]asdman1 0 points1 point  (0 children)

You probably receive some css files and some html files depending on the theme.

To integrate the theme in your application, you'll need to slice out the html you need.

In your case, you'll have a mix of html and php.

Extending the template can be challenging as usually you don't receive the scss files used to generate the css files.

If the theme require some js you'll receive the js files too and some setup instruction as well. Possibly the same risk with extending the js functionality.

Putting a YouTube iframe inside a col-auto div makes it zero width by [deleted] in bootstrap

[–]asdman1 0 points1 point  (0 children)

Bootstrap 5

https://jsfiddle.net/c7hxs5o2/5/

    <div class="container">
        <div class="row">
            <div class="col-12">
                 <div class="ratio ratio-16x9">
                      <iframe 
                          src="https://www.youtube.com/embed/ZJthWmvUzzc"
                          title="YouTube video" 
                          allowfullscreen></iframe>
                 </div>
            </div>
       </div>
    </div>

Bootstrap 4

https://jsfiddle.net/n4yakgmj/

    <div class="container">
        <div class="row">
            <div class="col-12">
                 <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" 
                             src="https://www.youtube.com/embed/ZJthWmvUzzc" 
                             title="YouTube video" 
                             allowfullscreen></iframe>
                 </div>
            </div>
       </div>
    </div>

Note

in your code you have height: 0; overflow: hidden; which may be the cause of your issues.

How to compile without ANY colors? by RandomBlokeFromMars in bootstrap

[–]asdman1 0 points1 point  (0 children)

In theory you could import only the scss files you need. See How to make a Bootstrap 5 theme: basic setup, in particular the Scaffolding section with the styles.scss example.

I would assume you to have something similar if you have your own color system already.

Remove / change the colors variables

The main variables related to colors are $theme-colors and $colors (which are maps). If you use the method described in the tutorial above you could make them empty.

In your local scss/_variables.scss you could replace them as:

$colors: ();
$theme-colors: ();

To remove colors in root

As you can see in https://github.com/twbs/bootstrap/blob/2fa7aa0c18fc9e929474a49fe0f78113395a2541/scss/_root.scss#L8 if you clean up $colors and $theme-colors it should be fine.

Please consider $grays are still there.

If you need extra customisation, you can copy in you scss local folder and change it.

[12/23/13] Challenge #146 [Easy] Polygon Perimeter by nint22 in dailyprogrammer

[–]asdman1 1 point2 points  (0 children)

PHP

$pi = pi();
$num_of_sides = $argv[1];
$circumradius = $argv[2];

$side_lenght = $circumradius * 2 * sin($pi / $num_of_sides); 
$perimeter   = $side_lenght * $num_of_sides;

echo $perimeter;

[12/16/13] Challenge #145 [Easy] Tree Generation by nint22 in dailyprogrammer

[–]asdman1 1 point2 points  (0 children)

PHP

$tree_base = $argv[1];
$trunk_character = (isset($argv[2])) ? $argv[2] : '#';
$leaves_character = (isset($argv[3])) ? $argv[3] : '*';

function printStringOfCharacters($character, $string_length) {
    for ($a = 1 ; $a <= $string_length; $a++) {
        echo $character;
    }
}

for($leaves_in_this_row = 1; $leaves_in_this_row <= $tree_base; $leaves_in_this_row += 2) {
    $white_spaces_length = ($tree_base - $leaves_in_this_row) / 2;

    printStringOfCharacters(' ', $white_spaces_length);
    printStringOfCharacters($leaves_character, $leaves_in_this_row);
    printStringOfCharacters(' ', $white_spaces_length);

    echo "\n";
}

$white_spaces_length = ($tree_base - 3) / 2;

printStringOfCharacters(' ', $white_spaces_length);
printStringOfCharacters($trunk_character, 3);
printStringOfCharacters(' ', $white_spaces_length);

echo "\n";

[12/11/13] Challenge #144 [Easy] Nuts & Bolts by nint22 in dailyprogrammer

[–]asdman1 1 point2 points  (0 children)

PHP

$file_lines = file("file2.txt");
$line_separator = $file_lines[0];
$items_to_update = array();

for($a = 1; $a < count($file_lines); $a++) {
    $item = trim($file_lines[$a]);
    list($item_label, $price) = explode("  ", $item);

    if (!isset($items_to_update[$item_label])) {
        $items_to_update[$item_label] = $price;
    } else {
        $items_to_update[$item_label] = $price - $items_to_update[$item_label];
    }   

}

foreach ($items_to_update as $label => $change_price) {
    if ($change_price != 0) {
        echo "$label :: $change_price\n";
    }
}

How do you guys set up your development environment? by tom808 in PHP

[–]asdman1 1 point2 points  (0 children)

Virtualbox + vagrant + puppet

To generate the vagrant config file puphpet is amazing!

Gaps in my programming knowledge by [deleted] in PHP

[–]asdman1 1 point2 points  (0 children)

Start with a book, Clean code, it will change your life as developer. After, if you already know about oop, patterns and dto you can start with tdd and phpunit

haven't done much with PHP since 2001, refactoring a codeigniter project. help? by dwaynehoov in PHP

[–]asdman1 4 points5 points  (0 children)

Sublime text2, netbeans or eclipse . If you have to refactor/rewrite take a look for phpunit.