Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Joey Baker
@joeybaker
Alexander Praetorius
@serapath
looks nice. lots of stuff in there, so it'll take a while.
But while we are at it ;-) Is there an option to tell atomify to start in dev, production, test mode so that i can supply different configuration to it? (If not, what would be a neat way to approach that?)
Joey Baker
@joeybaker
hmmm… there is not
we do something like that
but we use atomify programatically
so it’s just a matter of sending it a different config based on process.env.NODE_ENV
Alexander Praetorius
@serapath
Atomify works through params on the command line and a config in package.json. Shouldnt the package.json support those kind of flags instead? But the atomify stuff in package.json slowly becomes quite big. Would it make sense to have a atomify.json file instead?
Joey Baker
@joeybaker
I’d vote for both options :)
we could look for an atomify.json file in addition :)
Alexander Praetorius
@serapath
Here is my current "standard atomify config":
  "atomify": {
    "server": {
      "open": true,
      "path": "index.html",
      "lr": {
        "verbose": true,
        "quiet": false,
        "port": 31337,
        "sync": true
      }
    },
    "js": {
      "entry": "SOURCE/index.js",
      "alias": "BUNDLE/bundle.js",
      "output": "BUNDLE/bundle.js",
      "debug": true,
      "watch": true,
      "transform": [
        "babelify"
      ],
      "standalone": "API"
    },
    "css": {
      "entry": "SOURCE/index.css",
      "alias": "BUNDLE/bundle.css",
      "output": "BUNDLE/bundle.css",
      "debug": true,
      "watch": true,
      "autoprefixer": {
        "browsers": [
          "> 1%",
          "IE 7"
        ],
        "cascade": false
      },
      "compress": false,
      "plugin": []
    },
    "assets": {
      "dest": "BUNDLE/assets/",
      "prefix": "/BUNDLE/assets/",
      "retainName": false
    }
  }
I forgot already what half of those options do and I already dislike that it consumes so much space in my package.json. I would really like to avoid yet another file, e.g. atomify.json in my repository, but I'm also afraid of making the package.json file even bigger.
What I would really like to see - but I'm not sure how that would affect atomify being used by dependencies of my module (e.g. recursive application of atomify to dependencies using their configuration) - is:
Alexander Praetorius
@serapath
I'll create my own cli tool, maybe called atomify-serapath or maybe just foobar and all it does is to require('atomify') and feed it my custom params and standard config files and standard dev, prod or test options. Of course, when creating atomify-serapath it's up to me whether I read that stuff from my package.json or create a seperate file or whatever... ...but that way I can hide all the config stuff that already became my personal standard or boilerplate inside of the cutom atomify-serapath module (and/or cli-tool)
It would be nice if an atomify-serapath module could use pure atomify modules as dependencies and atomify modules could use atomify-serapath modules as dependencies. I imagine the former part to be easy, but in order to make the latter part happen, it might require some conventions, so atomify knows what to do in case it encounters an atomify-serapath dependency :-)
Does that make sense to you?
Joey Baker
@joeybaker
It does. A separate module makes sense.
You’re kinda talking about the “shared configs” thing that eslint just did
Alexander Praetorius
@serapath

Hmm, not sure.
But I just realized, that in order for atomify to work on dependencies, it just needs the:

"main":"index.js",
"style":"index.css"

fields. Otherwise, i could probably very easily create my own cli tool atomify-serapath, that reads its own config and whatnot and executes atomify and then my projects would have a direct dev dependency atomify-serapath and no more atomify.

Alexander Praetorius
@serapath

Two questions:

  • Is anyone working on MacOSX? My girlfriend tried to run atomify but it only works if browsersync is not activated, otherwise it crashes.
  • Would it make sense to pass dev, prod and test env options as url params when opening the page?
Joey Baker
@joeybaker
@serapath at Getable, we’re all on macs, and browsersync works fine!
what version of node is she on?
I’m not sure what those url params would do?
Alexander Praetorius
@serapath
I just saw, that atomify-js supports envify, maybe i can use that. Otherwise i thought, maybe when atomify server opens, it could read an env file and append those to the url so i can read them in the app and fall back to defaults if not given
Alexander Praetorius
@serapath

