Is it available from the API?
At first glance looks like vector art.
A simple class added to the post that have more than X lines should be enough.
And by just nullifying the
max-height with none or initial should do the job, or even better having a read-more class that add the max-height and show the button, it would be even cleaner.
I finally planned out how the app will be built.
First I'll clean the project structure to be standalone and not as a theme, then I will work on every part separately, trying to be contained to let everyone try it out fast.
For the API I'll be using this as a reference, @prologic help me if there's anything missing there apart from what we already said (bookmark, etc.)
The first part will be the Discover view with no auth.
It felt simpler to hack and adapt to me, might be a good reference.
I'm always been a fan of tiny and minimal tools, usually a quick glance is enough for me to understand if something is in my style.
Before replying to you I actually checked the source code of pass as a reference and was welcomed with walls of text that felt pretty unappealing to me.
Just go with black tea and you'll be fine! ✌️
Anyway, here the app i mentioned: DriveDroid
Maybe i should be making my own tool too, it was in my plans anyway.
@ullarah Keepass is pretty nice but I prefer a plain text system like pass.
I don't even keep my own passwords written anywhere, I just need to remember the username, that's why I thought of using a stateless approach AND a password manager for the others accounts.
I even have to keep track of other people's accounts too, luckily only for storage purpose, since they can't understand the importance of remembering their own passwords, I can count to over 140 in total. 😭
I'm missing endpoints because I didn't see them under the spec page, I should check the repo then, I'm also missing the response structure, but I can directly look it up later when working on the API.
I'll have to rework the layout a bit to let everyone work with my setup then, I'll of course put the instructions to my workflow in the Readme.
Just understand better how you browse, do you use a dedicated app or plugin or you simply zoom in the page with the native zooming?
I can't say much about the theme decision but I think who choose that should know that the NEED JavaScript if they want to change it back and to see anything in the first place, that also means that we need an API for selecting the theme for the #pwa too.
For mitigate the risks we should have a
noscript tag with a description and a static link or action to revert the decision, it can be tested via lynx or any other cli browsers, I can't help there for now through.
For now I'll try to use what we have already, the API in dev.twtxt.net seems to cover most actions, the only APIs that are missing are one for reporting and the actions on twts (mute, bookmark, etc.) and one with the metadata of the pod too, (version, branch, references, etc.).
I'm not real time by nature 🥴 so I think working with issues and yarn should be enough for now.
I'll try to make it so it doesn't get in the way as you described. 👌
With my old phone I even used an app to install the live CD and writable in my phone using an app for Android rooted devices to use as a portable recovery or persistent USB hub, I don't remember the name but I can look it up if you. want.
I'll be working only on the #pwa repo and I've set a local proxy on a throwaway docker instance of yarnd as a local backend.
First will be to get all the API mapped and then I'll try to get everything to work with less graphics elements as i can at first. 🙃
For the rest I'll write down a quick list of the next steps to do as soon as I can.
Meanwhile feel free to give any suggestions/proposal/alternative on the UI or any questions/request for the project. 😜
Maybe installing it in dual boot or on a usb drive or sd card, can help you set up on the hardware part.
dialog {
flex-direction: column;
}
But this put the texts on two lines, it can be fixed by wrapping them with a plain
div or span to convert them to a single child in the flexbox container.I should make an account soon so i can help directly and start with the pwa too... 😐
I made the switch by setting it up first in VirtualBox, then copied the
configuration.nix and used it directly on a new install on my actual PC, the transition wasn't much trouble either.
I'll rely on you on looking for issues while working on the app. 👍
To me hovers are mostly for visual feedback.
I too find them bothersome when they cover half screen with weird popups from mega menus for example.
At first glance is the direction of the elements, is it made with flexbox? In that case it must be the
flex direction.
Usually there's not much request at my office so I just focus on having the application decently organized on the HTML structure and allowing a good keyboard navigation but not much else.
I can't help right now, but I'll give a quick look once I'm on my PC later.
Fun fact: I thought of making an app like that for fun just two days ago while chatting with a friend, never started since I didn't really needed and was more of a toy project though. 😄
Waiting some more feedback from others.
Meanwhile I'll be planning the app feature tree to manage the work.
#pwa
Three versions here too:
- A large version
- A smaller version
- A compact but more linear version + links as chips to make them smaller and more "clickable"
Feedback appreciated here too!
#pwa
Profile mockups
This time the feed/post layout, with three ideas:
- Focus on content
- Standard card with padding
- Flat full width post (with or without a card, not sure yet)
Hope to hear some feedback from you!
#pwa
Feed/post mockups
It's true that it shares data with chrome since it IS chrome even if installed.
Using Cordova should fill the need of physically separate the app from the browser plus adding an API for native interactions and having more control on the output generated.
Still, the first step is to have the app working. 😜
Your concerns about switching to a webapp are not much to worry about if the PWA is made correctly, Here an example i made when building my ParcelJS setup for my office, if you select "Install App" from the tab options it will install like a normal app.
Also AppsGeyser simply wrap with a frame your website, a PWAs is not made that way.
To learn more on PWAs check this out.
Just don't use them in personal projects! (btw i used Inkscape for mine).
I prefer doing a simple sketch by hand or stylized (like the one I shared) to avoid getting used to a style and then getting stuck to it on any iteration.
To me mockups should be to plan and understand how a pure interface works best and nothing more.
I compare designing then as playing with index cards, you shuffle them, fold them and overlap them.
This is something that those tools never helped me do easily.
I also recall Google offering a section dedicated to publishing pure PWAs directly in the Play store but I'm not sure if it's still there.
And also being a PWA could open the possibility of an iOS version too, I don't own any Apple devices so can't help there. 😎
I didn't know about the plan to replace Goryon, how do you manage to compile it for Play store and the others?
I should expand on my definition of flexibility:
Regarding CSS, the general rules on CSS often seems complex but once I started using Suit CSS on plain projects (or BEM if you prefer) and CSS Modules with bundlers plus dropping any kind of framework, the only limitations became how CSS worked natively.
I also started using CSS Flexbox and CSS Grid for anything on layouts and all my problems vanished.
I also use CSS over JS for most of my interfaces, instead of replacing a section I just hide or move it with CSS allowing me to change many parts by just switching a simple class.
I have a soft spot for CSS for it's simplicity and flexibility.
I'm not much of a UX/UI expert but I love searching for design and concepts and sometimes end up putting together fun ideas just for building something that "looks/feels nice". 😎
For me an ergonomic interface is very important and keeping in mind the various ways to use a touchscreen + the desktop interface, I kept the possibility of having multiple layouts to switch to the user's liking.
What do you guys think?
#pwa
App layout mockups
m.request that use the old XMLHttpRequest but expose a fetch style API by wrapping it in a Promise.Here the doc page for reference
Just one issue i noticed, on mobile the first button
.replyBtn have the ::after element under the icon pushing the label.
Example It seems to fix if you use:
.replyBtn .ti {
white-space: pre;
}
Mockup
I prefer working on the frontend the most, but I'll surely get my hands on it sooner or later. 😎
I can understand your reasoning and i know the pure syntax is not the only part involved when developing in general.
I guess when a programming language changes a lot it's much harder to adapt and break habits.
Having a clear idea of what you expect from your code and language is a lifesaver when working with many people, ever more in open source projects like yarn.
Keep it up! 💪😎
I too ended up wanting less and less but exactly for that reason I really enjoy those new stuff the platform offers natively.
Anyway, I'll keep your style as much as I can. 👍
Then I'll try to make my best to make something nice. 😎
One last question, is it okay to go with standard fetch for API calls or you're planning to use twt.js?
The repo seems archived though.
While MithrilJS is a good library I find if wasted when not used with JSX, you can probably enhance the syntax by using htm for the templating if you want to keep it light or use the renderer of esbuild directly.
In my projects I usually use uhtml, it's a simple to use and blazing fast templating library, It doesn't even use the Shadow DOM the usual JSX rely on, you should try it for your next project. 😜
I can see that you're using the templating in the html but i'm lost on how it bind with the backend.
My usual PWA setup is entirely separated from the backend.
I also worked a lot with NodeJS too and now i'm working on creating a bundle-less setup that is light and easy to use and don't need any tooling at all except for a static server and a browser.
I never used MithrilJS but it seems to be the usual JSX style of DOM structure.
Sadly, I don't know Go Lang though, so my help is limited to the HTML/JS parts. 😁
I can probably contribute the most on the pwa repo.
The idea of using JS to create the layout can be just a pure
element.innerHTML = 'HTML' with functions to split the parts or pages easily.It's only a way of doing things, just work the way you want. 👍
I now work exclusively framework-less both in my CSS and JS in all my projects.
If I can help on the UI/UX then sure!
Except the post box reference the rest is already pretty simple and nice.
A first point I can make is to show a reference of the thread like when you fork in the post box below, that would already make it clear you're replying there and not globally.
Yeah, working with targets might be good too.
I usually avoid them since it messes up the history but if I understood @screem 's intentions he planning to make the entire desktop?
With the target you can take it further and do a map on everything like:
#start-menu
#browser_tab-1
#browser_tab-2
#program-1
#program-1_settings
#file-manager
#file-manager_download
But this works only for single view screens.
But damn.... this project is making me itching for building something fun myself. 🥴
Actually, I had a bit of trouble understanding where a post will go to at first so I spinned a yarn locally with the docker image to try on two accounts created on the spot there to see how it behaved to avoid making mistakes here.
Even when replying on threads I was confused that replying forked with another ID and I couldn't see it when replying below, I ended up copying manually the current thread id to be sure.😣
Plus adding a simple label above the post box or in the post button that says "Post in (#THREAD)" or "Reply to @USER" , ecc. can help the UX?
Here the post
~ pick elements that are _aside_ from each other.Here an example from w3school
Also if you use a label with a
for="input-id" for the radio input you can put the tab whenever you want on the page and not care too much on the content location.Whenever way you go with just make sure to have fun. 👍
I think using CSS Grids and Flexbox will help you quite a bit on the layout, you can put everything together with 60% less divs.
An advice I can give you about JavaScript is that you can consider using it in two ways, for making things interactive (the usual use) _or_ to purely construct layouts and interfaces (to simplify and split the html).
If you learn CSS well and try to use JavaScript only for the minimum interactions you need you can put together apps with little code that can possibly break and can build enterprise level web apps that will run butter smooth even on potatoes. 😎
Probably splitting between _read_ and _write_ can be a good solution to have you app ready faster, but that's just my idea.
Please don't bother rushing things, take your time and make what you would like to use.
The best works are the one you make for yourself. ✌️
Probably the decentralized approach is the best for connecting with who you care and the worse to torment users with ads and other strange things. 😄
Hope to see more in the future.
I guess the niche projects are the one that can manage to keep being what they where intended for.
Maybe designing them so it's impossible to make profit is the way to go?
Not sure myself 🤔
I'm also a fan of squeezing CSS to the limit on my projects, did you do it with CSS Grid layout?
For the content in the browser you cound put an iframe and switch the url to show the pages and, if you prefer to go to the CSS route instead of JavaScript, you can have an iframe per tab and switch them by creating a tabbed interface with some radio button and using the sibling selector
.tab-a:checked ~ .content-a { display: block; }.
I immediately log out on any site when I'm done using it and always go incognito for everything so the most pages won't have a recollection of my activity on them.
Also, I think you should add Medium to the list. 🙃
This is probably what I need.
@apex I would like to try it, even if it's just for reading, is it available anywhere? I don't know where to look for it.
It's just my preference anyway, I can get by with a simple client via Termux if I really need to.
Maybe I could whip something up with a Telegram bot running on my PC to push new posts whenever it's reachable.
I'll try playing around regardless. 😎👍
Actually, I was thinking of going manual but I wanted to have something at least read-only natively on Android for just the static txt files but I haven't found any other client other than Goryon, so i tried it for @justamoment (the username origin 😉).
I also considered spinning a pod myself but I would like to expose only the txt and keep the rest private, probably a basic auth on nginx could do the job, but still, I would greatly prefer to keep everything static.
I was checking twtxt for a while and ended up registering out of curiosity.
I'll stay around for while I guess 😜.