1. 1

    Why is it a class though?

    1. 1

      What’s the problem?

    1. 1

      Generator are one of those things that I consider “programming voodoo”. I dont mean that as a negative, they just check off those boxes:

      • They can solve niche problems in a unique and sometimes better way
      • I dont understand how they work
      • I dont understand when they would be useful

      The only example ive come across as a “real world example” is merging a Map. You can do this already with spread syntax:

      new Map([...m1, ...m2]);
      

      or you can do it with a generator:

      new Map(function*() {
         yield* m1;
         yield* m2;
      }());
      

      the generator syntax is way more verbose, but it just looks interesting, like it has the potential to do some cool stuff in other cases.

      1. 1

        There is no need to fully understand generators to use the package, as you can see inside the TRY ME section. Anyway I suggest you to spend some time to study them if you don’t understand them. #ydkjs series of Kyle Simpson explain them very well

        1. 1

          Generators represent lazily computed collection of values. I’d suggest looking at several examples of problems they help solve elegantly: prolog interpreter that uses generators for yielding results, or a simpler variant of that use case: sudoku solver.

          Generators are also more “basic” than async functions (so that async functions can be implemented using generators) but because generators are more basic they can be used to abstract away whether an algorithm is async or sync (for example you select async version when working with files and streams and sync version when working with memory that is immediately available). See more details here.

        1. 2

          The triple dot immediately followed by the conditional is visually ambiguous. Would be more clear to add parentheses.

          1. 1

            I wish the article would have explained what the triple dot operator even does (as well as its precedence level) so I could verify for myself that the proposed solution works. Don’t just hand me your code — teach me something.

            1. 2

              the triple dot operator is not a “normal” operator…it does not have a precedence. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence

              An operator takes a value and produce another value…like +“5” that takes “5” and produce 5. Binary operators take two values, the ternary takes three values but the result does not change: a single value is produced.

              On the contrary you cannot simply do: …expression; nor …value; The array spread operators does expand an array, it does not produce a value…the expression is evaluated and then the resulting values is expanded. Many values are produced. The object spread operator does shallow clone an object, it does not produce a value as well. As I described in the article, the expression will be evaluated and THEN the object spread will perform its copy job. The rest operator takes one or more values and THEN it will insert them into an object/array. Again, there is no resulting value.

              We call the rest/spread … operators because, in fact, them perform an operation. But they are quite different from operators in general…they do not interfer.

            2. 1

              AirBnB style guide imposes them, so If you prefer put them on :)

            1. 1

              This is the approach that Vue is getting in the next big iteration (on the branch that ditches IE11 support).

              Interesting work :)

              1. 1

                Thanks! I’ve tested it, but it is quite slow. I’m looking for ideas to improve it.

                1. 1

                  Any links to learn more about this? Curious if it has speed issues like @jfet97 mentioned.

                  1. 1

                    I’ve studied Proxies on MDN. I’ve tested it againts a simple Rxjs code and there is too much difference.

                1. 2

                  Pretty cool. Nice example of using both generators and async/await in your async examples. I think generators are underappreciated in general.

                  I did a similar experiment that used what MDN calls “Advanced Generators” to push values to the next generator in a chain instead of pulling through as iterators. Just a slightly different take that you might find interesting.

                  1. 1

                    Advanced Generators

                    Nice one! Good work. However I’ve tested my implementation against somehing like transducers.js because I knew that yield is still a slow operation. And unfortunately them are slow. Much better with Chrome (40% faster than Firefox) but too slow. For now ;)

                  1. 1

                    What is neat about this, is it’s a great example of using generators to achieve this.

                    I think the package could be even simpler - I might give it a try for fun. :) Nice work!

                    1. 1

                      thanks!!!

                    1. 3

                      The site/repo doesn’t seem to have a demo of it in action (outside of the simplest layout) – but the medium article linked from the repo has a video of a card-like layout: https://medium.com/@andreasimonecosta/strawberry-a-new-flexbox-based-css-micro-framework-42ff9be49468

                        1. 1

                          Yes, I’ll add some examples in future…thanks for sharing this article!

                        1. 20
                            Maybe
                          
                          
                            Less
                          
                           
                            Spread out?
                          
                          1. 1

                            no ahahahha

                          1. 4

                            There’s not much to see so it’s difficult to judge. I think it was Bootstrap that started the trend of a-lot-of-dashes which I’m not a fan of (although it’s a very popular style of writing CSS).

                            I would highly encourage anyone who is looking to switch to a Flexbox layout to first learn how to use it (and there is a lot to learn) and then using a framework like this if it seems more convenient.

                            Of course the spacing on the example website is no bueno, but I know that’s in part because you haven’t finished the content part of it yet.

                            1. 1

                              Yes, you first should know what is Flexbox, then you can use my framework to speed up your work.

                              About spacing…I want this spacing to separate items, but the framework does not create it…it’s mine style. Remember, Strawberry does not add graphic style.

                            1. 2

                              I don’t want to poop on your work or anything; thanks for writing it and sharing it with the community.

                              That being said, if I migrate any of my existing sites or create something new, I’m going to do it in CSS Grid and I suggest everyone else does to. CSS Grid is a standard, and it allows you to do a lot of really complex layouts and not need crazy div classes or tags anywhere.

                              The only reason to create a new site with a CSS framework today is if you need to support IE11. Everything else has supported CSS grid for at least a year. Browsers are moving faster today and we no longer have to wait for the IE6 catchup game.

                              1. 2

                                Yes but don’t think that CSS Grid can do everything. Maybe this video can help you…I think you should know who she is https://www.youtube.com/watch?v=hs3piaN4b5I