In atomify.js - default transforms it mentions envify is supported by default. How can i make use of that? Using package.json has "scripts": { "start": "atomify" } and I couldnt find an examplenpm start --NODE_ENV develomentandNODE_ENV=development npm start` using

var mode = process.env.NODE_ENV;

in my index.js file doesnt work.
I also tried installing envify and adding it to the applied browserify transforms next to babel, but it's not replacing anything.
What do I need to do? Is it possible?

Alexander Praetorius
@serapath

but we use atomify programatically
so it’s just a matter of sending it a different config based on process.env.NODE_ENV

is there something on github? how do you do that?

Alexander Praetorius
@serapath
btw. #80
Alexander Praetorius
@serapath
otherwise, feedback is appreciated for envlocalify
Alexander Praetorius
@serapath

hey, i'm following the discussion around css-modulesify and css-modules in general. I'm currently using atomify and in css i make use of:

:root {
  --ComponentName-variableName1:  value;
  --ComponentName-variableName2:  value;
  --ComponentName-variableName3:  value;
  /* ... */
  --SubComponentName-variableName1: var(--ComponentName--variableNameX1);
  --SubComponentName-variableName2: var(--ComponentName--variableNameX2);
  /* ... */
}

My components define their css input through an INTERFACE as a set of --ComponentName-variableNameX: value.
If I re-use a component as a sub-component, I can customize/overwrite the defaults specified in the sub-component itself

My questions:

  • How to approach media queries?
  • What if my "css variables" change in response to media queries matching?
Alexander Praetorius
@serapath
:root {
  --Theme-font-size1             : 6.5vw;
  --Theme-font-size2             : 3vw;
  --Theme-font-size3             : 2.3vw;
  --Theme-borderwidth            : 4vw;
  /* Sub Components */

  --Markdownbox-font-size1             : var(--Theme-font-size1);
  --Markdownbox-font-size2             : var(--Theme-font-size2);
  --Markdownbox-font-size3             : var(--Theme-font-size3);
  --Markdownbox-borderwidth            : var(--Theme-borderwidth);
}
@media all and (min-width: 0px) and (max-width: 450px) {
  :root {
    --Theme-font-size1             : 6.5vw;
    --Theme-font-size2             : 3vw;
    --Theme-font-size3             : 2.3vw;
    --Theme-borderwidth            : 4vw;
  }
}
@media all and (min-width: 450px) and (max-width: 600px) {
  :root {
    --Theme-font-size1             : 6.5vw;
    --Theme-font-size2             : 3vw;
    --Theme-font-size3             : 2.3vw;
    --Theme-borderwidth            : 4vw;
  }
}
doesn't seem to work. I'm not aware of parameterization in css-modules and couldnt find anything related to media queries. How could I approach this instead?
Joey Baker
@joeybaker
yea… the css vars polyfill is limited. You can’t change css variables in a media query until CSS4 supports it :(
it really sucks.
My suggestion is to use JS to switch class names at certian breakpoints :(
Alexander Praetorius
@serapath
do you have an example or repository where you do that to have some inspiration?
Are there thoughts around css-modules how to approach that? I opened an issue there.
And next to it, i'm also following a discussion around container queries and wonder if css-modules have any thoughts on that.
Alexander Praetorius
@serapath
I tried to engage here: ResponsiveImagesCG/container-queries#2
Joey Baker
@joeybaker
we just switched to using css modules and have liked it so far
yea… I’m excited by container queries
Alexander Praetorius
@serapath
Haven't switched yet, but will try in the next weeks. Do you have a simple public component that uses css modules to take a look at and be inspired on how it works? :octocat:
Joey Baker
@joeybaker
hmm… no, sorry, nothing pubic yet :( We just started this week.
Kevin Coffey
@kevdougful
I'm not able to npm install atomify as it references an abandoned npm package: prettify-error