I am working on a React project for a non-profit with the goal to allow them to post articles to viewers on the website. (like Wired.com posts tech articles)
Currently, I am creating a component for each page, then adding that to the React Router route file so it has a URL, then creating a post preview in a few places to link to that new article page (such as on the front page carousel to show recent posts), then finally adding the actual content to the article page (like paragraphs, links, and graphs).
The client now wants to be able to post articles without going thru me, much like a traditional Squarespace/Wordpress site might have setup, but I do not want to backtrack after creating this React site.
I want to try and create something for the client to fit their needs with the current React site. I can imagine how to allow an admin login section that allows the admin to create a post by submitting the title, image URL, and the body text, but two things I am stumped on are how to go about programmatically creating a JS component file (like ArticleName.js) in a specific location in my src directory, and then also editing existing JS files (like adding a route to react router). I would love to get some direction on how to tackle this. Or am I recreating the wheel and is this a use case of when website builders like Wordpress are a better choice?
Yes, you're definitely recreating the wheel and given the use case it's in their best interest to use something that exists already. If you're doing this pro bono and time and cost are not an issue, it'd be a good experience for you and could pad your resume. If any of those things are an issue, take the off the shelf solution, there's a lot to consider that would be difficult for just one person to do quickly and competently.
Related
I am currently working on a news website using react js (backend expres.js rest API). This site needs social share functionality with the image and title of the post. I add meta tags using a helmet. I tried to pre-render packages too, Even though this does not show images of the post when sharing. Can I achieve this using API without server-side rendering? please help me to do this.
As far as I know, while you can change meta tags with javascript (see the answers to this question most consumers of meta tags (Facebook, Twitter, etc) request the document from the server, but don't execute any javascript on that page. That way, the scraper consumes less resources, and reduces the number of attack vectors. That means you will need some way to return specific dynamic values in the <head> for different URLs from a server. SSR is probably the best way to do that – at this point, there should be enough different tools/options that it shouldn't be too hard, and you don't need to run two different systems to render markup, one server-side, the way you would if you did something like dynamically alter the contents of your index page.
I did this using next.js (the react framework). This can make API call and generate HTML in the server. With this, SEO and sharing with title and image are working properly.
(firstly thanks for the help and time looking at this) -
OK so there are allot of frame works out there and i've been going round in circles trying to find the right language to do what I need -
I'm looking to create a web page (personal site) - which is only one page but when clicking on links (such as blog and projects) it then removes the main content on the page and re-populates it with the blog main content ect -
Ideally there would be some type of animation transition between pages -
From looking at some portfolio sites a good example of what I am trying to create is https://jasonliao.co.nz/
Any help here would be great -
Ideally to know:
what is this method called (loading pages without refreshing the page)
Can this be done using vanilla JS? (i'd love to get amazing as one language before throwing in frameworks on top of it) -
Yes I am kinda new to this side of development so any help is really appreciated - thanks,
Wally
I recommend start by learning basic JS (Java Script) then once your confident then move onto JQuery. Udemy would have a few basic courses.
What your asking is really broad as many languages and frameworks could do it. Its more what your use to or features your site will require. eg do you require back-end functions if so then you will need to use something like PHP or Node
This guy was probably using Angular or React for this. It is single page application (SPA). Whole app is loaded in the browser and if it needs some data, it will send HTTP requests to the servers and get data as JSON. If you want to make similar things with vanilla JS, you must use Ajax and do alot of DOM manipulation to achieve the same thing :)
Background
I have several web sites that are related to the same business and they share the same server and even disk space. An entire directory tree is linked in via the file system, and the pages show up on all the sharing sites, just fine. However, each site has different, unique market segmentations, branding, contact data, and so forth. To accommodate this, I have already developed fetching the look-and-feel data from the server using XMLHttpRequest() or ActiveXObject(), as appropriate, and update of various element attributes is done using JavaScript. For example, the business name, contact links, background color and more are provided this way.
Goal
As it is, none of the shared pages have any "navigation" to speak of, certainly no menus, but some of the sites do have these on their other pages. I'd like to now add in each site's navigational tools - the menus - to these shared pages. I am sure I can get all the data to the page via the same mechanism I'm already using. The question is: What are the appropriate ways I can "drop this in?" (Without parsing, it'll be a wall-of-text, but that's OK, I don't care, so long as it works.)
I already have a pair of <nav></nav> tags in every file, waiting for this eventuality, but now I'm not sure how I do a wholesale plunk of all this stuff right into the page using JavaScript or other on-page technique. ...I'd like to avoid any further "server side" munging of the HTML if I can!
Should I give the <nav> an id and then perhaps there's some basic JavaScript syntax I can use to plop this in?
Of course, I already have .css files and so forth, same name, same spot, so that helps. ... TIA!
I'm considering using GitHub Pages to implement a blog and I am kind of in the mood to reinvent the wheel. I've built my website from scratch and I don't want to use Jekyll because it doesn't seem like it can be integrated into an existing website with your own theme (correct me if I'm wrong). I want the following functionalities:
Blog with articles but without the need to constantly update the html myself
Ability to write in plain text on my computer and have my website parse the data and integrate into the website's html when I push to the git repository
A feature on the website which shows a preview of the last three blog posts
The ability to search for specific blog posts hosted on my page through google
I am considering both a static and dynamic solution. The static solution would be to write a python script that reads my blog in text format and updates the blog page to include this new article by adding more html to the blog html page. The dynamic solution would have my blog page fetch articles from the github repository and integrate them into my blog live. This would also allow for fetching more articles on demand (as the user scrolls down my page for example). Is this ridiculously over complicated or does this make sense to do as a little project? Any opinions would be appreciated!
I wrote a static site generator as a Grunt plugin a few years back, so I can probably offer some good advice here.
A static site generator will convert source files (typically Markdown or a similar format for the posts and pages and templates in your templating language of choice) into flat HTML which can then be pushed up to the server. It may also include scripts for pushing it to the place where the site is hosted. If you want to do this in Python there's plenty of appropriate modules - Jinja would be a good example of an appropriate templating system, there's several Markdown implementations, and if you need syntax highlighting Pygments is a solid choice.
It's actually possible to search on the client side. My site uses Lunr.js for this - during the build process it generates an index file for the search, and then that is loaded using jQuery with the rest of the page.
Infinite scroll should also be possible without server-side scripting as it just fetches the same content using Javascript anyway. Paul Irish's Infinite Scroll plugin is no longer maintained, but it would in theory be capable of this and there are probably alternatives.
You might want to check out the article I wrote about it for ideas. The static solution works well for me - it's cheap to host and easy to deploy. You can use Disqus or Facebook comments if need be too.
A simple static site generator is a practical weekend project, and it should be a good way of achieving what you want.
I'm pretty new to Sencha Touch and am trying to make a simple application that has a login form and makes calls and fetch results into lists.
My question is, how should I create the structure of the application? Should it all be inside one .html file? or should I different pages for each list and the login page? If so, how can I change views from one page to another and get transition effects?
There is actually a generator which you can use to generate the canonical app structure. From the Sencha download, go to the jsbuilder directory, then run a command similar to this:
./sencha.sh generate app MyApp path/to/myapp
Also, this slide set demonstrates the structure, though you may have to dig for more of the philosophy for why things are where:
http://www.sencha.com/conference/sessions/session.php?sid=322
And here's the example app talked about in the discussion:
http://cl.ly/1d1S282O1Y2c3N1v1j1i
It's fine to use a single HTML file to get things started, but in the long run it's worth making the application structure consistent with 'best practices' so that others can look at, and understand, your code subsequently.
Sencha Touch generators (coming in v1.1) place the launch logic in a file called app.js and then have files for each model, view and controller (in respective directories).
While you may not be building a fully fledged MVC application from the start, you should probably still use these conventions. Take a look at the Twitter and Kiva apps in the SDK (and at http://dev.sencha.com/deploy/touch/examples/ ) foor good examples.
The index.html file can link to each file individually, but of course for production, you are also advised to look at the JSBuilder tool to package and minify them all so that the device can fetch them in one single HTTP request.
I would break it up by major function (i.e. purpose). For mobile apps, you want to avoid having unnecessary postbacks / loading multiple pages and views if you can help it.
If your mobile app has one purpose, I would keep it on one html page and only break up the JavaScript files as you need to keep it organized.
If it has two purposes (e.g. 1-to ENTER a bunch of information, and 2-to display reports on your data), then I would break it up into two html files.
For example, if you have a mobile app that takes you through a series of wizard steps to perform data entry (i.e. single purpose), I would house that whole wizard inside of an Ext.Panel (on a single page), and swap out each content Ext.Panel "step" of the wizard as the user progresses through the wizard.
Start with the simplest thing and refactor later. I've just done an app in Sencha Touch and it gets quite bewildering looking at the example files. I found the easiest way to learn was to create a single html file and as soon as something became unwieldy or obviously needed a refactor I started creating subsequent files.