Fee

So, I was given a five year journal for Christmas. The general idea is that each day of the year the journal has a question, for example: "Can people change?" "How could today have been better?" "Today was tough because..." You get the idea, 366 days (to account for leap years), 366 different questions. Each page has space for five separate answers. Each year you start the book again from the beginning. I guess the primary aim of the book is to look back on your answers nostalgically and see how your situation, circumstances, views etc. change over time. I've decided to shamelessly rip-off this idea, and re-build it as an app. I'll most likely build a progressive web app, that'll run on mobile and desktop, although I may build the web and mobile front-ends separately, not yet 100% set on the technologies I'll use. Either way, that isn't what this thread is about. Although I'm comfortable enough ripping the general idea from this book, I don't just want to carbon-copy the questions they use. So, I've put this out to a few different communities to see if, with your help, I can come up with some interesting questions. P.S. I doubt very much I'll ever release the app, and I certainly won't monetise it so I'm not super concerned about Copyright law. I just like the idea, and figured it would be fun to put together. However, I am terrible at thinking up stuff like this (the questions).

Really depends. Where are these images? Do you have a number of images stored somewhere, that you would like to retrieve when the user types into the textbox? Or are you aiming for something more like a Google image search, wherein the user can type any search term and be shown an image? If you're aiming for the first scenario with stored images, I'd recommend: Use the following JS-library to preload a JSON manifest of images, assign them tags e.g. "Chocolate", "Flowers" etc. https://www.createjs.com/preloadjs Create a textbox with an onchange value that calls a JavaScript function. Have this JS function write matching image/s to the screen. Effectively, this solution would be handled solely on the client-side, so, should be pretty snappy. <div id="image_shows_here"></div> <input id="txt_search" type="text" onchange="getImages()"> <script> function getImages(){ //Write your images to the page here... } </script> If you're looking for functionality that is similar to a search engine image search, you'll have to lean on an API to achieve this. As far as I know, Google Images API is discontinued. Bing does offer a service as linked below: https://azure.microsoft.com/en-us/services/cognitive-services/bing-image-search-api/ You'd need to look at making AJAX requests (most likely) to the API if you wanted the images to appear without page refresh. You'd also have to place a great deal of faith in the "Safe Search" capabilities of Bing - you'd be serving images on your website/app from arbitrary sources. For example, what's to stop me searching for "boobies" and populating your website full of NSFW content. Again, you're leaning on a pretty well-established search engine, so this should, in theory, be safe, but some images are bound to slip the net which is something to consider.

My understanding of the Full Screen API is that it only works during user interaction, so it cannot be used maliciously. As per: https://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode Maybe some context would help us understand why you feel the website needs to go full screen, and why you think interaction will interrupt this process? Full screen has a very narrow usage, for example, as used by YouTube, when I watch a video I don't want to interact with my browser for a time. So, I temporarily hide that functionality, if I choose! Auto full screen on YouTube would be annoying - something to consider. For still images, I wouldn't imagine wanting to view them for longer than a couple of seconds before I continue to interact with the browser. For that interaction, I need access to the browser's features I do not want them hidden from me. When you add-in what could be considered intrusive interaction (full screen, audio etc.) always allow the user to opt-in, rather than opt-out.

I've just tested and it works for me using a Galaxy S9 without issue. However, your site is taking an age to load.. Running it through Google's speed test gives a score of 25/100. https://developers.google.com/speed/pagespeed/insights/?url=beeoutdoor.co.uk It'd be worth looking into this.

Use preloadJS to load a bunch of images, then EaselJS to provide the drag-and-drop functionality: https://createjs.com/ The following tutorial will show you how to achieve drag-and-drop with EaselJS: https://www.createjs.com/tutorials/Mouse Interaction/ Sending you the end design is slightly more difficult... You could track everything that happens on the canvas in a JavaScript Object. When an image gets added, add it to the object, when a user drags it, update the X and Y coordinates. When the user hits send you'd simply need to JSON.stringify the object and either save it to a database or send it to yourself somehow. Although saving in a database is probably the optimal solution as clients would be able to revisit their design at a later date. When you'd like to view a client design, you would need to read the JSON string back in, parse it and then loop through the JavaScript Object to rebuild the canvas. Alternatively, using the following two libraries, you could export the canvas as a PDF: https://html2canvas.hertzen.com/ https://parall.ax/products/jspdf I've made a similar app which is used by children to build an interactive Life Story Book (https://en.wikipedia.org/wiki/Life_story_work) and I can tell you from experience that what you're suggesting will be a massive undertaking in terms of development, before it is anywhere near useful. That said, the above will allow you to make a proof of concept that allows clients to drag some images around a canvas and save the result.

Have a look at the following link which gives a breakdown of browser support, and even more crucially an estimated usage percentage: https://caniuse.com/#feat=css-grid CSS Grid Layout comes in at 88.17% global usage if prefixed. Obviously, the usage statistics for your site may be higher or lower depending on your specific audience. To me personally, CSS Grid Layout has enough browser support to be used. However, 11.83% is by no means an insignificant figure and as such I would be looking at writing some fallback CSS to deal specifically with older browsers rather than not catering for them entirely. There is definitely some merit to feature queries and as far as I know all browsers that do not support CSS Grid, will support feature queries - so, this might be worth looking in to: https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/ I think though you've hit the nail on the head with "Considering using css grid to increase efficiency but not sure if it is worth it" this I believe is the crux of it. Yes, CSS Grid increases efficiency- but when you are forced to write fallbacks the net time spent on utilising the technology may be better spent elsewhere.

