├── README.md
├── paging-arrow-down.svg
├── paging-arrow-up.svg
├── twitgrid-icon-32.png
├── twitgrid-icon-512.png
├── twitgrid-icon.svg
├── twitgrid.apng
└── twitgrid.html
/README.md:
--------------------------------------------------------------------------------
1 | # TwitGrid: Because TweetDeck is a mess at times.
2 |
3 | TwitGrid is a simple, broadsheet layout for reading Twitter feeds that shows a
4 | dense, instant overview of the latest posts from only the users you care about.
5 | It doesn't mix multiple feeds up into an infinite-scrolling jumble.
6 |
7 | ## The View
8 |
9 | You will see feeds from only the specified handles, like so:
10 |
11 | 
12 |
13 | Because most people have usable long-term memory, you'll know what you have read
14 | and haven't, somewhat in the vein of RSS (though less automatic).
15 |
16 | There will not be an algorithm intermediating what you want to see and what you
17 | actually see or surfacing things it thinks you might be interested in.
18 |
19 | ## Using
20 |
21 | URL Fragment
22 |
23 | 1. Specify the handles you want as part of the URL fragment:
24 |
25 | ```
26 | https://vilimpoc.org/research/TwitGrid/#columns=8;users=vilimpoc,checklyhq,dspillere,gusso,GreatDismal,tim_nolet,mihriminaz,FaberCastell;users_sorted=BVG_Kampagne,fryuppolice,KoreanTravel,thingiverse,NI_News,steak_umm,ConanOBrien,taylorswift13
27 | ```
28 |
29 | This is bookmarkable.
30 |
31 | 2. Done.
32 |
33 | Local Hard-Coded Version
34 |
35 | 1. Save a copy of [`twitgrid.html`](https://raw.githubusercontent.com/nuket/TwitGrid/master/twitgrid.html) anywhere.
36 |
37 | 2. Edit the lists of Twitter handles you want to see:
38 |
39 | ```
40 | const handlesTopInterests = 'vilimpoc checklyhq dspillere GreatDismal tim_nolet';
41 | const handlesFunStuff = 'BVG_Kampagne fryuppolice KoreanTravel thingiverse NI_News steak_umm ConanOBrien taylorswift13 jimmykimmel';
42 | ```
43 |
44 | 3. Call the `render()` method, with optional alphabetical sorting:
45 |
46 | ```
47 | render(handlesTopInterests);
48 | render(handlesFunStuff, true);
49 | ```
50 |
51 | 4. Reload the page and enjoy.
52 |
53 | ## Page Navigation
54 |
55 | **On Desktops**
56 |
57 | *Page Up / Down* will smooth scroll the whole viewport, snapping to the next set of feeds.
58 | *Mouse Wheel Up / Down* scrolls the individual user feeds.
59 | *Home / End* scrolls to the top / bottom, as expected.
60 |
61 | **On Mobile**
62 |
63 | Tap the navigation buttons to flip pages, or drag individual feeds.
64 |
65 | ## Live Demo
66 |
67 | See a [demo here](https://vilimpoc.org/research/TwitGrid/#columns=8;users=vilimpoc,checklyhq,dspillere,gusso,GreatDismal,tim_nolet;users_sorted=BVG_Kampagne,fryuppolice,KoreanTravel,thingiverse,NI_News,steak_umm,ConanOBrien,taylorswift13,jimmykimmel) (this link leaves GitHub).
68 |
69 | ## Video Explainer
70 |
71 | [](https://youtu.be/S8JrmXg0BNo)
72 |
73 | ## Technology
74 |
75 | It's a single page with inlined SVGs, no dependencies, pure ES6 Javascript. Not
76 | even `lodash`.
77 |
78 | ## Styling: Changing the Column Count
79 |
80 | Edit this:
81 |
82 | ```
83 | .twit { flex: 0 0 20%; }
84 | ```
85 |
86 | And this:
87 |
88 | ```
89 | // Change this to suit the width of your monitor.
90 | const columnCount = 5;
91 | ```
92 |
--------------------------------------------------------------------------------
/paging-arrow-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
75 |
--------------------------------------------------------------------------------
/paging-arrow-up.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
75 |
--------------------------------------------------------------------------------
/twitgrid-icon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuket/TwitGrid/17a9a97db5c133c2c91c0c9802560728a557a0b6/twitgrid-icon-32.png
--------------------------------------------------------------------------------
/twitgrid-icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuket/TwitGrid/17a9a97db5c133c2c91c0c9802560728a557a0b6/twitgrid-icon-512.png
--------------------------------------------------------------------------------
/twitgrid-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
1244 |
--------------------------------------------------------------------------------
/twitgrid.apng:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuket/TwitGrid/17a9a97db5c133c2c91c0c9802560728a557a0b6/twitgrid.apng
--------------------------------------------------------------------------------
/twitgrid.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | TwitGrid: Because TweetDeck is a mess at times.
25 |
119 |
120 |
121 |
122 |
123 |
124 |
145 |
146 |
147 |
148 |
389 |
390 |
401 |
402 |
403 |
404 |
⌛
405 |
Loading...
406 |
If you have an Ad Blocker or Strict
407 | Tracking Prevention enabled on Firefox or Edge, this may not
408 | work.Chrome of course, by default, leaks like a sieve.