funk-team / funklang Goto Github PK

As a user of funk I want to set fields in forms to have certain attributes so I can customize them. This might include masking a password, disabling an extension or specifying a form that must have certain attributes for autofill.

• Add custom attributes to input fields
• Have presets for common options (auto-fill, spell check, masking)

As a funk user when I draw an element to the edge of the screen the element often snaps over the edge of the screen and becomes a new screen.

@davidjb99 to do design

• Add 50px of padding around the edge of a screen to prevent this from occurring.

As a funk user I want to select multiple elements at once in order to be more efficient while editing existing stuff. This might also involve modifying multiple properties in the style panel such as colors, dimensions or other styles.

More info

• Decide the scope of the PR (i.e. how powerful should the multi select be) @davidjb99 and @FranzSkuffka
• Design new interaction @davidjb99
• Tech handoff with @FranzSkuffka

As a user I get very confused when my element which has content in disappears. A more reasoned behavior is elements dragged outside of a screen with content remain as elements. We can consider if the elements should be orphaned or remain connected to the screen they were created in.

We might have to discuss with in the context of components.

As a developer, I want to connect directly to funk using my text editor

• make sure file systems are in sync on startup
• make sure syncing works
• test on local and production deploy
• improve custom elements

When I connect an element to scroll navigation it does not work on depleted pages. It does however appear to work in the preview

https://images.zenhubusercontent.com/350284628/a1534d04-9a9d-4247-9c7-67965428ff72/110926617_ec36ae80_8324_11eb_8d9e_e826c13b4280.mov

When I set the min and max height / width I can presently set them to anything I want, this means the min can be more than the max. This is confusing as I end up entering the wrong values and needing to correct them.

If the min > max highlight min in red
If the max < min highlight max in red

This should show the user there is an error and allow them to correct, I wouldn't recommend hard preventing a user from entering values as this might confuse them more.

When I'm drawing something in funk I use the screen structure panel to figure out what I've selected, where it is nested, the type of element it is and what options it has applied to it. Presently the highlighting and selection is limited and I lose where I am in the tree. I also need to deselect everything to see al lmy screens.

ToDo

• What should go in the sidebar? Look at figma and Sketch
• New design

@davidjb99 needs design

As a user of funk I can only draw basic layouts. I want to have more advanced options available to me.

Initially just have these as manual options, not included in the responfiy algo.

• spaceEvenly
• fill proportions
• spacingXY

When sending a test webhook in the API editor it says something went wrong - body when the webhook actually worked.

This has to do with the accepted response type.

Solutions