I really like the logo. A couple of things I picked up on, just had a quick look. On the home page I think there could be a good deal more contrast between the navigation/logo and the background. I'd also probably prefer a sticky navigation. I think the "Five stars on Trust Pilot" section should link to trust pilot for authenticity purposes. With regard to CSS Google prefers one file. If you minify it, even better. Some people will have two separate CSS files; The one 'main' CSS file contains layout-essential CSS - everything else gets loaded after the fold in a separate CSS file using a <noscript> tag. This in theory should speed up page load somewhat, although I've never tested this personally. I personally stick to one CSS file, minified.

Give all the DIVs an identical class. On click, use JavaScript to toggle a hidden class on all DIVs with the same class, to hide all the DIVs. Then build in an exception that doesn't add the hidden class to the DIV that fired the event - i.e. the one that was clicked.

You'll need a server side scripting language to query the database such as PHP. MySQL would certainly work but there are numerous other considerations such as sanitizing input/protecting against SQL Injection to name one. I'd suggest start at the beginning and try to find a decent tutorial covering each of the WAMP (Windows, Apache MySQL, PHP) stack elements individually. If you install PHPMyAdmin with this stack you'll have a web based control panel for easy database interaction.

Building something similar in both frameworks is a good idea, thanks for that. I have a todo app built in Node just using JQuery on the front-end, so I'll likely make a frontend in Vue and React. Why is there much hype surrounding Cordova if it's so poor? I mean, I get it will never perform as well as a native app, but I thought it was still a viable option for small - medium apps? I will certainly look into React Native though. Cheers for the advice.

So, I've got some spare time on my hands over the next few months and I would really like to spend it working with a front-end framework. I've spent the last 3 - 4 months getting more comfortable with Node, and want to expand this by building on my front-end skillset. I used to be pretty big on AngularJS, but I've moved away from that recently and would like to focus on something a bit more up-to-date. I am torn between spending some time getting to grips with Vue or opting instead for React. I appreciate that React has more employment potential, but this is really just for my own benefit. What I am struggling with, is trying to find a balanced opinion on what the pros and cons of each framework are. So, I am wondering if any of the members here have spent time in each framework, and could provide some opinions on the benefits/drawbacks of each? Down the line, I want to move into Cordova development. My knowledge of Cordova is at this point totally lacking, so I might be misunderstanding it entirely but I wonder if a specific framework would be more suited toward this? If so, that would be a big selling point for me. Any thoughts on this would be most appreciated.

I'd be inclined to use a ready-made solution. It's going to perform better and be much easier. I've used SCEditor in the past. It's fairly decent: https://www.sceditor.com/ It comes with loads of options (buttons on the toolbar). If you only want the ones listed above, check out this page on the documentation to limit the options: https://www.sceditor.com/documentation/options/

My first question would be, how does this differ significantly from the services Google provides via their Maps functionality? All of the features you've listed above are currently available: I can search for a City and I can read about all the different things there is to see and do. This is linked in with Google Reviews/TripAdvisor. So, I can read what others are saying, see photos, consult opening times and pricing. I can also do searches based on what is Nearby. For example, consider I was at a conference in Berlin at the Berlin Congress Center, I could have Google provide me with a list of hotels in the vicinity, view the reviews, check out the prices, and be linked directly to the hotel's website to make a booking. Maps also provide route planning, so I can get around easily. In one-click, I can toggle between driving, cycling, walking, trains or buses. This provides me with a detailed route, time and distance. I can also download the instructions straight to my device, for offline use. If I need to use a train/bus, I am provided with the service number and a link directly to the provider so that I could buy tickets online. What your proposing is a serious undertaking, and it would be extraordinarily difficult without programming experience. I think even one developer would struggle with a project this size. Beyond that, however, an even greater challenge would be collating all of the data you would need to make this usable. Where are you going to get the maps of all the cities? The train/bus timetables, all of the information about things to see and do? There is only one repository that I know that could provide this, and that is Google Maps, and as I said they already offer all of these features. So, you'd essentially be re-building Google Maps using Google's various APIs. I don't want to dishearten you, it seems you have a project which you are excited about, which is really cool. However, for me, the first step in any undertaking is to scope out what has already been done. I would then gauge the suitability of the project based on that. For example, are there any glaring issues with the current solution? Could I bring something new to the table? And a bunch of questions of that nature. In this case, I think you would struggle to improve upon the solutions already available. Why not consider creating a travel blog? You could write about all of the places you've been, the things you've seen and experienced, plus provide useful insider knowledge and tips to people looking to travel to the places you've visited. That is is something that would be of value to visitors. Providing your content is interesting. It's also something that will be much more achievable without having a programming background. Find yourself a decent free WordPress theme (there are hundreds out there) and you're good to go! If you like the idea of having maps of cities where you can provide your own insights, you could use Google Map's API. Embed a map in your website, create your own custom pins for places of interest, with your own content. You could place this on your blog's homepage and have each pin contain some useful info, and then a link to full blog post about your experiences.

Can you dump your entire code here? I'll take a look at that for you. Based upon your description I'm not fully sure what you are trying to achieve, but I am struggling to understand why you would want to make a user click twice to interact with a button? That'd annoy the hell outta me, personally.

It might be beneficial to produce the layout you are looking for graphically, in something like Photoshop/GIMP/Paint. Because at the moment I am not fully understanding what it is you want to achieve. If you can show me the structure you'd like, I'd gladly mock something up. Off the top of my head, if you want divs side-by-side with equal height, Flexbox is the way to go.