- May 2024
-
www1.villanova.edu www1.villanova.edu
-
The content needs to be grounded instated course learning goals and be organized into content segments/modules.a. Structure the course to support the learning goals.b. Arrange the course content in a linear, logical structure, and organize the content intomanageable segments/modules.c. Use consistent organizational structure, color scheme, and textual components throughoutthe course to help students navigate the course.d. Provide course materials (graphics, media, documents, etc.) in accessible formats (ADACompliance for Online Course Design).
Course organization
-
-
www.researchgate.net www.researchgate.net
-
For completing tasks such as reading instructions, submit-ting an assignment, and posting to the discussion board,a chronological layout was more efficient. Figures 7 and 8are an example of individual participant’s gaze plot for eachgroup while completing the second task of reading the assign-ment instructions. The visualizations show that when giventhe instruction to complete a task by week or module, thechronological layout was more compelling at guiding partici-pant’s visual attention to the weekly modules on the naviga-tion menu. Not to mention, those in the Chronological groupcommitted fewer mistakes than participants in the Functionalgroup for all instructional activities, with the exception oflocating grades.What was les
to find instructions, and assignments and discussion boards - modules was the most effective.
-
-
files.eric.ed.gov files.eric.ed.gov
-
Students need space and structure thatwill invite them to engage actively
reason for modules, Invite student engagement.
-
- Mar 2024
-
yarnpkg.com yarnpkg.com
-
when projects want to keep strict boundaries within their code and avoid becoming an entangled monolith. This is for example the case for Yarn itself, or many enterprise codebases.
-
- Sep 2023
-
www.uclaextension.edu www.uclaextension.edu
-
- Dec 2022
-
go.dev go.dev
-
In the workspace directory
the workspace directory
Tags
Annotators
URL
-
- Nov 2022
-
stackoverflow.com stackoverflow.com
-
You're likely not using "type": "module" in your package.json, so import statements don't work in svelte.config.js. You have three ways to fix this: Use require() instead (also see https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md#generic-setup) Rename svelte.config.js to svelte.config.mjs Set "type": "module" in your package.json (may break other scripts)
-
- Nov 2021
-
stackoverflow.com stackoverflow.com
-
-
The consumer component will barely change from our last example. The only difference is the way we'll get a reference to our store (since now the store is exported from the JS module):
-
Now your whole WS logic can be encapsulated in your JS module. That makes for good separation of concern.
-
Stores are the idiomatic Svelte way when you need to import "reactivity" from your normal JS sources.
-
- Jul 2021
-
github.com github.com
-
Auto-Detect & install BigCommerce's stencil-cli Auto-Detect & install Meteor Auto-Detect & install Shopify's themekit
Simpler option: https://github.com/apollographql/apollo-server/blob/main/.envrc
-
- May 2021
-
github.com github.com
-
It's a chicken-and-egg-like problem: If we use module: 'commonjs', then if any TS files import ES Modules (indirectly in their dependency graph), then Node throws an error because CommonJS modules can not import ES Modules.
-
-
blog.sindresorhus.com blog.sindresorhus.com
-
CommonJS has served us well for many years, but ESM comes with many benefits, like language-level syntax, browser support, defaults to strict mode, async loading, top-level await, improved static analysis & tree-shaking, and more.
-
- Apr 2021
-
stackoverflow.com stackoverflow.com
-
It seems inelegant to me to split this into two different modules, one to include, the other to extend.
the key thing (one of them) to understand here is that: class methods are singleton methods
-
Another possible solution would be to use a class Common instead of a module. But this is just a workaround.
-
- Mar 2021
-
medium.com medium.com
-
There’s several benefits to splitting code into multiple packages, whether it be a library, micro-services or micro-frontends.
-
-
www.chevtek.io www.chevtek.io
-
But I believe the core philosophy of tiny modules is actually sound and easier to maintain than giant frameworks.
-
"Functions Are Not Packages" - Well why not?
-
Small modules are extremely versatile and easy to compose together in an app with any number of other modules that suit your needs.
-
Write modules that are small. Iterate quickly.
Tags
- sound/reasonable/wise/defensible
- small units/components/modules/libraries/packages/projects
- microlibraries
- easy to maintain
- why not?
- composition
- allowing developer/user to pick and choose which pieces to use (allowing use with competing libraries; not being too opinionated; not forcing recommended way on you)
- core/guiding beliefs/values/principles/philosophy/ideology
- micropackages
- making changes / switching/migrating gradually/incrementally/step-wise/iteratively
- monolithic/giant modules/libraries/packages/projects
- composability
Annotators
URL
-
-
inst-fs-iad-prod.inscloudgate.net inst-fs-iad-prod.inscloudgate.net
-
Because the diagrams are .independent of one another, you can study them and improve them one at a time, so that their evolution can be gradual and cumulative. More important still, because they are abstract and independent, you can use them to create not just one design, but an infinite variety of designs, all of them free combinations of the same set of patterns.
This also applies to [[modules]] in computer systems; and to [[functions]] in programming languages in the functional paradigm (as these are self-contained and side-effect-free).
-
- Nov 2020
-
github.com github.com
-
Microbundle also outputs a modern bundle specially designed to work in all modern browsers. This bundle preserves most modern JS features when compiling your code, but ensures the result runs in 90% of web browsers without needing to be transpiled. Specifically, it uses preset-modules to target the set of browsers that support <script type="module"> - that allows syntax like async/await, tagged templates, arrow functions, destructured and rest parameters, etc. The result is generally smaller and faster to execute than the esm bundle
-
-
-
If I use import { createEventDispatcher } from 'svelte/internal'; instead of import { createEventDispatcher } from 'svelte'; then it seems to work because it's loading from the same module.
-
-
-
is not required to point to "svelte": "src/main.html" if you're bundling for es, "module": "dist/main.mjs" would suffice. I mean, it's a good thing to provide a single file, not the whole sources again.
Tags
Annotators
URL
-
-
github.com github.com
-
But seriously, give snowpack a read to understand the benefits of leaning on standard esm imports, allowing you to avoid a bundling process entirely.
-
I don't need to support non-esm browsers for most projects and I really like the idea of a super light build process. By removing the complexity of configuration and the overhead of bundling, svelvet makes the development process an optimal experience for myself and hopefully others
-
-
www.snowpack.dev www.snowpack.devSnowpack2
-
It replaces heavier, more complex bundlers like webpack or Parcel in your development workflow.
-
-
-
css-tricks.com css-tricks.com
-
-
Using as * adds a module to the root namespace, so no prefix is required, but those members are still locally scoped to the current document.
distinction:
- root namespace (so no prefix is required), but
- locally scoped (to the current document)
-
- Oct 2020
-
-
But it sounds like the library could use some way to setTouched()
-
-
medium.com medium.com
-
withindex.js, we have a single source of truth, giving fine grained control on what we expose to the outside world.
-
The index.js file is the main entry point and imports and exports everything from internal.js that you want to expose to the outside world.
-
-
github.com github.com
-
Doing so also means adding empty import statements to guarantee correct order of evaluation of modules (in ES modules, evaluation order is determined statically by the order of import declarations, whereas in CommonJS – and environments that simulate CommonJS by shipping a module loader, i.e. Browserify and Webpack – evaluation order is determined at runtime by the order in which require statements are encountered).
Here: dynamic loading (libraries/functions) meaning: at run time
-
Replaced nested `require` statements with `import` declarations for the sake of a leaner bundle. This entails adding empty imports to three files to guarantee correct ordering – see https://github.com/styled-components/styled-components/pull/100
-
-
www.npmjs.com www.npmjs.com
-
it’s transferred to ES Modules and CommonJS format.
Tags
Annotators
URL
-
-
github.com github.com
-
browserify is a tool for compiling node-flavored commonjs modules for the browser.
-
-
deno.land deno.land
-
Uses "ES Modules" and does not support require(). Third party modules are imported via URLs:
-
-
github.com github.com
-
import page from "//unpkg.com/page/page.mjs";
-
Or with modules, in modern browsers
-
-
justintimecoder.com justintimecoder.com
-
In the brave new world of ES6 + JavaScript, we have a syntax that allows us to declare the dependencies of one file to other files in our project i.e the import keyword, as well as the ability to declare the functions, classes, and variables that other files may import i.e the export keyword.
-
-
developer.mozilla.org developer.mozilla.org
-
The defer attribute has no effect on module scripts — they defer by default.
-
- Sep 2020
-
medium.com medium.com
-
Because ESM is syntax, it’s very easy to statically analyze.
-
Unfortunately, many third party libraries, even though they are written in ESM, are published to npm as CJS modules, so we still need to concatenate them.
-
-
stackoverflow.com stackoverflow.com
-
// convert CommonJS modules to ES modules
-
-
github.com github.com
-
using modulesOnly behaves exactly as expected when it warns you that the listed npm libraries do not use the ES6 format and are in fact ignored. This option is meant as a way to determine if you still have commonjs libraries in your dependencies that require special treatment via rollup-plugin-commonjs. Your code will probably not work since the listed dependencies will be missing. You should remove modulesOnly and instead add rollup-plugin-commonjs.
-
-
stackoverflow.com stackoverflow.com
-
Why do I need a global variable? Is the global requirement from ES6 modules (I'd have thought modules would be in a functional scope) or rollup?
-
-
engineering.mixmax.com engineering.mixmax.com
-
Rollup builds atop Browserify and Webpack's lineage to make it possible to easily consume those packages, while looking to the future of JS modules.
-
If you've followed React's guide, you've installed react from npm. You can teach Rollup how to find this package within your project's node_modules directory using the rollup-plugin-node-resolve plugin. Since React exports a CommonJS module, you'll also need to convert that into an ES6 module using the rollup-plugin-commonjs plugin.
-
Rollup is a tool that lets you write your application using ES6 modules, even though you can't publish those modules directly to your users, because native support is only just starting to land in browsers. Rollup compiles your modules into a format that all browsers _do_ understand—a single script file—by, essentially, concatenating files together (while reordering and renaming declarations to preserve scope).
-
-
rollupjs.org rollupjs.orgRollup3
-
In other words for those tools, you cannot create a package interface where const lib = require("your-lib") yields the same as import lib from "your-lib". With named export mode however, const {lib} = require("your-lib") will be equivalent to import {lib} from "your-lib".
-
To make sure your ES modules are immediately usable by tools that work with CommonJS such as Node.js and webpack, you can use Rollup to compile to UMD or CommonJS format, and then point to that compiled version with the main property in your package.json file.
-
ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries
-
-
github.com github.com
-
Since most CommonJS packages you are importing are probably dependencies in node_modules, you may need to use @rollup/plugin-node-resolve:
-
-
bl.ocks.org bl.ocks.org
-
This is a demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup. Custom bundles can be optimized to contain only the code you need. This example exposes just three fields on the d3 object: d3.event, d3.select and d3.selectAll. The minified and gzipped bundle is only 3,691 bytes, a savings of 93% over the default build!
-
-
twitter.com twitter.com
-
Why I’m excited about ES6 modules: a custom build of D3 4.0 in 3,610 gzipped bytes. (93% smaller!)
-
-
-
Now only the defined subpath in "exports" can be imported by a consumer:
-
"exports": { ".": "./main.js", "./submodule": "./src/submodule.js" }
Tags
Annotators
URL
-
-
-
type: "javascript/auto
-
-
exploringjs.com exploringjs.com
-
The module specifier is always fixed. That is, you can’t change what you import depending on a condition. And you can’t assemble a specifier dynamically.
-
-
developer.mozilla.org developer.mozilla.org
-
It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.
-
-
stackoverflow.com stackoverflow.com
-
Understand that an "external module" is a file containing an import or export statement, that an "ambient module declaration" reads declare module "m" {} (note the quotes), and reread the error message.
-
- Dec 2019
-
stackoverflow.com stackoverflow.com
-
commonJS (using exports.default =)
-
-
2ality.com 2ality.com
-
ES modules enable tree-shaking (which, in general, is impossible with CommonJS modules).
-
- Nov 2019
-
blog.logrocket.com blog.logrocket.com
-
One of the more confrontational parts of JavaScript development has always been its module system
-
- Sep 2019
-
github.com github.com
Tags
Annotators
URL
-
-
github.com github.com
- Feb 2017
-
wiki.ubuntu.com wiki.ubuntu.com
-
select proprietary or out-of-tree modules (ex. vitualbox, nvidia, fglrx, bcmwl, etc.)
If anyone is wondering what other modules they refer to, or how to discover any on your own system, this StackExchange thread on how to identify out-of-tree modules might help.
-