• allow users to determine the response type (and check)
• automatically determine the response type (not sure if possible: https://package.elm-lang.org/packages/elm/http/latest/Http#expectStringResponse)

Next steps

1. find out which "Expects" the request works with.
2. design a UX around this or conduct further research.

As a user, I have one or more icons I want to add to funk. I may have created these myself or have an icon set I want to add from a third party. Presently I have to find an icon pack that has the correct git structure and add this repo to funk. I find the process of adding icons from github to takes me outside my normally workflow and is confusing and buggy (repos are not always added, icons are not always added if structure differs)

@davidjb99 to do a new design

A/C

• User uploads either an individual icon or a folder containing all the icons they want.
• The uploaded icons are visible as 'available icon packs' and can be added to an 'icon set'
• If a user removes an uploaded icon pack the icons added to the 'icon set' remain
• The uploaded icons are cached on our CDN (not in the spec)

When I draw something in funk I rely on snapping to assist me. Presently snapping sort of works but has a lot of edge cases and things which sort of work.

• Snapping widths seems to sometimes work, sometimes not work
• When moving elements edge / width snapping is not consistence
• Snapping between screens is inconsistency
• There is no snapping when moving elements (especially annoying when cutting & pasting)

TODO

• Write down as many broken edge cases as possible
• Document figma snapping and outline how far away we are from it

When I draw within a responsive element other elements sometimes jump around

https://images.zenhubusercontent.com/350284628/e83a1679-bf8a-4f3e-922c-0246a2d24c60/screen_recording_2021_03_19_at_19_13_53__1_.mov

This was not a problem before, hence is a regression and is occurring because the parent absolute size is not applied during draw or resize operations

• write e2e test that fails
• fix bug that makes e2e test pass

We use ZenHub for porject management

1. Boards in ZenHub

• New issues
• Icebox, stuff we care about but don't plan to do anytime soon
• Needs clarification, stuff we think should be addressed but need more information about
• Backlog, stuff we plan to do soonish
• This Sprint, stuff we plan to do within the next sprint
• In Progress, stuff we are doing now
• In Review, stuff that is under review

TODO

• Figure out how zenhub works with open source repos, it's meant to be free, do we have to add people? Can they see the project board? Switch to something else if needed.

2. Tag system

Add tags that are the most relevant to an issue.

The tags are divided into two distinct types

Feature tags (e.g. 'Model', 'API', 'Editor')
Need tags (e.g. 'Needs Technical Input', 'Unclear', 'Needs Design', ' Discussion' 'Old'
In general, an issue should have at least one Feature tag (as it most likely is connected to a feature). In an ideal world, it should not have any Needs tags as these mean the issue is lacking something which is needed to start it. When an issue has no Needs tags it is ready to be started.

Filtering tags is more dynamic than filtering by pipelines and enables an issue to be prioritized in the backlog with Need tags that can be addressed before the issue is completed.

As a user when I've responsified an element I want to click and drag it in the same way as before it was responsified. Presently I can only drag a responsified element via its central handle

https://images.zenhubusercontent.com/350284628/0540a631-6cde-40a3-b9db-cbf62cf96df8/screen_recording_2021_03_08_at_19_26_56__1_.mov

@andressotomayorb commented on Wed Mar 10 2021

As a user when I try to add shadow to an element it is not reflected on the editor, but if I go to the preview, there it is visible.

Hi,
I have been building something similar, due to lack of resources 3 years ago, I have resorted to elisp. but I would love to assist in making this project a success.

What are the available roadmaps?

This was not a problem before, hence is a regression

@FranzSkuffka noted this issue and is aware when it occurs

• write e2e test that fails
• fix bug that makes e2e test pass

Reason: pseudo server expects a project ID because it thinks it's in the enterprise version.

TODO: think about solution

notes

• this should be unit tested OR the image dependency should be injected OR a mode should be defined
• importing scripts inside service workers is a pain

When I'm resizing a screen I want more feedback on the process and more options for customization. Presently I can only switch to presets, which is fine, but there are a few oddities that limit how I interact with this feature.

AC

• Input fields for screen size, enter screen size dynamically
• Dynamically update screen size when dragging the screen
• show presets while resizing screen

As a user of funk I want to quickly vertically align text. Presently I need to draw an element (such as a button) then to vertically align text draw another element inside the first element and put text in this second element. This is longwinded and confusing.

This appears to be possible using

• align-items: center
• display:flex
• justify-content: center

A/C

• The behavior needs to be as predictable as possible between single and multiline text.

We need to consider if this should not be in the typo styles but in layout settings, as it's technically not a style but a layout property that should be set on a per-element basis, not per typo style. To get started I suggest we see if this is possible then we can decide where we should put these settings.

To be discussed with @davidjb99 and @FranzSkuffka

The signup example here https://sign-up.builtwithfunk.com/ doesn't line break the subtitle text causing it to quickly appear under the signup card. Additionally there's no spacing in part of the terms of service text.

As a user, I want to modify layout and style settings for different screen resolutions. Presently I might draw my design in Figma at different resolutions and ask a developer to transpose this to code. In my head, I have an idea of what my design should look like on different devices. I need to modify the layout/style settings in funk to match the design I want to produce.

The big difference compared to design tools is I'm only going to design one screen which will work across multiple devices. When I design I normally start from a base that might be desktop, tablet, or mobile, depending on the user requirements. As such I have in my head the base design and apply it to different screen sizes.

more info

needs design and tech discussion @davidjb99 @FranzSkuffka

• Set a base layer for styles (i.e. Desktop 4k), from which the user will modify for sub layouts (iPhoneX)
• When the user is not viewing the base layer make any style/layout changes resolution specific, such that they only apply to that resolution
• Highlight to the user what setting have changed from the base layer
• Allow the user to reset back to the base settings

I find it difficult to remember where to upload images in the current UI. I would like it to work pretty much exactly how it works in figma.

@davidjb99 to do a complete design and userflow

AC

• Add Insert image to the title bar drawing tool dropdown which opens the upload image dialog box as per the interaction in Figma (having a menu item ensures the user know they can insert images and tells them the shortcut too)
• I can copy&paste images from my system clipboard
• I can drag images onto the canvas from my computer or from a different tab
• If I have an element select (for paste) or drop onto an element (drag and drop) the element gets directly liked with the image
• When a user drops an image onto the canvas we auto-create a new screen and add it to an element within that screen. Eventually when we can reconsider this but I think it matches the 'everything must be a screen' concept we presently have.

TODO

more info

Things to think about...

• Conditional rendering
• Modification from design system?
• One screen per canvas then default to components?

As a user of funk when I place an image in the canvas and set the display options I expect it to behave the same way when I deploy it. Presently it is different in deploy/preview and the canvas. I think the bugs are partly related to the width / height fill options but I'm not totally sure.

• Check if this still occurs

Hi
When trying to open the editor I see this

This is Chrome 88 on MacOS

Thanks

Logic
Visual and code data transformation tools allow complex apps to be built.
Load web-optimised NPM packages from SkyPack.de and transform data within funk

"SkyPack.de" brings you to a company selling trolleys 😉

currently, every keyboard input is tracked, this results in undesirable behavior for undo events

More info

• test with contenteditable (ctrl+z is funky)
• test with input fields
• visualize undo queue somehow in debugger
• research on ODT

Sometimes data sources return empty list. For example, when no items were found in a list. This is a common edge case which designers want to cover. See Refactoring UI p. 234-236

Sometimes surrounding UI is dependent on the empty state. In elm we do things like.

case results of
   [ ] -> "No results"
   _ -> viewResults results

As a user, I want to GET or POST data to an API when a button is pressed. I can correctly set this using the API panel but when I connect this to an ACTION (such as an onClick event in a button) the API request is not made.

More info

AC

• when I am in a project I want the data from my last request to continue where I left off
• when I preview a project, I want the latest data linked to a page to be fetched
• while the data is loading, I want to see a spinner
• I want only the data fetched that is required in the current page

Tech handoff

• for the current page, aggregate all data connections
• find out what the data connections depend on (e.g. the code depends on an API call)
• once the root of the data (the API) is found, try to make the api call
• the result from the API call should be remotedata.mapped to the transformations that depend on it
• the runtime model (data fetched for each page on load) is clearly separated from the project model (data fetched from an API call in the API editor)
• (how) do we make sure the project data is in sync with the runtime data?