{"id":15559881,"url":"https://github.com/agateblue/screen-sizer","last_synced_at":"2025-10-12T19:31:13.332Z","repository":{"id":16393013,"uuid":"19143766","full_name":"agateblue/screen-sizer","owner":"agateblue","description":"An open source clone of Quirktools' Screenfly to test your website under different screen sizes","archived":true,"fork":false,"pushed_at":"2016-05-06T09:55:18.000Z","size":1335,"stargazers_count":4,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T03:46:11.513Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agateblue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-25T11:26:12.000Z","updated_at":"2024-06-04T10:56:02.000Z","dependencies_parsed_at":"2022-09-15T17:50:21.790Z","dependency_job_id":null,"html_url":"https://github.com/agateblue/screen-sizer","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/agateblue/screen-sizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agateblue%2Fscreen-sizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agateblue%2Fscreen-sizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agateblue%2Fscreen-sizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agateblue%2Fscreen-sizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agateblue","download_url":"https://codeload.github.com/agateblue/screen-sizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agateblue%2Fscreen-sizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279012668,"owners_count":26085159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T15:59:09.184Z","updated_at":"2025-10-12T19:31:13.062Z","avatar_url":"https://github.com/agateblue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Screen Sizer\n\nScreen Sizer is a web tool designed to help you during your reponsive webdesign testing process. By entering a URL, you can display a website in an iframe and resize it on the fly. This tool is *heavily* inspired from [Quirktools Screenfly](http://quirktools.com/screenfly) and [TestSize](http://testsize.com/).\n\nWARNING : Screen Sizer do not replace cross-browser testing. Also, some websites block the usage of Iframe (on top of which Screen Sizer rely) and won't work with Screen Sizer.\n\nA demo instance is available at [http://screensizer.eliotberriot.com](http://screensizer.eliotberriot.com).\n\n# Why make a clone ?\n\nHaving control on services I use seems very important to me, especially when it's work related. Screenfly and TestSize are great tools, but there is absolutely no warranty they'll be available tomorrow.\n\nI also wanted some features that were not available in these tools.\n\n# Features\n\n- Support both generic and custom sizes\n- Generate screenshot of visited webpages\n- Sharable tests and screenshots (via permalink)\n- Sharable test, via permalink\n- Multilingual (see [Available translations](#Available translations) for a list of available languages)\n- Bookmarklet for instant testing when viewing a website\n- Keyboard shortcuts for faster usage\n- Free as in free beer and free speech (licenced under GPLv3)\n- Runable locally, on your very own computer\n- Can be deployed on a webserver, for public access over the internet\n- Customizable: you can provide your own CSS, JS or even recreate a whole template that better fits your needs\n\n# Requirements\n\nScreen Sizer is build upon [Flask](http://flask.pocoo.com), a micro-framework written in [Python](http://python.org). It uses [Flask-Babel]() to handle u18n, and [jQuery](http://jquery.com) for client side features. Screenshots are optional, but require [Pageres](https://github.com/sindresorhus/pageres) if you want them enabled.\n\n# Installation\n\n## Local instance\n\nFollow these steps to get a working Screen Sizer local instance. These steps are also needed in case of a production instance.\n\nScreen Sizer requires Python 3.4 or 2.7.\n\n### Virtualenv\n\nFirst of all, I recommand using [virtualenv](http://virtualenv.readthedocs.org/en/latest/virtualenv.html) and [virtualenvwrapper](http://virtualenvwrapper.readthedocs.org/en/latest/) in order to properly isolate Screen Sizer dependencies. It's especially important if you plan to have multiple Python projects running on your machine.\n\nEnsure you have these tools installed on your machine then:\n\n    mkvirtualenv screen-sizer\n    workon screen-sizer # optional just after mkvirtualenv\n\n### Get Screen Sizer\n\n    wget https://github.com/EliotBerriot/screen-sizer/archive/0.4.0.zip -O screen-sizer.zip\n    unzip screen-sizer.zip\n    mv screen-sizer-* screen-sizer\n    cd screen-sizer\n\n### Install python dependencies\n\nIf you are using pip, it's easy:\n\n    pip install -r requirements.txt\n\nWith easy_install:\n\n    easy_install flask flask-babel\n\n### Enable screenshots (optional)\n\nPageres require [NodeJS](https://github.com/joyent/node/wiki/installing-node.js-via-package-manager):\n\n    # as root\n    apt-get install curl\n    curl -sL https://deb.nodesource.com/setup | bash -\n    apt-get install -y nodejs build-essential\n\nInstall pageres:\n\n    sudo npm install --global pageres\n\nCreate a directory for screenshots:\n\n    # example for a local install\n    mkdir screenshots\n\n    # example for a public install, you must use a path readable/writable by the webserver\n    mkdir /var/www/screenshots\n\n\n### Create a settings.py file\n\nCopy the example settings and edit it with your preferences (given settings should work out of the box):\n\n    cp settings.py.inc settings.py\n    nano settings.py\n\nAfter that, you should be able to run the dev server and access Screen Sizer locally :\n\n    python screensizer.py\n    # Open http://localhost:5000 (by default) in your web browser\n\nIf you only want a local instance of Screen Sizer, you can stop here.\nFor easier launching, you could create a bash script with the following commands :\n\n    # screensizer.sh\n\n    #!/bin/bash\n    workon screen-sizer\n    cd /path/to/your/screen/sizer/install\n    python screensizer.py\n\nAnd run it with :\n\n    bash screensizer.sh\n\n## Production instance\n\nYou may want to have a screen Sizer instance publicly accessible over the internet. It's possible !\n\nAssuming you followed all the steps described in the 'Local instance' section, you just need to configure your webserver for serving Screen Sizer.\n\nI will cover only one setup, but other configurations are of course possible (feel free to contribute to this part).\n\n### Apache and mod_wsgi\n\nJust in case:\n\n    cd screen-sizer\n\nFirst, install `mod_wsgi`:\n\n    sudo apt-get install libapache2-mod-wsgi\n\nCreate the virtualhost file and edit it:\n\n    sudo cp config/apache /etc/apache2/sites-enabled/screen-sizer\n    sudo nano /etc/apache2/sites-enabled/screen-sizer\n\n    sudo service apache2 restart\n\nSet correct permissions on screenshots directory:\n\n    sudo chown www-data:www-data -R /path/to/screenshots\n    sudo chmod 770 -R /path/to/screenshots\n\nEdit `virtualenv_path` in Screen sizer settings:\n\n    nano settings.py    \n    # Replace 'virtualenv_path' line and with your own path\n\n# Available translations\n\n- French\n- English\n\n# Changelog\n\n## 0.3.1 (18 may 2014)\n\n- Fixed typo in README\n- Fixed HTML error in template\n\n## 0.3 (18 may 2014)\n\n- Small javascript refactoring\n- Added keyboard shorcut (inpired by [TestSize](http://testsize.com/)):\n\n    - for zooming-in (+) and out (-)\n    - for iterating through sizes registered under \"Frequent\" menu (spacebar and ctrl+spacebar for reverse)\n    - for rotation (R)\n    - for full-screen (F)\n    - for targeting url input (W), width input (X) and height input (C)\n\n- Added \"More...\" modal for information regarding bookmarklet and keyboard shortcuts\n\n## 0.2.2 (17 may 2014)\n\n- Fixed internal issue when a non-registered locale was provided via URL\n\n## 0.2.1 (17 may 2014)\n\n- Fixed some HTML errors in template. Screen Sizer now pass [HTML Validation](http://validator.w3.org/check?uri=http%3A%2F%2Fscreensizer.eliotberriot.com%2F\u0026charset=%28detect+automatically%29\u0026doctype=Inline\u0026group=0)\n\n## 0.2 (17 may 2014)\n\n- Changes on layout and design\n- Added \"About\" modal\n- Added bookmarklet\n\n## 0.1 (16 may 2014)\n\n- Initial release\n\n# Roadmap\n\n- Add a client-side screenshot feature\n\n# License\n\nScreen Sizer is free software: you can redistribute it and/or modify\nit under the terms of the GNU General Public License as published by\nthe Free Software Foundation, either version 3 of the License, or\n(at your option) any later version.\n\nScreen Sizer is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\nGNU General Public License for more details.\n\nYou should have received a copy of the GNU General Public License\nalong with Screen Sizer.  If not, see \u003chttp://www.gnu.org/licenses/\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagateblue%2Fscreen-sizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagateblue%2Fscreen-sizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagateblue%2Fscreen-sizer/lists"}