My Projects on GitHub:
arduino-nodejs-music-quiz-game
Arduino NodeJS Music Quiz Game
🚨⚠️ project is being re-written lot of things might currently be broken
A music quiz game using an arduino to record buttons input and nodejs as gameserver
say hello at musicquizgame@gmail.com
Arduino buttons breadboard design
start development
install git
if you haven't already installed git, do this first
http://git-scm.com/download
project checkout
if you are reading this you maybe already have a local copy of the project, if not then you can should use git to clone the latest master branch
to do this you need open your command line tool and use the following command to clone (http://git-scm.com/docs/git-clone) this project into one of your directories (PROJECTDIRECTORYPATH)
cd /PROJECT_DIRECTORY_PATH
now clone the project into that directory
git@github.com:chrisweb/nodejs-arduino-game.git
if you are on windows you can also use the github desktop (https://desktop.github.com/) or if your use visual studio as IDE you can use the github for visual studio extension (https://visualstudio.github.com/)
install github desktop or the visual studio extension, then go to the github open the project main page and click the green "clone or download" button
install Nodejs
if you haven't done this already, install nodejs from https://nodejs.org (which includes npm, the nodejs package manager)
update npm
to ensure you have the latest version of npm, update npm (https://docs.npmjs.com/getting-started/installing-node), open your command line tool and use the following command
npm install npm@latest -g
to check if you have the latest version type
npm -v
what the latest npm version is can be seen in their package.json https://github.com/npm/npm/blob/latest/package.json
~~install yarn~~
~~get yarn https://yarnpkg.com/~~
~~or check if it the latest version is already installed~~
!!! we postponed using yarn (use npm instead, see below), because there is a bug when checking out @types packages:
https://github.com/yarnpkg/yarn/issues/825
https://github.com/yarnpkg/yarn/issues/656
yarn --version
open project directory
go into the project directoy if you haven't already and then into the quizz-game directory
cd /PROJECT_DIRECTORY_PATH/quizz-game
⚠️ Serialport and node-gyp troubleshooting
!!! if you need to compile node-gyp, it is probably because you use the latest nodejs version, if you use the LTS version of nodejs the chance is high you won't have any trouble with node-gyp, so if troubleshooting still fails or takes too much time you might consider just switching to the nodejs LTS version and you will be able to instsall Serialport using a pre built node-gyp without trouble
Serialport is a nodejs addon that needs to get compiled
For the compilation node-gyp is being used
ON WINDOWS: If you don't have Python and Visual Studio installed on windows, node-gyp will fail and hence you won't be able to install the Serialport addon
The node-gyp README recommends to run the following command in a Powershell instance that you have to run as an Administrator to install the required tools
npm install --global --production windows-build-tools
After this installing the dependencies should work, if it doesn't please check out the nodejs documentation about compiling addons and if it still doen't work open a ticket
ON LINUX & MAC: For other operating systems check out the node-gyp README
~~install the development dependencies using yarn~~
~~use yarn to fetch all the dependencies and put them into the node_modules directory~~
yarn install
!!! we postponed using yarn (use npm instead, see below), because there is a bug when checking out @types packages:
https://github.com/yarnpkg/yarn/issues/825
https://github.com/yarnpkg/yarn/issues/656
install the development dependencies using npm
use npm to fetch all the dependencies
npm install
This will fetch all the dependencies from https://www.npmjs.org/ that are listed in the project package.json and put them into a directory called node_modules
!!! If you want to install the dependencies from within a Virtual Machine with a Linux operating system, but your shared folder is in windows then user "npm install --no-bin-link" (as windows does not support symlinks)
install gulp-cli globally
npm install gulp-cli -g
install sass and ruby
download and install ruby:
http://rubyinstaller.org/downloads/
!!! if on windows: while installing ruby, check the box "add ruby to the windows path"
now install sass:
gem install sass
and / or to check if sass is installed, type:
sass -v
add new dependencies (node_modules)
first to check the available package versions use
npm view <package_name> versions
choose the latest version (this is for a prototype latest is ok) and install it
if it's a dependency needed by the project to work, we use save so that it also gets added to the dependencies property of our package.json
use the @ after the package name, to define the version you want to install
npm install <package_name>@<version> --save
if it's a dependency only used during development use "--save-dev" so that it gets added to the devDependencies property of our package.json
npm install <package_name>@<version> --save-dev
create a configuration file
open the server directory and copy the file configuration_example.ts, then rename it to configuration.ts
edit the configuration file and add your own values
the deezerProfileId is the id of the user profile you want the playlists to be fetched from by default (it can be any existing deezer account, it just needs to have some public playlists)
if you don't have a deezer account yet, create one and add some playlists (at least one), then puts it's ID in the configuration file
build the project
to build the project (create js files from ts source files, copies files, ...), type
gulp build
rebuild in realtime
while developing I recommend you enable gulp watch to ensure typescript and sass files get re-compiled on each time you save
gulp watch
start the server
node ./build/server
build the docs (project website on github pages)
to build the project website (on github pages), type
gulp build-docs
Initial project setup
check out the PROJECT_SETUP.md file
Licenses
Source code licensed under MIT
Logo, design, project name, domain name copyright (c) chris weber 2017
Design
Designed by the awesome people at Tubik Studio
chris.lu
chris.lu
this series of articles will showcase how to build a blog using next.js 13 and focus on using features like "React Server Components", "React Streaming Components", "React Suspense"
history
react history
the react team released the RFC: React Server Components as well as an experimental demo of React Server Components (RSC) in december 2020
the next announcement regarding server components came as part of a blog post announcing the release of React v18.0, the react team mentions that the feature is considered experimental but also that they plan to release the server components in one of the next minor versions of react 18
next.js history
in may 2022 the next.js team released the Layouts RFC and sketched out their ideas for server components, but also improved data fetching and things like nested layouts, alongside the RFC posted on their blog they opened a github discussion regarding the layouts RFC
Question(s): regarding the new layouts system, the RFC mentioned it would be nice to have a feature that allows to "preserve the state on navigation", did they include this? if so how does it work
Glossary:
- URL Path: Part of the URL that comes after the domain.
- URL Segment: Part of the URL path delimited by slashes
Note: this series of articles will focues on the new app
directory and server components, I will not go into much into detail describing how to use the "classic" next.js pages
directory and the "classic" data fetching methods like getStaticProps
, getServerSideProps
or even the legacy getInitialProps
, but I might mention them and compare them to the "new way of doing things" to give you an idea of how we did things until today and how we will now do things starting tomorrow ;) like this little recap that follows
recap of the 1st and 2nd generation of data fetching in next.js:
- first there was
getInitialProps
, with getInitialProps the first page would render on the server and so getInitialProps would be called on the server, then if visiting another page using next/link or next/router that page would get build in the client, so any code in getInitialProps would get executed on the client side, this meant that you had to be aware if you were currently on the server and could use server side code to make a direct data fetch call to the database or if you were in the client and hence fetch the data via an ajax call to an API endpoint you would also need to code, besides that it was also important to be careful about how and what packages you were importing as you might use a package when getInitialProps is executed on the server but then that code would also be bundled into the client to be imported too when getInitialProps runs in the client, to avoid that you would need to exclude packages from the client by either using dynamic imports encapsulated into conditions that check if the code is being executed on the server or client or by using plugins that exclude those "server only" packages at build time. read more: next.js getInitialProps documentation - the newer
getServerSideProps
(which first appeared in march 2020 with Next.js 9.3) and is an async function that fetches the data and populates the props object of your page function and works differently then getInitialProps, same as with getInitialProps for the first page the code gets executed on the server and the data is being returned directly to the code of the page, but if you visit a second page getInitialProps will again get executed on the server and the data it returns will get sent as JSON to the client where again it gets used by the page code, this means using getServerSideProps instead of getInitialProps eliminated two pain points, first you did not have to care about your imports anymore as next.js would exclude those packages for you from client code automatically and the second one being that you did not have to create an API for client side data fetching anymore as next.js would go and call getServerSideProps on the server and then fetch the data as JSON for you. read more: next.js getServerSideProps documentation getStaticProps
appeared alongside getServerSideProps, the difference between the two is that getServerSideProps disables "Automatic Static Optimization" but getStaticProps does not, getStaticProps it is a method that you would use to fetch data not at "runtime" but at "build time", so when a user visits a page no data call is being made, all data got already fetched at build time (and the page props have been put in a static json file), which means for any request being made by a user your data won't change, this can be very interesting to build pages that load super fast as they use data that does not change between two builds, however getStaticProps has a feature so that you can "revalidate" data in the background, this is what gets used by "Incremental Static Regeneration" and allows you to update the static data you got at build time. read more: next.js getStaticProps documentation
in october 2022 the next.js team released Next.js 13 which included the first version of the new app
folder and two months later in december Next.js 13.1
react server components
files inside app will be rendered on the server as "React Server Components"
Inside the app/ directory, there is a powerful new way to fetch data with React’s use() hook and the extended Web fetch() API. This allows you to colocate data fetching directly inside components for the most flexibility, including inside layouts
Question(s): what about react Streaming, react Suspense, and react Transitions?
image(s) manipulation
converting images to AVIF and WEBP and thumbnails
https://www.npmjs.com/package/sharp
chris.lu_v1
chris.lu
https://chris.lu
My personal development blog, using PHP and the Zend Framework 1 for the backend. The frontend uses the Twitter Bootstrap 3 and and jQuery Mobile 1.4.
In production the blog is hosted on NGINX with php-fpm and apc cache. The database is MongoDB.
This is not a Wordpress Blog with lots of features, it is an expirement with just enough features to host my own stuff online.
I have put it on GitHub because maybe some parts like my library, the layout helpers or my "modules structure" where each module has its own boostrap and configuration files may be helpfull for zf1 starters.
Install
Install the submodules with this command: git submodule foreach git pull
In "/application/configs/", rename the "application_default.ini" into "application.ini" and use your own values where needed
Do the same for each config.xml of each module in "/application/modules/MODULE_NAME/configs/"
If the Bootstrap failed to create the followind folders you may have to create them manually, create the folder "caches", "searchindexes" and "logs" in the "application" folder and in the "/public/" folder create an "upload" folder
Put a copy of the zend framework 1 into "/library/Zend/" (this repository got tested using zf1 1.12.3)
Check out the dev-vhost.txt file to setup an apache development vhost
To update the javascript packages check out the updating.txt file
MongoDB Backup
mongodump --out=/mongodb_backups/$(date +%Y-%m-%d)
TODO
- DONE: upgrade Twitter Bootstrap to version 3
- DONE: upgrade jQuery mobile to version 1.4
- DONE: responsive layout improvements, for example the main area is too small on tablets
- DONE: use Zend_Feed to read GitHub activity feed
- DONE: use GitHub API to retrieve repositories list from GitHub (with zend file cache)
- DONE: add zend file cache for GitHub feed in projects module
- DONE: rewrite of the bookmarks module that is useless as it is right now
- DONE: comments system for articles (remove disqus)
- form to allow visitors to suggest bookmarks, article topics and readinglist entries
- use Stackoverflow API to retrieve some public data (with zend file cache)
- gravatar for comments
- reduce header size for small resolutions especially if height is small
TODO (maybe):
- update / improve mongodb models
- improve tags system
- create about page
- add the option to switch to MariaDB
- upgrade to zf2 if I have some free time left in the future ;)
chrisweb-utilities.js
chrisweb utilities.js
ARCHIVED !!!
This project is now archived, I will not update / maintain it anymore
What is it?
Javascript utilities belt for very specific tasks.
main goal(s):
- console log wrapper for colored log messages
- utilities belt: javascript collection of useful functions that are useful for specific situations, so a lot more specific than underscore
- should work in the browser as well in nodejs
usage
@TODO
build
install the latest nodejs (if you haven't already) nodejs
install or update to the latest git version git scm downloads (During installation at the step "choosing the default editor used by Git", if like me you are using visual studio code you might want to chose the new option "use visual studio code as Git's default editor") (also if like me you are on windows, at the step "adjusting your PATH environment", ensure the second radio button option is selected "git from the line and also from 3rd-party software" to ensure git is added to the windows PATH, which will allow you to use git with any command line tool like windows powershell for example)
git clone this repository if you haven't already
open your favorite command line tool and go to the root directory of this repository
update npm to latest version
npm install npm@latest -g
install the dependencies
npm i
to lint the typescript files
npm run lint
run the tests
npm run test
to build the distributions (es6 module (esm.js) and the UMD version)
npm run build
development
in devlopment you can use watch to rebuild every time you edit a typescript file
npm run watch
you can also use watch for the test suite
npm run watch:test
contributing
Bug reports, tests, fixes, new features and all kind of comments / feedback are welcome 😃 Submit a feature request or bug issue
testing setup notes
I used the jest testing framework
I added the jest typescript types and the ts-jest package
installed dependencies:
npm install --save-dev jest @types/jest ts-jest
command to create a basic jest.config.js file:
npx ts-jest config:init yarn ts-jest config:init
If you use VSCode, consider using the vscode jest extension
Besides reading the official documentation, you can check out this quick introduction to jest blog post
features
utilities.log
Colored console log messages for the browser and / or nodejs
javascript
utilities.log('foo', 'bar', 'fontColor:red', 'backgroundColor:blue');
Suppported colors
- red
- green
- yellow
- blue
- magenta
- cyan
- white
- black
logging in floating html div (client)
If you are on mobile device and wan't to show the messages in a floating div over the page then set logSpecial to true
javascript
utilities.logSpecial = true
logging in a file (server)
If want every message to logged in file, then enable logSpecial (currently only winston is supported)
javascript
utilities.logSpecial = true
logging in a file (server) but not in the console
javascript
utilities.logSpecial = true
utilities.logVerbose = false
removeElements
removes html elements from a sting (and their content) from strings set second parameter "removeTextBetweenTags" to false to keep the text between the opening and closing html tag
generateUUID
returns a universally unique identifier
filterAlphaNumericPlus
filters a string removes everything that is a not an alpha or numeric character and also optionally the characters that got specified as second argument
decodeUri
decode uri
encodeUri
encode uri
arrayRemove
remove an something at an unknown index from an array
capitaliseFirstLetter
capitalise first letter of a string
getUrlParameters
get url parameters
stringContains
does a string contain another string
getSubstringIndex
get the index of a substring in a string with optional nth time it occurs
isServer
does the script run on the server
isClient
does the script run in a client
replace placholder(s)
first parameter is a string and second parameter an object where the keys are the placeholder that need to get replaced and the value is the replacement (replacement can be a string or number)
remove the content between two "markers"
randomInteger
Input are two numbers, output is a random number that is between or equal the two input numbers
choice
Input is a sequence (an array) of items and the output one random item of the input
cordova_prototype
cordova_prototype
bautify me photo app (cordova prototype)
TODOS
- DONE: setup package json to retrieve dependencies (requirejs, twitter bootstrap, grunt, ...)
- DONE: edit config.xml and set default values
- DONE: add grunt file to project
- DONE: use grunt to copy vendor modules from node_modules to phonegaps www
- DONE: use grunt and jshint to lint javascript code
- DONE: setup sass and grunt watch to recreate css each time sass file gets edited
- DONE: set the canvas to full width and fulll height minus the space needed for the header and the footer of the app
- DONE: add the android platform to the project
- DONE: add the camera plugin to the project
- DONE: use camera plugin to take a photo
- DONE: create a black and white filter
- DONE: lock orientation to portrait in config.xml
- DONE: add the splashscreen plugin
- DONE: change the application icon
- DONE: save image to phone photo library
- DONE: add stickers to an image
- DONE: show message (green / red) after each action
- DONE: create the images needed by the splashscreen plugin
- button to share a photo on social networks
- load image from local device library to edit it
- use the google drive API to backup images on drive
- set the size of the canvas to the size of the image and change the canvas size using css, or the image will be small when it gets saved
- the stickers functionality needs some improvents, would be nice to let the user choose a sticker from a gallery and then let him position and resize it manually
- changing the filter should not reset the stickers
- add more funny filters and / or let the user create own filters
PLUGINS USED BY THE APP
- cordova-plugin-splashscreen
- cordova-plugin-whitelist
- cordova-plugin-file
- cordova-plugin-camera
RESOURCES
phonegap configuration file documentation: http://docs.phonegap.com/en/edge/configrefindex.md.html
camera plugin options: http://docs.phonegap.com/en/edge/cordovacameracamera.md.html
splashscreen plugin documentation: http://docs.phonegap.com/en/edge/cordovasplashscreensplashscreen.md.html
application icon documentation: http://docs.phonegap.com/en/edge/configrefimages.md.html
project setup
install io.js or node.js: https://iojs.org
install grunt and grunt cli globally: npm install grunt -g npm install grunt-cli -g
install ruby: on windows get the windows installer http://rubyinstaller.org/
install sass: gem install sass
install git: for example git for windows https://msysgit.github.io/
install java jdk 1.7.x: http://www.oracle.com/technetwork/java/javase/downloads/index.html
for windows: adndroid sdk requires java, so ensure you have a JAVAHOME environment variable set JAVAHOME should be something like C:\Program Files\Java\jdk1.7.0_79
install stand-alone SDK tools: https://developer.android.com/sdk/installing/index.html
install cordova: npm install cordova -g
checkout the project: https://github.com/chrisweb/cordova_prototype
open your console and go into the root directory of the project where the Gruntfile.js resides and install the dependencies: npm install
if you IDE requires the path of the android sdk set it to something similar to this, this example is for windows: C:\Users\USER_NAME\AppData\Local\Android\android-sdk\SDK Manager.exe
if you are on windows and want to debug an android nexus device then you will need to install the google usb driver: http://developer.android.com/sdk/win-usb.html
in this project the android platform has already been added, to add another platform, open your console and go into the app directory, then type the following command: cordova platform add PLATFORM_NAME
to test the app for android you need to setup the emulator, go into the android SDK folder and launch the AVD manager, then create a virtual device and start it: http://developer.android.com/tools/help/avd-manager.html
if you get this error message "SSL certificate problem: unable to get local issuer certificate" when building the app, when the plugins get retrieved then you probably use the following command to disable ssl checks in git: git config --global http.sslVerify false ! this is not safe, but I didnt find better solution yet, you can enable ssl checks after the checkout using this command: git config --global http.sslVerify true
if on device ready the camera plugin is undefined, re-install the plugins: cordova plugin remove cordova-plugin-camera cordova plugin add cordova-plugin-camera
if the app does not build correctly try to reinstall the platform and plugins: cordova platform remove android cordova platform add android
- cordova plugin remove cordova-plugin-splashscreen
- cordova plugin remove cordova-plugin-whitelist
- cordova plugin remove cordova-plugin-file
- cordova plugin remove cordova-plugin-camera
- cordova plugin add cordova-plugin-splashscreen
- cordova plugin add cordova-plugin-whitelist
- cordova plugin add cordova-plugin-file
- cordova plugin add cordova-plugin-camera
to test the app in the emulator use this command: cordova emulate android
deploay the app on a device for testing, execute this command: cordova run android --device
if you try to debug on two different computers but on the same device, you will get this error message while building "INSTALLFAILEDUPDATE_INCOMPATIBLE" on your device go to settings > apps and delete the app, then run the command again
to use the remote debugging of chrome: open chrome, go to more tools > inspect devices and there your device should show up, now click on inspect
keywords
- distort
- manipulate
- image
- effect
- canvas
- photo
- filter
- lens
- share
- selfie
- retouch
- transform
- face
- fun
- frame
freeMusic.zone
__ __ _ ____ | \/ | (_) / __/_______ ___ | \ / |_ _ ___ _ ___ _______ _ _ ___ / /_/ ___/ _ \/ _ \ | |\/| | | | / __| |/ __| |_ / _ \| \| | __| / __/ / / __/ __/ | | | | |_| \__ \ | (__ / / (_) | .` | _| /_/ /_/ \___/\___/ |_| |_|\__,_|___/_|\___| /___\___/|_|\_|___|
freeMusic.zone
goal
This project is "just" a prototype right now.
The goal of this project is to create a fun mobile / tablet / desktop free music app. For more details about the features check out the documentation/features document.
∧
/ ̄  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄\
| web audio, music and sound experiments |
\______________________/
Documentation (RTFM)
All the documentation can be found in the documentation directory.
Before you start coding
First read the "/documentation/development_setup.md" documentation to ensure everything is set up.
Read the documents before you start coding, especially the "/documentation/codestyleguide.md", "/documentation/sassstyleguide.md" and "/documentation/conventions.md" are important, so read them before you start.
Contributing
Contributors are welcome :).
If you want to contribute, first setup a development version of this app and read the "/documentation/contributing.md" guide. Then check out the "todos.md" document or the issues list on github (https://github.com/chrisweb/freeMusic.zone/issues) to find something you can add us with. Happy coding ;).
A list of contributors can be found here: https://github.com/chrisweb/freeMusic.zone/graphs/contributors.
Feedback and bug reports are welcome ;)
If you have feedback about something related to this project or found a bug please report it in the issues tracker: https://github.com/chrisweb/freeMusic.zone/issues
License
freeMusic.zone: MIT licensed, Copyright (C) 2013 Chris Weber
html5_and_beyond
Online version: https://chris.lu/html5
This is a presentation of HTML5, but also other proposal that get often thrown in the HTML5 pot and a little CSS3 introduction
I was inspired by slides.html5rocks.com but wanted to do something slightly different
01.03.2014: updated using reveal.js https://github.com/hakimel/reveal.js
Editing the slides
If you want to edit the slides, follow these steps:
Install nodejs
Install Grunt
$ npm install -g grunt-cli
- Install dependencies
$ npm install
- Serve the presentation and monitor source files for changes
$ grunt serve
- Open http://localhost:8000 to view your presentation
You can change the port by using grunt serve --port 8001.
Happy Forking
ribs.js
ribs.js 0.1.0
This project is not ready for use in production. It's still under heavy development. I wrote this for another project I work on right now, but its still far from being stable. Testing are fixes and comments are welcome.
typescript build command
tsc --target ES5 --module umd --outDir ../build --sourceMap ribs.ts collection.ts container.ts controller.ts eventsManager.ts model.ts router.ts view.ts viewHelper.ts
main goal(s): * extend backbone view to automate some tasks * a must have is that views code should not contain any html markup, every bit of html should be in the template so that designers only have to touch that file * new collection view to build lists and when destroyed auto close children * new controller * views loader based on requirejs * collections batch save for all models at once
future: * use promises https://github.com/jakearchibald/es6-promise * use shadow dom for views (polymer shadow dom polyfill) https://github.com/polymer/ShadowDOM
ribsjs documentation
ribsjs views
onInitialize hook
- if you want to do stuff during initialization of the view
- don't try to append html to this.$el during onIntialize as it would get overwriten, instead use onRender
onRender hook
- if you want to add programmatically stuff to the view during the rendering process use onRender
for more check out the documentation.md
universal-nodejs-scraper
universal-nodejs-harvester
description
The goal of this project is to create universal nodejs harvester, that has a visual interface that lets a user select portions of website and then assign those portions to columns of an excell file or a database. Then the harvester would on a regular basis visit the website, scrap by the rules that got defined and save the data somewhere. This way without programming anyone could scrap content from any source to use it for what ever needs they have.
But for now only a part of this vision has been coded, which is the harvester itself. This tool visits a webpage, grabs the entire html code, parses it based on hardcoded rules (that you can adapt manually to your own needs, see the next section "examples" for an explanation) and then saves the extracted data into a csv file.
examples
To check out the examples open the index.ts file located in src
The first example of this project is a web scraper / content harvester that reads the content of the hacker news homepage and saves the result into a csv file, you can modify that code to start crawling any other website. All you need to do is set the correct URL and then you also need to adapt the dom selectors to extract the data you need from the scrapped html document. After extracting the information you seek, you finally need to adapt the columns of the csv output file to match your content or even replace the csv file with any database storage you prefer.
The second example does a similar job, except that instead of crwaling a webpage on the web it loads a static html file from a local folder on your computer, the next two steps are similar to what is done in the first example.
The third example is a wikipedia.org list of countries by population (united nations data source) scrapper which harvests the html document content but will also download each of the country flags images. The script will create a csv file with the names of all the countries in the world and will also download each flag image from wikipedia, it downloads the images at an interval of 1 to 5 seconds. The csv file can be easily converted to a google sheet which will then dispay the flags images using a cell formula, for each country row.
install
To install the (npm) dependencies:
shell
npm i
lint
To lint:
shell
npm run lint
build
To do a build (compile typescript):
shell
npm run build
start
To start the harvester type:
shell
npm run start
TODOs
check out the TODO.md file
controversy
I'm aware tools like this one are always surrounded by some sort of controversy. Yes there are a lot of dubious usage cases for such a tool, but there are also lots of valid and legal reasons to want such a tool, for example I created this tool for my personal needs, without bad intentions and not to do something illegal. I wanted to scrap information from my personal account on a social platform (that did not have an API at that time) and display the result on my own blog. This allowed me to update my data in one place and have it automatically displayed in several other places without me having to post the content manually multiple times.
waveform-data-generator
waveform-data-generator
Generates waveform data (peaks) that can then get visualized using for example my other project the javascript client waveform-visualizer that uses animated html5 canvas or you can of course also create / use your own visualizer
Waveform created using the visualizer with data from waveform data generator
Getting started
- if you haven't already, install git https://git-scm.com/ and nodejs (http://nodejs.org/ (which includes npm and will be used to run the server or use the cli tool)
- update npm to ensure you have the latest version installed
npm i -g npm@latest
- clone this project locally https://github.com/chrisweb/waveform-data-generator
- now install ffmeg package based on your operating system (https://www.ffmpeg.org/download.html) (and if you develop in windows add it to your path: http://www.wikihow.com/Install-FFmpeg-on-Windows)
- use your command line tool and go to the root of this project
cd /ROOT/waveform-data-generator
- install the required dependencies (node_modules)
npm i
Launch the server
- Use your command line tool and go to the root of this project:
cd /ROOT/waveform-data-generator
- To lauch the server use the following command:
npm run start
- Open your browser and visit the following URL
127.0.0.1:35000
- if you see the readme of this project as homepage, it means the server is running
Using the command line tool
- use your command line tool and go to the root of this project:
cd /ROOT/waveform-data-generator
- copy the song
868276.ogg
from the/demo
folder into the/downloads
folder or use any song of your own - to use the cli you need to pass parameters (see the following chapter "Cli Options (Parameters)" for an explanation)
- for example use this command to create the peaks using the demo song:
node cli ./downloads 868276 ogg 200 local json false
note: the demo file 868276.ogg that can be found in the /demo
folder, is a song called "Hasta Abajo" by artist Kellee Maize and released under CC BY-SA
Cli Options (Parameters)
- The first parameter "./downloads" is the repository where you want the audio files to get stored
- The second parameter "868276" is the filename of the track (in my example the filename is the track ID)
- The third parameter "ogg" is the audio file format (also file exntension) of the track (ogg / mp3)
- The fourth parameter "200" is the amount of peaks you want to get
- The fifth parameter "local" tells the script if the file is already on your local machine, you can use "jamendo.com" to download music files from their library and store them locally in your /downloads directory
- The sixth parameter "json" is the type of output you want, the peaks can get outputted in either json or as a string
- The seventh parameter tells the script if it should use ffprobe to detect the track format (number of channels, the sampling frequency, ...) or use default values
Using the web interface
- if you haven't already, start the server, using the command:
npm run start
- then put the following URL into your browsers address bar:
http://127.0.0.1:35000/getwavedata?service=jamendo&trackId=868276
- this will download the song into the
/downloads
folder and then print a json representation of the peak values on screen - Note: currently there only two options, the first one is to use local files and the second one will download songs from jamendo.com, you are welcome to fork this project if you want to add another serive (source for songs) and then create a PR on github so that it can get reviewed and hopefully included into this project
web interface Options (Parameters)
- trackId: the ID of a track [required / numeric track ID]
- trackFormat: the audio file format (file exntension) of the track (ogg or mp3) [default ogg]
- peaksAmount: the amount of peaks you want to get [default 200]
- method: the http request method to get the remote file [default GET]
- serverDirectory: the repository where you want the audio files to get stored on the server [default ./downloads]
- service: the audio file provider you want to get the track from (you can use 'local' if the file is already in your server directory) [default jamendo]
- detectFormat: tells the script if it should use ffprobe to detect the track format (number of channels, the sampling frequency, ...) or use default values (true or false) [default false]
🚨 Out of memory
Error "FATAL ERROR: JS Allocation failed - process out of memory"
If the file you want to parse is too big, try increasing the memory limit of your node process, like this:
node --max-old-space-size=1900 cli ./downloads 868276 ogg 200 local json false
If you still run out of memory try to reduce the sample rate by passing custom values as seventh parameter, for example if the song sample rate is 44100 but runs out of memory, then try again with 22050, like this:
node --max-old-space-size=1900 cli ./downloads 868276 ogg 200 local json sr=22050
TODOs
- fix memory problems for big audio files
- Create a client side waveform data generator using the web audio API (http://www.w3.org/TR/webaudio/)
waveform-visualizer
waveform-visualizer
Visualizes waveform data (peaks), for example the ones that got generated using: https://github.com/chrisweb/waveform-data-generator
Waveform created using data that got generated using the waveform data generator
installation
if you want to use the waveform visualizer in your own project you can install it from npm using the following command:
npm i waveform-visualizer
examples
Check out the simple waveform example
development: build
install the latest nodejs (if you haven't already) nodejs
install or update to the latest git version git scm downloads (During installation at the step "choosing the default editor used by Git", if like me you are using visual studio code you might want to chose the new option "use visual studio code as Git's default editor") (also if like me you are on windows, at the step "adjusting your PATH environment", ensure the second radio button option is selected "git from the line and also from 3rd-party software" to ensure git is added to the windows PATH, which will allow you to use git with any command line tool like windows powershell for example)
git clone this repository to get a local copy
git clone git@github.com:chrisweb/waveform-visualizer.git
open your favorite command line tool and go to the root directory of this repository
update npm to latest version
npm install npm@latest -g
install the dependencies
npm i
to build the distributions, use the following command:
npm run build
in development you can use watch to have the build getting rebuild every time you edit code / save one of the typescript files
development: watch
npm run watch
development: linting
to lint the typescript files
npm run lint
changelog
3.0.0 updated dependencies and removed UMD support, this and future versions will be ESM only
contributing (help / PRs appreciated 😊)
you should first open a ticket and explain what fix or improvement you want to provide on the github issues page of this project (remember the github ticket number you will need it for the commit message later on)
go the github page of this project and hit the fork button
follow the instructions in the previous section "development: build", but instead of cloning this projects repository, clone your own fork of the project
git clone git@github.com:YOUR_USERNAME/waveform-visualizer.git
when you are done coding, commit your local changes (if your commit is related to a ticket start your commit message with the "#TICKER_NUMBER", this will "link" the commit to the ticket)
git commit -m "#TICKER_NUMBER commit message"
now open your forks github URL in your browser and hit the pull request button
note to self: publish package on npmjs.com
login to npmjs.com
npm login
!!! before using the next the command ensure the version of your package in the package.json has been updated
publish a new version on npmjs
npm publish
license
This project is licensed under the MIT License - see the LICENSE file for details
web-audio-api-player
web audio API player
About this project
🎶 An opensource javascript (typescript) audio player for the browser, built using the Web Audio API with support for HTML5 audio elements
this player can be added to any javascript project and extended in many ways, it is not bound to a specific UI, this player is just a core that can be used to create any kind of player you can imagine and even be used to play sound in video games or for any other sound / song playing needs you may have
TODO: add screenshot here showing the "simple example" UI, explain that this is just an example of an UI, you can bind your own custom UI to this player and use all or just some of it's features
😔 there is almost no documentation yet (there is some, see next section below), to learn how to use this library I recommend you check out the source code of the simple player example to get started
Want to help improve the documentation or contribute to this project by improving and fixing it, then first check out the TODOs section below, maybe there is something in the list you want to help with. Any contribution, even things not listed on the TODO list are of course welcome. To get started check out the section "contributing" section below.
installation
web audio API player is published to the npm registry so you can install it with either npm or yarn
with npm:
npm i web-audio-api-player
or with yarn:
yarn add web-audio-api-player
documentation
This player has two modes, PLAYERMODEAUDIO which uses the audio element to load sounds via the audio element and PLAYERMODEAJAX to load sounds via the web audio API. Here are some of the differences between the two:
the web audio API (PLAYERMODEAJAX)
- No support for streaming
- Files get loaded using fetch, the loading progress is in percent and it is a single value between 0 and 100 percent loaded
- A song has to be fully fetched before it can be turned into a buffer and hence before the playback can start
For a more complete list of features, check out the w3c web audio API features list in their candidate recommendation document
the audio element (PLAYERMODEAUDIO)
- Support for streaming
- Files get loaded using the audio element, the loading progress is not just a single value, it can be split into multiple parts (time ranges), so for example the start of a song from 0 to 10 percent got loaded, then there is a blank of not yet loaded data and then also the part from 35 to 60 percent has been loaded
- A song can be played as soon as a big enough portion of the sound has been loaded (what "big enough" means, is that the browser calculates how much of the sounds needs to get loaded to be able to start playing it and continue loading (streaming) what is left without having to pause the sound at some time during the play process until the end of the playback)
features clarification
You might have read (like I did) a lot of outdated web audio articles which stated the web audio element lacks a lot of features the web audio API has and that hence it is not suited to create complex audio software or for example be used in games where you might want to add effects and filters to sounds.
TLDR; This is not true anymore and especially not true for this library. Yes the audio element if used as a standalone lacks a lot of features. But this library does combine the web audio element with the web audio API.
If you use this library, the difference is only how the sound (song) gets loaded (see list of differences above). If using fetch the source is a Buffer and if using the "HTML audio element" well the source is a media element. Everything that happens after is the same. This is why you can change in the player options the PLAYER_MODE, to either load the sound using fetch or load / stream it using the audio element. But this influences only how the sound get loaded (fetched), if loaded via audio element, we use the web audio API createMediaElementSource method of the audiocontext to pass it to the audiocontext of the web audio API. After feeding the web audio API with the input from the web audio element, the playback and what you do with it is being handled by the web audio API.
so which PLAYER_MODE should I use
It depends on what you intend to build.
If you build a game where you have a lot (of small sounds) that get (pre-)loaded and maybe cached but played later at some time after they finished loading, use PLAYERMODEAJAX. It's progress is easier to understand, because when the loading progress of the sound has reached 100% you know it can be played. To display the loading progress a simple HTML progress element is enough.
If you build a music player, use the PLAYERMODEAUDIO as you might to want to start playing the sound (song) as quickly as possible and don't care if it has fully loaded yet as long as the part that has been loaded is enough to play the song until the end (while the rest of it is being streamed from the server in the background). To display the time range(s) that have been loaded you could for example use a 2D canvas element.
advanced usage
You can create and then inject your own AudioContext
You can inject your own, if you want to reuse an existing one your app already created:
TODO: add example
You can also take the one created by the library and alter it the way you want:
TODO: add example
You can create and then inject your own AudioGraph (audio routing graph)
This is especially useful if you want to add your own nodes to the AudioGraph (audio routing graph). For example you may want to add an AnalyserNode or a pannerNode, delayNode or any other node that is available in the web audio API.
W3C web audio API
W3C Candidate Recommendation, 18 September 2018
Support tables for audio features, caniuse: web audio API / audio element / formats ...
development: build
install the latest nodejs (if you haven't already) nodejs
install or update to the latest git version git scm downloads (During installation at the step "choosing the default editor used by Git", if like me you are using visual studio code you might want to chose the new option "use visual studio code as Git's default editor") (also if like me you are on windows, at the step "adjusting your PATH environment", ensure the second radio button option is selected "git from the line and also from 3rd-party software" to ensure git is added to the windows PATH, which will allow you to use git with any command line tool like windows powershell for example)
git clone this repository to get a local copy
git clone git@github.com:chrisweb/web-audio-api-player.git
open your favorite command line tool and go to the root directory of this repository
update npm to latest version
npm install npm@latest -g
install the dependencies
npm i
to build the distributions
npm run build
in development you can use watch to rebuild every time you edit a typescript file
development: watch
npm run watch
development: linting
to lint the typescript files
npm run lint
contributing (PRs welcome)
you should first open a ticket and explain what fix or improvement you want to provide on the github issues page of this project (remember the github ticket number you will need it for the commit message later on)
go the github page of this project and hit the fork button
follow the instructions in the previous section "development: build", but instead of cloning this projects repository, clone your own fork of the project
git clone git@github.com:YOUR_USERNAME/web-audio-api-player.git
when you are done coding, commit your local changes (if your commit is related to a ticket start your commit message with the "#TICKER_NUMBER", this will "link" the commit to the ticket)
git commit -m "#TICKER_NUMBER commit message"
now open your forks github URL in your browser and hit the pull request button
examples
the best way to get started is to check out the examples folder, start with simple player example
note to self: publish package on npmjs.com
login to npmjs.com
npm login
!!! before using the next the command ensure the version of your package in the package.json has been updated
publish a new version on npmjs
npm publish
notes about problems I encountered during development
web audio api typings notes
As of now (25.05.2019) the web audio api typings seems to be included in lib.d.ts, so removing them from package.json:
json
"dependencies": {
"@types/webaudioapi": "0.0.27"
},
Unfortunately the defined window does not have AudioContext:
check out [open] github ticket (as of 06/2019)
the current dom.d.ts on github
Changelog
- 4.0.0 removed UMD support, this and future versions will be ESM only
TODOs (help / PRs appreciated 😊, see the "contributing" section above)
- create a react example
- create a vue.js example
- create an example using the fileReader
javascript
var fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
var reader = new FileReader();
reader.onload = function(event) {
playerCore._decodeSound(this.result);
};
reader.readAsArrayBuffer(this.files[0]);
}, false);
- completely rewrite the sources system, where you can define multiple variants of a sound but with different codecs, app needs to check which codecs are supported by the device and choose one, use should be able to define which codec is preferred if playback support for multiple codecs is available
- implement audiocontext to close to release memory?
- feature to use the browser notification system to alert which song is being played
- instead of the ArrayBuffer use the MediaElementAudioSourceNode, make it optional to still use the ArrayBuffer
- preload AudioBuffers in indexeddb (first song, next song, current song if loop or previous is triggered ...), let the developer set the amount of preloaded AudioBuffers, remove from "cache" by least used and by date when "cache" is full
- cache songs for offline mode? indexeddb is not very big (filesystem?), check if doable because saving a playlist of songs might exhaust the free space
- some methods return a promise others don't, use promises for all to make it more consistent?
- write a documentation
- make a list of all possible errors (set a distinct code for each error)
- add a contribution guide
- write tests!!! (goal 100% coverage), add tests coverage badge
- abort the loading of the sound if the user clicks play and then pause (or stop / next / previous) before the end of the buffering process
- replace XMLHttpRequest with fetch?
- allow cross fading songs "on end" if it's the next song in a playlist (or just fade out / fade in)
- currently the "find song in queue" can't retrieve songs by queue index, is this useful anyway?
- use suspend and resume if for some time no sound was played? ... to free device resources. As suspend returns a promise, does this mean suspending and resuming takes time? if so how much time does it take, based on that information we can decide after how much time it makes sense to suspend the ctx to save device resources
- use the requestAnimation frame or the requestidlecallback instead of setInterval for playing progress callback?
- use web workers, especially for the decoding of the ArrayBuffer into an AudioBuffer, to not block the main thread while decoding?
- add shuffle mode
- add a loop song and loop queue mode (https://webaudio.github.io/web-audio-api/#looping-AudioBufferSourceNode)
- handle all error cases that are still unhandled
- add support for more codecs (flac, wav, ogg vorbis, opus, aac): also check the available codecs and defined sources, play the first one that has matches and available codec, let user define order of preferred codecs for playback
- add saucelabs browser testing and their badge browser compatibility table badge in readme
- add travis continuous integration and badge
- add improve UI style and then add a screenshot to readme of example
- add live demo (via github pages)
- for position and volume, allow to use a percentage or a value
- add hooks to the sound object for all the native source node events AudioBufferSourceNode
- add (stereo) panning
DONE
- use gulp gulp and some gulp plugins to create a clean build
- create an XMLHttpRequest library class to fetch the ArrayBuffer
- create an audio library class to create the context and decode the ArrayBuffer
- create a custom error class with message but also a numeric code
- let the user add a sound with an already fetched ArrayBuffer or even with an already decoded AudioBuffer
- create a simple example with a vanilla JS UI
- add a sounds queue manager
- add "play" sound
- add "pause" and "stop"
- add "next" and "previous"
- add set / get volume and mute
- add a loading progress callback
- add a playing progress callback
- add an onEnded callback
- play next song onEnded, add option to enable or disable automatic play next onEnded
- add change position method
- add loop queue option
- make the core player options object optional when initializing a new player
- let the user modify the audio graph, for example by adding / removíng nodes like a filter node, a panner node ...
- replace gulp with rollup as new module bundler
- use pkg.module to distribute a UMD as well as an "ES6 modules" version
- rewrite the simple example with vanilla js instead of jquery
- put the web audio API player on npm and add npm version badge / license badge / ... shields.io
- implement suspend and resume: ctx.suspend() and resume
- add an option that uses the visibility API to automatically mute and unmute a sound when the visibility changes
- rewrite how the audiocontext is created, for browser that enforce that a user interaction has taken place before a context can be running
- add option to persist the user volume choice using the localstorage
- switch from tslint to eslint with typescript-eslint plugin / parser: TSlint will be deprecated github ticket, read their blog post and then switch to ESLint
License
zend-framework-1-oauth-2-library
About:
Zend Framework 1 OAuth 2 Library
version 1.1.2
Examples:
Zend Framework 1 OAuth 2 examples.
Facebook Open Graph API OAuth 2
1) Add the latest "Zend" Framework linrary and the "Chrisweb" library to the library directory
2) Setup an Apache vhost for the example:
apache vhost.conf
```
ServerName www.facebookopengraphoauth2.test
DocumentRoot /path/to/examples/FacebookOpenGraphOAuth2/public
ErrorLog "logs/facebookopengraphoauth2-error.log"
CustomLog "logs/facebookopengraphoauth2-access.log" combined
SetEnv APPLICATION_ENV "development"
<Directory /path/to/examples/FacebookOpenGraphOAuth2/public>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
```
3) (optional) Update your hosts file:
127.0.0.1 www.facebookopengraphoauth2.test
3.1) or just use the localhost IP to access the example(s)
http://127.0.0.1
4) Create a Facebook API account at https://developers.facebook.com/apps
Don't forget to set the go to "Settings" and set the correct "App Domains" (for example www.facebookopengraphoauth2.test) and also set the "Website / Site Url" (for example www.facebookopengraphoauth2.test)
5) Finally go into "/examples/FacebookOpenGraphOAuth2/application/configs/" and rename the file "facebookapiEXAMPLE.ini" to "facebook_api.ini" and add your own values where needed
5.1) Or if you prefer you can also create a new configuration file named "facebook_api.ini" in "/examples/FacebookOpenGraphOAuth2/application/configs/" and add the following values:
``` ; documentation: https://developers.facebook.com/docs/facebook-login
; facebook OAuth api configuration dialogEndpoint = https://www.facebook.com oauthEndpoint = https://graph.facebook.com clientId = 000000000000000000 ; change this with own values: clientId => Facebook App ID clientSecret = 000000000000000000000000000000 ; change this with own values: clientSecret => Facebook App Secret callbackUrl = http://www.facebookopengraphoauth2.test/facebookcallback responseType = code ; or token, none, signedrequest oauthDialogUri = /dialog/oauth accessTokenUri = /oauth/accesstoken stateSecret = SOME_SECRET ; change this with own values, change the secret every time you think it could have been compromised, it is used to ensure the OAuth requests really come from your app ; permissions https://developers.facebook.com/docs/facebook-login/permissions requestedRights = email ```
Google+ API OAuth 2
1) Add the latest Zend Framework and the Chrisweb library to the library directory.
2) Setup an Apache vhost for the example:
apache vhost.conf
```
ServerName www.googleplusoauth2.test
DocumentRoot /path/to/examples/GooglePlusOAuth2/public
ErrorLog "logs/googleplusoauth2-error.log"
CustomLog "logs/googleplusoauth2-access.log" combined
SetEnv APPLICATION_ENV "development"
<Directory /path/to/examples/GooglePlusOAuth2/public>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
```
3) (optional) Update your hosts file:
127.0.0.1 www.googleplusoauth2.test
3.1) or just use the localhost IP to access the example(s)
http://127.0.0.1
4) Create a Google+ API account at https://console.developers.google.com
5) Finally go into "/examples/GooglePlusOAuth2/application/configs/" and rename the file "googleplusapiEXAMPLE.ini" to "googleplus_api.ini" and add your own values where needed
5.1) Or if you prefer you can also create a new configuration file named "googleplusapi.ini" in "/examples/GooglePlusOAuth2/application/configs/" and add the following values:
``` ; documentation: https://developers.google.com/+/web/api/rest/oauth
; google+ api configuration dialogEndpoint = https://accounts.google.com/o/oauth2 oauthEndpoint = https://accounts.google.com/o/oauth2 clientId = 0000000000000000.apps.googleusercontent.com ; change this with own values clientSecret = 00000000000000000000000000000 ; change this with own values responseType = code ; https://developers.google.com/identity/protocols/OpenIDConnect#responsetypeparameter callbackUrl = http://www.googleplusoauth2.test/googlepluscallback secretType = immediate = oauthDialogUri = /auth accessTokenUri = /token stateSecret = SOME_SECRET ; change this with own values, change the secret every time you think it could have been compromised, it is used to ensure the OAuth requests really come from your app ; google+ scopes https://developers.google.com/+/web/api/rest/oauth#authorization-scopes requestedRights = https://www.googleapis.com/auth/plus.login,https://www.googleapis.com/auth/plus.me,https://www.googleapis.com/auth/userinfo.email ```
Jamendo API OAuth 2
1) Add the latest Zend Framework and the Chrisweb library to the library directory.
2) Setup an Apache vhost for the example:
apache vhost.conf
```
ServerName www.jamendoapioauth2.test
DocumentRoot /path/to/examples/JamendoApiOAuth2/public
ErrorLog "logs/jamendoapioauth2-error.log"
CustomLog "logs/jamendoapioauth2-access.log" combined
SetEnv APPLICATION_ENV "development"
<Directory /path/to/examples/JamendoApiOAuth2/public>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
```
3) (optional) Update your hosts file:
127.0.0.1 www.jamendoapioauth2.test
3.1) or just use the localhost IP to access the example(s)
http://127.0.0.1
4) Create a Jamendi API account at https://developer.jamendo.com/v3.0
5) Finally go into "/examples/JamendoApiOAuth2/application/configs/" and rename the file "jamendoapiEXAMPLE.ini" to "jamendo_api.ini" and add your own values where needed
5.1) Or if you prefer you can also create a new configuration file named "jamendo_api.ini" in "/examples/JamendoApiOAuth2/application/configs/" and add the following values:
``` ; documentation: https://developer.jamendo.com/v3.0/authentication#oauth2-authorize-request
; jamendo api configuration dialogEndpoint = https://api.jamendo.com/v3.0 oauthEndpoint = https://api.jamendo.com/v3.0 clientId = 0000000000 ; change this with own values clientSecret = 0000000000000000000000000000 ; change this with own values callbackUrl = http://www.jamendoapioauth2.test/jamendocallback oauthDialogUri = /oauth/authorize accessTokenUri = /oauth/grant stateSecret = SOMESECRET ; change this with own values, change the secret every time you think it could have been compromised, it is used to ensure the OAuth requests really come from your app grantType = authorizationcode requestedRights = music ; = scope responseType = code ; = response_type ```
OAuth 2.0 protocol specification:
http://oauth.net/2/
Zend-Framework-1-Service-GitHub
Zend-Framework-1-Service-GitHub
Very simple Zend Framework 1 Service for GitHub API v3
Usage:
IndexController.php
public function indexAction()
{
$bootstrap = $this->getInvokeArg('bootstrap');
$filescache = $bootstrap->getResource('filescache');
$cachedResults = $filescache->load('github_my_projects');
if (!$cachedResults) {
$githubService = new Chrisweb_Service_GitHub();
$githubService->setPath('/users/chrisweb/repos');
try {
$githubResponse = $githubService->query();
} catch (Exception $exception) {
$githubResponse = '';
}
$filescache->save($githubResponse, 'github_my_projects');
$this->view->githubResults = $githubResponse;
} else {
$this->view->githubResults = $cachedResults;
}
}
Bootstrap.php
protected function _initFilesCache()
{
$filesCacheDirectory = APPLICATION_PATH.'/caches';
if (!is_dir($filesCacheDirectory)) @mkdir($filesCacheDirectory, 0755);
$cacheFrontendAdapter = $this->configuration->files->cache->frontend->adapter;
$cacheBackendAdapter = $this->configuration->files->cache->backend->adapter;
$filesCacheLifetime = $this->configuration->files->cache->lifetime;
$filesCacheOptions = array(
'frontend' => array(
'automatic_serialization' => true,
'lifetime' => $filesCacheLifetime
),
'backend' => array(
'cache_dir' => $filesCacheDirectory
)
);
$this->filesCache = Zend_Cache::factory($cacheFrontendAdapter, $cacheBackendAdapter, $filesCacheOptions['frontend'], $filesCacheOptions['backend']);
return $this->filesCache;
}
zend_framework_mongodb_auth_adapter
An authentification (Zend_Auth) Adapter for use with a MongoDB (NoSQL) Database.
Here is an example howto use the adapter (it's very similar to how you use the mysql adapter), some methods have slightly different names:
# AuthController.php
public function loginAction() {
$form = new User_Form_LoginForm();
if ($this->_request->isPost()) {
$formData = $this->_request->getPost();
if ($form->isValid($formData)) {
$formData = $form->getValues();
$userCollection = $mongoConnection->selectCollection('user');
$userConfiguration = Zend_Registry::get('UserConfiguration');
// create authAdapter instance
$authAdapter = new Chris_Auth_Adapter_MongoDB($userCollection);
$authAdapter ->setIdentityKey('username');
$authAdapter ->setCredentialKey('password');
$authAdapter ->setIdentity($formData['username']);
$authAdapter ->setCredential($formData['password']);
$authAdapter ->setSalt($userConfiguration->authentification->password->salt);
$result = $auth->authenticate($authAdapter);
if ($result->isValid()) {
$data = $authAdapter->getResultObject(null, 'password');
$auth->getStorage()->write($data);
} else {
// login failed
}
} else {
// form data aint valid
}
} else {
$this->view->form = $form;
}
}
TODO:
Redo the credential treatement part. Right know it's hardcoded and does only check if a salt was provided. Maybe could allow use to choose between md5 with salt and crypt, with a preference for crypt.
Feedback is welcome ;) Use the Github Issues system or visite me @ http://www.chris.lu
Last 30 GitHub actions:
- Jan 3, 2023 chrisweb pushed to main in chrisweb/chris.lu
- Jan 3, 2023 chrisweb pushed to main in chrisweb/chris.lu
- Dec 31, 2022 chrisweb pushed to master in chrisweb/waveform-data-generator
- Dec 31, 2022 chrisweb pushed to master in chrisweb/waveform-data-generator
- Dec 31, 2022 chrisweb pushed to master in chrisweb/waveform-visualizer
- Dec 31, 2022 chrisweb pushed to master in chrisweb/waveform-data-generator
- Dec 31, 2022 chrisweb pushed to master in chrisweb/waveform-visualizer
- Dec 30, 2022 chrisweb pushed to master in chrisweb/waveform-visualizer
- Dec 30, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb created a tag 4.0.1 in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb released v4.0.1 at chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb pushed to master in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-data-generator
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 29, 2022 chrisweb closed a pull request in chrisweb/waveform-visualizer
- Dec 26, 2022 chrisweb opened an issue in chrisweb/web-audio-api-player
- Dec 26, 2022 chrisweb opened an issue in chrisweb/web-audio-api-player
- Dec 26, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 26, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player
- Dec 26, 2022 chrisweb pushed to master in chrisweb/web-audio-api-player